WebSockets：原理、握手及代码实现

1. WebSockets 原理

WebSockets 是 HTML5 标准的一部分，旨在为 Web 应用提供全双工通信能力。与传统的 HTTP 请求不同，WebSockets 连接一旦建立，就可以在客户端和服务器之间自由传输数据，而不再需要每次通信都重新建立连接。

工作流程：

1. 建立连接：客户端通过 HTTP 协议发起 WebSocket 握手请求，服务器接收到请求后，如果支持 WebSocket，则会返回一个 101 状态码，表示协议切换成功。
2. 数据传输：一旦连接建立，客户端和服务器之间可以在不需要额外的请求-响应的情况下自由交换数据，直到连接被显式关闭。
3. 关闭连接：连接可以由客户端或服务器任何一方发起关闭。

优点：

• 实时性强：由于是全双工通信，数据可以实时地从客户端和服务器双方发送，不再受限于请求-响应模型。
• 减少开销：不需要频繁建立和关闭连接，节省了资源和时间。
• 支持二进制数据：除了文本数据，WebSockets 还可以传输二进制数据，如图片、视频等。

2. WebSocket 握手

WebSocket 握手是建立 WebSocket 连接的第一步，它是通过标准的 HTTP 请求来实现的，但在完成握手后，通信协议会从 HTTP 切换到 WebSocket。

握手请求（由客户端发起）：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

• GET /chat HTTP/1.1：这是一个标准的 HTTP GET 请求，用于发起 WebSocket 连接。
• Upgrade: websocket：表明客户端希望将协议升级为 WebSocket。
• Connection: Upgrade：要求服务器升级连接。
• Sec-WebSocket-Key：一个随机生成的 base64 编码的值，用于安全校验。
• Sec-WebSocket-Version：表示 WebSocket 协议版本，这里是 13。

握手响应（由服务器返回）：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

• 101 Switching Protocols：状态码 101 表示服务器同意切换协议。
• Sec-WebSocket-Accept：基于客户端的 Sec-WebSocket-Key 和一个魔数字符串 "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" 生成的一个校验值，用于验证握手请求的合法性。

3. WebSocket 的代码实现

下面我们通过一个简单的示例来展示如何使用 WebSocket 在客户端与服务器之间实现实时通信。

客户端（JavaScript 实现）：

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');

// 连接打开时触发
socket.onopen = function(event) {
    console.log('WebSocket connection established');
    socket.send('Hello Server!'); // 向服务器发送消息
};

// 接收到消息时触发
socket.onmessage = function(event) {
    console.log('Message from server:', event.data);
};

// 连接关闭时触发
socket.onclose = function(event) {
    console.log('WebSocket connection closed:', event);
};

// 连接发生错误时触发
socket.onerror = function(error) {
    console.error('WebSocket error:', error);
};

服务器端（Node.js 实现）：

const WebSocket = require('ws');

// 创建 WebSocket 服务器实例，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connected');

    // 接收客户端消息
    ws.on('message', (message) => {
        console.log('Received:', message);
        ws.send('Hello Client!'); // 向客户端发送消息
    });

    // 处理连接关闭
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

运行步骤：

1. 启动服务器：在 Node.js 环境中运行服务器端代码。
2. 运行客户端：将客户端代码嵌入到一个 HTML 文件中，并在浏览器中打开该文件。
3. 在浏览器控制台查看 WebSocket 连接建立的日志，并观察客户端和服务器之间的消息传递。

4. WebSockets 的应用场景

WebSockets 适用于多种实时通信场景：

• 实时聊天应用：用户之间可以即时发送和接收消息。
• 实时数据流：如股票行情、加密货币价格等需要实时更新的数据流应用。
• 多人在线游戏：实现玩家之间的实时互动。
• 协作工具：如实时协作编辑、多人白板等。