本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/29848

WebSocket 与 HTTP 的区别

与传统的 HTTP 协议相比，WebSocket 具有以下几个显著的区别:

• 双向通信:WebSocket 协议通过建立一条持久化的连接来实现双向通信，而 HTTP 协议是单向请求-响应模式

• 低延迟: 由于 WebSocket 使用长链接，避免了 HTTP 的链接建立和断开过程，可以降低通信延迟

• 更少的数据传输: WebSocket 头部信息相对较小，减少了数据传输的开销

• 跨域支持: WebSocket 可以轻松跨域，而 HTTP 需要通过 CORS 等机制来实现跨域。

WebSocket 的工作原理

• WebSocket 的握手过程和 HTTP 有所不同。在使用 WebSocket 协议时，客户端和服务器会进行一次握手过程，以建立起 WebSocket 连接。握手过程中，客户端会发送一个 HTTP 请求，请求头中包含 Upgrade 和 Connection 字段，告诉服务器它希望升级到 WebSocket 连接。服务器收到请求后会返回一个 HTTP 响应，响应头中包含 Upgrade 和 Connection 字段，以及一个 Sec-WebSocket-Accept 字段，用于验证请求的合法性。握手成功后，客户端和服务器就可以开始使用 WebSocket 协议进行通信了

• 建立链接后，客户端和服务器之间可以通过 WebSocket 发送喝接收消息，可以使用文本、二进制数据等进行通信。

WebSocket 应用场景

• 即时聊天: WebSocket 可以实现实时的聊天功能，用户可以发送和接收消息，实现快速、低延迟的聊天体验。

• 实时数据更新: 对于需要实时更新数据的应用，如股票行情、实时监控等，WebSocket 可以将数据实时推送给客户端，确保数据的及时更新。

• 在线游戏: 在线游戏需要实时的双向通信，WebSocket 可以提供稳定的通信通道，支持实时交互和多人游戏。

WebSocket 的使用

示例代码:

var Socket = new WebSocket("url, [protocol]");

以上代码中的第一个参数 url,指定链接的 url。第二个参数 protocol 是可选参数，指定可接受的子协议。

WebSocket 属性

• Socket.readyState: 只读熟悉 readyState 表示链接状态，可以是以下值：0-表示尚未建立链接。1-表示链接已建立，可以进行通信。2-表示链接正在进行关闭。3-表示链接已经关闭或者链接不能打开

• Socket.bufferedAmount: 只读属性 bufferedAmount 已被 send()放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

WebSocket 方法

WebSocket 设置心跳机制

WebSocket 的心跳机制是一种用于保持 WebSocket 连接的稳定性和活跃性的方法。

• 定义心跳间隔: 为了定期发送心跳消息，你需要定义一个心跳间隔，通常以毫秒为单位。

const heartbeatInterval = 30000; // 30秒

• 定义心跳消息: 定义用于发送心跳的消息内容。

const heartbeatMessage = 'heartbeat';

• 设置心跳定时器: 一旦 WebSocket 链接打开，可使用 setInterval 函数设置一个定时器，以便每隔一段实践发送心跳消息。

let heartbeat;
socket.addEventListener('open', () => {    console.log('WebSocket连接已打开');
    heartbeat = setInterval(() => {        socket.send(heartbeatMessage);    }, heartbeatInterval);});

• 处理心跳消息: 当接收到来自服务器的消息时，需要检查它是否是心跳消息，这可以通过比较接收到的消息内容和心跳消息内容来实现。

socket.addEventListener('message', (event) => {    const message = event.data;
    if (message === heartbeatMessage) {        console.log('接收到心跳消息');        // 在这里可以执行一些处理心跳消息的操作    } else {        console.log('接收到其他消息：', message);        // 处理其他类型的消息    }});

• 清除心跳定时器: 当 WebSocket 链接关闭时，你应该清除之前设置的心跳定时器，以防止继续发送心跳消息。

socket.addEventListener('close', () => {    console.log('WebSocket连接已关闭');
    clearInterval(heartbeat);});

WebSocket 的安全性

WebSocket 支持通过 wss:// 前缀建立加密的安全链接，使用 TLS/SSL 加密通信，确保数据的安全性。在使用加密链接时，服务器需要配置相应的证书。

WebSocket 的跨域问题

对于跨域问题，WebSocket 遵循同源策略，只能与同源的服务器建立链接。如果需要与不同服务器通信，可以使用 CORS(跨域资源共享)来进行跨域访问控制。

WebSocket 第三方库

• Socket.io-client

• ReconnectingWebSocket

• SockJS-client

• RxJs WebSocketSubject

• autobahn.js