此文我们一起看看如何用 js 实现 WebSocket 处理。

在 JavaScript 中，可以使用原生的 WebSocket API 来实现 WebSocket 通信。WebSocket 是一种全双工通信协议，允许客户端和服务器之间进行实时数据交换。

以下是使用 WebSocket 的基本实现步骤和示例代码：

1. 先整体看一下 WebSocket 的生命周期

• open: 连接成功时触发。
• message: 接收到服务器消息时触发。
• close: 连接关闭时触发。
• error: 发生错误时触发。

2. WebSocket 的基本用法

创建 WebSocket 连接

// 创建 WebSocket 连接

const socket = new WebSocket('ws://your-websocket-server-url');

// 监听连接打开事件

socket.addEventListener('open', (event) => {

console.log('WebSocket connection opened:', event);

// 发送消息到服务器

socket.send('Hello Server!');

});

// 监听消息事件

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

console.log('Message from server:', event.data);

});

// 监听连接关闭事件

socket.addEventListener('close', (event) => {

console.log('WebSocket connection closed:', event);

});

// 监听错误事件

socket.addEventListener('error', (event) => {

console.error('WebSocket error:', event);

});

3. 发送消息

使用 socket.send() 方法向服务器发送消息：

socket.send('Hello Server!');

可以发送字符串、JSON 或二进制数据：

// 发送 JSON 数据

const data = { type: 'message', content: 'Hello Server!' };

socket.send(JSON.stringify(data));

// 发送二进制数据

const buffer = new ArrayBuffer(8);

socket.send(buffer);

4. 关闭连接

使用 socket.close() 方法关闭连接：

socket.close();

可以指定关闭代码和原因：

socket.close(1000, 'Normal closure');

5. WebSocket 的 URL

• ws://: 非加密 WebSocket 协议。
• wss://: 加密 WebSocket 协议（类似于 HTTPS）。

6. 完整示例

以下是一个完整的 WebSocket 客户端示例：

// 创建 WebSocket 连接

const socket = new WebSocket('wss://your-websocket-server-url');

// 监听连接打开事件

socket.addEventListener('open', (event) => {

console.log('WebSocket connection opened:', event);

// 发送消息到服务器

socket.send('Hello Server!');

});

// 监听消息事件

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

console.log('Message from server:', event.data);

// 解析 JSON 数据

try {

const data = JSON.parse(event.data);

console.log('Parsed data:', data);

} catch (error) {

console.error('Failed to parse message:', error);

}

});

// 监听连接关闭事件

socket.addEventListener('close', (event) => {

console.log('WebSocket connection closed:', event);

});

// 监听错误事件

socket.addEventListener('error', (event) => {

console.error('WebSocket error:', event);

});

// 发送消息

function sendMessage(message) {

if (socket.readyState === WebSocket.OPEN) {

socket.send(message);

} else {

console.error('WebSocket is not open.');

}

}

// 关闭连接

function closeConnection() {

socket.close(1000, 'Normal closure');

}

7. WebSocket 的 readyState

• 0 (CONNECTING): 连接尚未建立。
• 1 (OPEN): 连接已建立，可以通信。
• 2 (CLOSING): 连接正在关闭。
• 3 (CLOSED): 连接已关闭或无法打开。

8. 与服务器配合

WebSocket 需要服务器端支持。常见的 WebSocket 服务器实现包括：

• Node.js: 使用 ws 库。
• Python: 使用 websockets 库。
• Java: 使用 Java-WebSocket 库。

9. Node.js WebSocket 服务器示例

使用 ws 库创建一个简单的 WebSocket 服务器：

const WebSocket = require('ws');

// 创建 WebSocket 服务器

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

// 监听连接事件

wss.on('connection', (ws) => {

console.log('Client connected');

// 监听客户端消息

ws.on('message', (message) => {

console.log('Received:', message.toString());

// 向客户端发送消息

ws.send(`Server received: ${message}`);

});

// 监听连接关闭事件

ws.on('close', () => {

console.log('Client disconnected');

});

});

console.log('WebSocket server is running on ws://localhost:8080');

10. 注意事项

• 心跳机制: 保持连接活跃，避免超时断开。
• 重连机制: 在连接断开时自动重连。
• 安全性: 使用 wss:// 加密传输，避免敏感数据泄露。

好了，通过以上方法，你可以在 JavaScript 中轻松实现 WebSocket 通信了。如果需要更复杂的功能（如心跳、重连等），可以进一步封装 WebSocket 客户端。

爱学习的小伙伴，关注不迷路哟～

下一篇，一起看看 JavaScript WebSocket 的心跳设置。