WebSocket

为了解决轮询带来的一些问题，HTML5定义了WebSocket协议，它能更好的节省服务器资源和带宽，并且能够更实时的进行通讯。

WebSocket使用ws | wss的统一资源标志符（URI），其中wss使用了TLS的WebSocket。如：

ws://echo.websocket.org

wss://echo.websocket.org

WebSocket与HTTP和HTTPS使用相同的TCP端口，可以绕过大多数防火墙的限制。

默认情况下：

• WebSocket使用 80 端口
• 如果运行在TLS上，则默认使用 443 端口

WebSocket简介

WebSocket允许服务端主动向客户端发送信息。在WebSocket API中，客户端与服务端只需要完成一次握手，两者之间就能创建持久性的连接，并进行双向数据传输。

下图表明轮询与WebSocket的区别：

WebSocket优点

一般来说，WebSocket有以下几个优点：

1. 较少的开销控制：在创建连接后，客户端与服务端之间交换数据时，用于协议控制的数据包头部相对较小
2. 更强的实时性：由于客户端和服务端是双端联通的，所以服务端可以随时给客户端发送消息，相较于服务端被动等待客户端请求的方式，明显延迟更低
3. 保持连接状态：与HTTP不同的是，WebSocket需要先创建链接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息
4. 更好的二进制支持：WebSocket定义了二进制帧，相对于HTTP可以更轻松的处理二进制内容
5. 可以支持扩展：WebSocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议

因为以上的一些优点，因此它被广泛应用于即时通讯/IM、实时音视频、在线教育和游戏等领域。

WebSocket API 学习

首先，关于WebSocket的兼容性，我们可以到这个网站进行查阅：https://caniuse.com/

构造函数

我们可以使用new来创建一个websocket实例：

/**
 * @param {string} url 表示连接的 url
 * @param {string | Array<string>} protocols 可选，一个协议字符串或包含协议字符串的数组
 */
const websocket = new WebSocket(url, protocols)

注

protocols这些字符串用于指定子协议，这样单个服务器可以实现多个WebSocket子协议。

如你可能希望一台服务器能够根据指定的协议处理不同类型的交互。如果不指定协议字符串，则假定为空字符串。

使用WebSocket构造函数时，当尝试连接的端口被阻止时，会抛出SECURITY_ERR异常。

属性

websocket对象包含以下属性，每个属性具体含义如下：

• binaryType：使用二进制的数据类型连接；
• bufferedAmount（只读）：未发送至服务器的字节数；
• extensions（只读）：服务器选择的扩展；
• onclose：用于指定连接关闭后的回调函数；
• onerror：用于指定连接失败后的回调函数；
• onmessage：用于指定当从服务器接受到信息时的回调函数；
• onopen：用于指定连接成功后的回调函数；
• protocol（只读）：用于返回服务器端选中的子协议的名字；
• readyState（只读）：返回当前 WebSocket 的连接状态，共有 4 种状态：
  • CONNECTING — 正在连接中，对应的值为 0
  • OPEN — 已经连接并且可以通讯，对应的值为 1
  • CLOSING — 连接正在关闭，对应的值为 2
  • CLOSED — 连接已关闭或者没有连接成功，对应的值为 3
• url（只读）：返回值为当构造函数创建 WebSocket 实例对象时 URL 的绝对路径。

方法

websocket主要方法有两个：

1. send(data)：该方法将需要通过websocket传输的数据排入队列，并根据所需要传输的数据的大小来增加bufferedAmount的值。若数据无法传输（如数据需要缓存而缓冲区已满）时，套接字会自动关闭。
2. close(code, reason)：该方法用于关闭websocket连接，如果连接已经关闭，此方法不会执行任何操作。

事件

使用addEventListener()或将一个事件监听器赋值给websocket对象的oneventname属性，来监听下面的事件。

• close：当一个websocket连接被关闭时触发，也可以通过onclose属性来设置；
• error：当一个websocket连接因错误而关闭时触发，也可以通过onerror属性来设置；
• message：当通过websocket收到数据时触发，也可以通过onmessage属性来设置；
• open：当一个websocket连接成功时触发，也可以通过onopen属性来设置。

WebSocket 接口参考 | MDN