WebSocket--客户端

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

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

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

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

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

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

相关的API：

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

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

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

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 监听连接建立时执行。

        // 指定链接成功后的回调
        socket.onopen = function () {
            console.log('这是连接成功后的回调')
        }

        socket.addEventListener('open', function(event) {
            console.log('链接上了 == ', event)
            // socket.send(1)
        })

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

        // 指定从服务器接收消息时的回调
        socket.onmessage = function(event) {
            console.log('onmessage == ', event.data)
        }

        socket.addEventListener('message', function(event) {
            console.log('message from server == ', event.data)
        })

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

        // 指定链接失败后的回调
        socket.onerror = function(event) {
            console.log('链接错误 == ', event)
        }

        socket.addEventListener('error', function(event) {
            console.log('addEventListener error == ', event)
        })

5、onclose 监听WebSocket关闭。

        // 指定链接关闭后的回调
        socket.onclose = function() {
            alert('链接已关闭，后续操作无效')
        }

        socket.addEventListener('close', function() {
            console.log('close link')
        })

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

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

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

 

更详细点击查看MDN