10 分钟了解 WebSocket

什么是 WebSocket

WebSocket 是一种通信协议，允许客户端和服务器之间通过单个 TCP 连接进行实时数据传输。

WebSocket 就好比您与好友之间畅通的电话线。与其每次有问题都打电话，不如只打一次，并保持电话畅通。这样就可以在出现问题时立即进行交流。同样，一旦建立了 WebSocket 连接，客户端和服务器就可以随时交换数据，而不需要连续的轮询请求。

WebSocket 连接简单示例

要建立 WebSocket 连接，我们需要使用 JavaScript 创建一个 WebSocket 对象：

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

第一个参数 url 指定要连接的 URL。

第二个参数 protocol 是可选参数，用于指定可接受的子协议。

WebSockets 属性

要显示 WebSocket 对象的属性，我们可以访问 Socket.readyState 和 Socket.bufferedAmount 属性。

Socket.readyState 属性表示连接的当前状态，可以有以下值：

• 0：表示连接尚未建立（CONNECTING）。
• 1：表示已建立连接并且可以进行通信（OPEN）。
• 2：表示连接正在进行关闭握手（CLOSING）。
• 3：表示连接已关闭或无法打开（CLOSED）。

Socket.bufferedAmount 属性是一个只读属性，表示使用 send() 方法排队的 UTF-8 文本字节数。

下面是一个示例，说明如何在 JavaScript 中访问和使用这些属性：

// Assuming you have created a WebSocket object named 'Socket' as mentioned above

// Accessing the readyState property
console.log("WebSocket Connection State: " + Socket.readyState);
switch(Socket.readyState) {
    case 0:
        console.log("Socket State: CONNECTING");
        break;
    case 1:
        console.log("Socket State: OPEN");
        break;
    case 2:
        console.log("Socket State: CLOSING");
        break;
    case 3:
        console.log("Socket State: CLOSED");
        break;
}

// Accessing the bufferedAmount property
console.log("Buffered Amount: " + Socket.bufferedAmount);

WebSockets 事件

WebSocket 对象有几个事件，如open、message、error ，close，您可以在代码中监听和处理这些事件。

Socket.onopen = function() {
    console.log("WebSocket connection opened");
};

Socket.onmessage = function(event) {
    console.log('Message received: ' + event.data);
};

Socket.onerror = function(error) {
    console.error('WebSocket error: ' + error);
};

Socket.onclose = function(event) {
    console.log('WebSocket connection closed');
};

WebSockets 方法

管理 WebSocket 连接有两个重要方法：send() 和 close()。

Socket.send('Hello, server!')
Socket.close()

要通过 WebSocket 发送和接收文本信息以外的二进制数据，可以使用带有 ArrayBuffer 或 Blob 对象的 send() 方法。

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setUint32(0, 1234);
socket.send(buffer);

接收二进制数据时，可通过 event.data 访问 ArrayBuffer 对象并执行进一步处理。

心跳机制

WebSocket 心跳机制通过定期发送小消息来确保连接的有效性，从而保持稳定的活动连接。这有助于快速检测和解决任何断开连接或问题。

定义心跳间隔

 const heartbeatInterval = 30000; // 30000 milliseconds

定义心跳消息

const heartbeatMessage = 'heartbeat';

设置心跳计时器

let heartbeat;

socket.addEventListener('open', () => {
    console.log('WebSocket connection opened');

    heartbeat = setInterval(() => {
        socket.send(heartbeatMessage);
    }, heartbeatInterval);
});

处理心跳消息

socket.addEventListener('message', (event) => {
    const message = event.data;

    if (message === heartbeatMessage) {
        console.log('Heartbeat messages received.');
    } else {
        console.log('Other received messages：', message);
    }
});

清除心跳计时器

socket.addEventListener('close', () => {
    console.log('WebSocket connection closed');
    clearInterval(heartbeat);
});

通过这些步骤，您可以建立一个 WebSocket 心跳机制，以保持连接的稳定性，满足长期通信的要求。

安全和跨域问题

WebSocket 可通过 wss:// 前缀实现安全连接，使用 TLS/SSL 进行加密通信以保护数据安全。加密连接需要服务器配置相应的证书。

与常见的网络协议相反，WebSocket 并不严格执行同源策略，而是允许跨不同源进行连接。对于跨域通信，服务器可以实施类似于 CORS（跨源资源共享）的检查来进行访问控制。

第三方 WebSocket 库

• Socket.io-client：Socket.io-client 是一个领先的实时 Web 应用程序库，它提供了一个 JavaScript 客户端库来连接 Socket.io 服务器。它具有自动重新连接和事件处理功能，简化了实时应用程序开发。
• ReconnectingWebSocket：该库通过添加自动重新连接功能来增强 WebSocket，使其成为维护弹性浏览器端 WebSocket 连接的理想选择。
• SockJS-client：SockJS-client 提供了一个 JavaScript 库，用于与 SockJS 服务器进行基于浏览器的通信，为不支持 WebSocket 的环境提供后备选项，确保广泛的兼容性。
• RxJS WebSocketSubject：WebSocketSubject 是 RxJS 库的一部分，它将 WebSocket 转换为可观察的流，有助于实现反应式编程模式。
• autobahn.js：autobahn.js 促进浏览器中的 WebSocket 和 WAMP（Web 应用程序消息传递协议）通信，从而实现与 WAMP 路由器的轻松交互。

感谢您抽出时间阅读本文。希望这篇文章能给您带来启发和帮助。