HTML5 WebSocket 是一种在客户端和服务器之间建立全双工通信的协议，与传统的 HTTP 请求不同，WebSocket 允许服务器主动向客户端推送消息，同时也允许客户端向服务器发送消息。WebSocket 提供了一种实时、高效的通信机制，特别适合需要频繁数据交换和实时更新的应用程序。

基本概念

1. WebSocket 协议：建立在 TCP 协议之上，通过在客户端和服务器之间创建持久连接来实现双向通信。
2. 全双工通信：客户端和服务器可以同时发送和接收消息，实现实时数据交换。
3. API：在浏览器中使用 WebSocket API，通常通过 JavaScript 来实现。

使用 WebSocket 的步骤

1. 创建 WebSocket 连接

在客户端使用 JavaScript 创建 WebSocket 对象，并指定要连接的服务器地址：

// 创建 WebSocket 实例
var socket = new WebSocket('ws://example.com/socket');

// 处理连接建立事件
socket.onopen = function(event) {
    console.log('WebSocket connected.');
};

// 处理接收消息事件
socket.onmessage = function(event) {
    console.log('Message from server: ', event.data);
};

// 处理连接关闭事件
socket.onclose = function(event) {
    console.log('WebSocket connection closed.');
};

// 处理错误事件
socket.onerror = function(error) {
    console.error('WebSocket error: ', error);
};

2. 发送和接收消息

客户端和服务器可以相互发送和接收消息，消息可以是文本或二进制数据：

// 发送消息给服务器
socket.send('Hello, Server!');

// 接收服务器发送的消息，在 socket.onmessage 事件处理函数中处理
socket.onmessage = function(event) {
    console.log('Message from server: ', event.data);
};

3. 关闭连接

当不再需要连接时，可以关闭 WebSocket 连接：

// 关闭 WebSocket 连接
socket.close();

服务器端实现

服务器端需要支持 WebSocket 协议，并提供相应的处理逻辑。WebSocket 使用 ws:// 或 wss:// 开头的 URL，分别代表非加密和加密的 WebSocket 连接。

使用 Node.js 实现 WebSocket 服务器

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

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

    // 接收客户端消息
    ws.on('message', function incoming(message) {
        console.log('Message from client: ', message);
    });

    // 发送消息给客户端
    ws.send('Hello, Client!');

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

特点与注意事项

1. 实时性：WebSocket 提供低延迟、高效率的实时数据传输，适用于在线游戏、聊天应用等需要快速交互的场景。
2. 跨域支持：WebSocket 支持跨域连接，但需要服务器端和浏览器的支持。
3. 安全性：使用 wss:// 可以实现加密的 WebSocket 连接，提高数据传输的安全性。
4. 兼容性：大多数现代浏览器和服务器都支持 WebSocket，但一些旧版本浏览器可能需要 polyfill 或备用方案。

结论

WebSocket 是一种强大的实时通信协议，为开发者提供了在 web 应用程序中实现双向通信的简单而有效的方式。与传统的轮询和长轮询相比，WebSocket 提供了更低的延迟和更高的效率，适合需要实时更新和频繁数据交换的现代 web 应用场景。