WebSocket 是一种在前端和后端之间建立全双工通信的协议，它允许服务器主动向客户端推送数据，实现实时性强的应用。以下是使用 JavaScript 前端实现 WebSocket 连接的一般步骤：
使用
1. 创建 WebSocket 连接：
使用 WebSocket 构造函数创建 WebSocket 连接。您需要提供服务器的 WebSocket URL。
const socket = new WebSocket('wss://example.com/socket');
2. 监听连接事件：
WebSocket 连接有一些事件，您可以通过添加事件监听器来处理这些事件。最常见的是 open、message、error 和 close 事件。
open事件：在连接建立时触发。message事件：当从服务器接收到消息时触发。error事件：当发生错误时触发。close事件：在连接关闭时触发。
socket.addEventListener('open', (event) => {
// 连接已建立
});
socket.addEventListener('message', (event) => {
// 从服务器接收到消息
const message = event.data;
console.log('Received message:', message);
});
socket.addEventListener('error', (event) => {
// 发生错误
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
// 连接已关闭
console.log('WebSocket closed:', event.code, event.reason);
});
3. 发送消息：
使用 send 方法向服务器发送消息。消息可以是字符串、二进制数据或其他格式，具体取决于应用需求。
socket.send('Hello, server!');
4. 关闭连接：
使用 close 方法关闭 WebSocket 连接。
socket.close();
5. 心跳机制：
为确保连接保持活动状态，通常会实现心跳机制。您可以定时向服务器发送特殊的心跳消息，服务器收到后立即回应以确认连接仍然活动。
// 定时发送心跳消息
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send('ping');
}
}, 30000); // 每30秒发送一次心跳
多人连接
1. 创建 WebSocket 服务器：
首先，您需要在后端创建一个 WebSocket 服务器，这可以使用各种编程语言和库来完成。以下是使用 Node.js 和 ws 库创建 WebSocket 服务器的示例：
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
const clients = new Set(); // 用于存储连接的客户端
server.on('connection', (ws) => {
// 当有新连接时，将其添加到客户端集合
clients.add(ws);
// 监听消息事件，将消息广播给所有客户端
ws.on('message', (message) => {
broadcast(message);
});
// 监听关闭事件，从客户端集合中移除
ws.on('close', () => {
clients.delete(ws);
});
});
// 将消息广播给所有客户端
function broadcast(message) {
clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
}
2. 客户端连接：
在前端，每个客户端都可以创建一个 WebSocket 连接到服务器：
const socket = new WebSocket('ws://example.com:8080');
socket.addEventListener('open', (event) => {
// 连接已建立
});
socket.addEventListener('message', (event) => {
// 从服务器接收到消息
const message = event.data;
console.log('Received message:', message);
});
socket.addEventListener('error', (event) => {
// 发生错误
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
// 连接已关闭
console.log('WebSocket closed:', event.code, event.reason);
});
3. 广播消息：
当客户端发送消息时，服务器会将消息广播给所有连接的客户端。这样，每个客户端都可以看到其他客户端发送的消息。
请注意，上述代码示例是一个简单的示例，实际应用可能需要更多的功能，如用户身份验证、房间管理、消息协议设计等。 请确保您的应用具备所需的安全性和性能。
