WebSocket 是一种能够在客户端和服务器之间实现双向通信的协议。它使用 HTTP（或 HTTPS）协议建立连接，然后通过套接字进行数据交换，相比于 HTTP 协议的请求—响应模式，WebSocket 协议能够更加实时地进行数据交换，从而提高了应用程序的性能和可用性。
在前端实现 WebSocket 通信时，必须考虑到以下因素：
- 如何建立 WebSocket 连接；
- 如何发送数据和接收数据；
- 如何处理连接状态的变化；
- 如何使用 RESTful API 实现 WebSocket 通信。
本文将从上述四个方面说明前端实现 WebSocket 通信的技巧，并提供相应的示例代码以供参考。
建立 WebSocket 连接
建立 WebSocket 连接的步骤如下：
- 创建 WebSocket 对象，可以使用浏览器提供的
WebSocket构造函数，如下所示：
const ws = new WebSocket('wss://example.com')
- 监听 WebSocket 连接事件，可以使用
WebSocket对象的onopen、onmessage、onclose和onerror属性分别监听连接建立、接收到消息、连接关闭和连接出错事件。例如：
-- -------------------- ---- ------- --------- - -- -- - ---------------------- ------- - ------------ - ------- -- - --------------------- ----------- - ---------- - -- -- - ---------------------- ------- - ---------- - ------- -- - ---------------------- ------- ------ -展开代码
- 发送消息，可以使用
WebSocket对象的send方法发送数据，例如：
ws.send('Hello, WebSocket!')
发送数据和接收数据
WebSocket 连接建立后，可以使用 WebSocket 对象的 send 方法发送数据，也可以在 onmessage 事件中接收数据。例如：
ws.onmessage = (event) => { console.log('接收到消息：', event.data) }
处理连接状态的变化
当 WebSocket 连接状态发生变化时，需要作出相应的处理。可以使用 WebSocket 对象的 readyState 属性获取连接状态，其取值为：
0：连接尚未建立；1：连接已经建立，可以进行数据交换；2：连接正在进行关闭；3：连接已经关闭或连接不能打开。
我们可以在 onopen、onmessage、onclose 和 onerror 事件中获取连接状态并作出相应的处理。例如：
-- -------------------- ---- ------- --------- - -- -- - ---------------------- ------- - ------------ - ------- -- - --------------------- ----------- - ---------- - -- -- - ---------------------- ------- - ---------- - ------- -- - ---------------------- ------- ------ -展开代码
使用 RESTful API 实现 WebSocket 通信
虽然 WebSocket 协议能够实现双向通信，但在实际应用中，服务器可能并不支持 WebSocket 协议，或者防火墙可能会阻止 WebSocket 连接。此时我们可以使用 RESTful API 实现 WebSocket 通信。
具体实现方法如下：
- 客户端使用 AJAX 发送请求到服务器，请求的表现形式是一个 HTTP 请求。
- 服务器收到请求后，返回一个响应，响应的表现形式也是一个 HTTP 响应。
- 客户端收到响应后，解析响应的内容，并根据内容进行相应的操作。
在使用 RESTful API 实现 WebSocket 通信时，一般会使用长轮询或短轮询的方式进行数据交互。短轮询是指客户端每隔一段时间就向服务器发送一次请求，长轮询是指客户端发送一次请求，服务器保持连接，并在有数据更新时推送数据到客户端。下面是使用 fetch API 实现短轮询的示例代码：
setInterval(() => { fetch('https://example.com/api') .then(res => res.json()) .then(data => { console.log('接收到数据：', data) }) }, 5000)
总结
本文介绍了前端实现 WebSocket 通信的技巧，包括建立 WebSocket 连接、发送数据和接收数据、处理连接状态的变化以及使用 RESTful API 实现 WebSocket 通信。希望本文能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6585a4f0d2f5e1655d03ba91
