WebSocket--客户端

曾经终败给现在 2021-11-11 00:54 514阅读 0赞

WebSocket 是 HTML5 提供的一种在单个TCP连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务端通讯，数据交换更加简单，而且允许服务端主动向客户端发送数据。在WebSocket API 中，浏览器和服务器只需要完成一次握手，就可以建立一条持久性的通道，进行数据的双向传输。

现在，很多的网站的推送技术是依然使用ajax轮询。轮询是在一定时间间隔后，由浏览器发送请求到服务器，然后获得服务器返回的最新的数据。这种方式，明显的缺点就是浏览器需要不断地发送请求，而请求可能包含较长的头部，真正有效的只有一小部分，造成了宽带资源的浪费。一直请求加重了服务端的压力。

HTML5定义的WebSocket协议，更更好的节省宽带和服务器资源，能够进行实时通讯，而且是服务端可控的，当数据没有更新时，可以不用传送数据。

浏览器通过JavaScript向服务器发送建立WebSocket链接的请求，链接建立后，服务器和浏览器端就可以通过TCP连接直接交换数据了。

当获取WebSocket连接后，可以通过 send() 方法向服务器发送数据，并通过 onmessage 事件来监听服务端返回的数据。

相关的API：

1、创建 WebSocket 对象：new WebSocket(url \[, protocol \])

1 const socket = new WebSocket('ws://localhost:2333');

关于url，MDN 说应该使用 wss:// 模式。我这是使用vscode 本地连接可以使用 ws://

MDN原文：[MDN传送门][MDN]

The URL to which to connect; this should be the URL to which the WebSocket server will respond. This should use the URL scheme `wss://`, although some software may allow you to use the insecure `ws://` for local connections.

第二个可选参数，规定可接受的子协议。一个服务器可以实施多个WebSocket子协议，比如希望一个服务器根据指定的协议处理不同类型的交互。不指定则为空字符串。

2、onopen 监听连接建立时执行。

1         // 指定链接成功后的回调
    2         socket.onopen = function () {
    3             console.log('这是连接成功后的回调')
    4         }
    5 
    6         socket.addEventListener('open', function(event) {
    7             console.log('链接上了 == ', event)
    8             // socket.send(1)
    9         })

3、onmessage 监听服务端返回的数据，然后执行回调函数。

1         // 指定从服务器接收消息时的回调
    2         socket.onmessage = function(event) {
    3             console.log('onmessage == ', event.data)
    4         }
    5 
    6         socket.addEventListener('message', function(event) {
    7             console.log('message from server == ', event.data)
    8         })

4、onerror 监听发生错误时的情况。

1         // 指定链接失败后的回调
    2         socket.onerror = function(event) {
    3             console.log('链接错误 == ', event)
    4         }
    5 
    6         socket.addEventListener('error', function(event) {
    7             console.log('addEventListener error == ', event)
    8         })

5、onclose 监听WebSocket关闭。

1         // 指定链接关闭后的回调
    2         socket.onclose = function() {
    3             alert('链接已关闭，后续操作无效')
    4         }
    5 
    6         socket.addEventListener('close', function() {
    7             console.log('close link')
    8         })

on事件的执行会先于对应的 addEventListener。

6、WebSocket 还有几个只读属性。

1             // 用于返回服务器端选中的子协议的名字；这是一个在创建WebSocket 对象时，在参数protocols中指定的字符串
     2             console.log( 'socket protocol == ', socket.protocol )
     3             // 返回当前 WebSocket 的链接状态。
     4             // 0：连接中；1：已连接且可通讯；2：正在关闭；3：连接已关闭或没有连接成功
     5             console.log( 'socket readyState == ', socket.readyState )
     6             // 构造函数创建WebSocket实例对象时URL的绝对路径。
     7             console.log( 'socket url == ', socket.url )
     8             // 返回服务器已选择的扩展值。目前，链接可以协定的扩展值只有空字符串或者一个扩展列表。
     9             console.log( 'socket extensions == ', socket.extensions )
    10             // 返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性值将被重置为0。但是，若在发送过程中连接被关闭，则属性值不会重置为0。如果你不断地调用send()，则该属性值会持续增长。
    11             console.log( 'socket bufferedAmount == ', socket.bufferedAmount )

[更详细点击查看MDN][MDN 1]

转载于:https://www.cnblogs.com/xguoz/p/11271430.html

[MDN]: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
[MDN 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket