1. 创建 WebSocket 连接

WebSocket 是通过 WebSocket 对象建立的。连接成功后，前端可以与服务器双向通信。

const socket = new WebSocket('ws://your-server-url');// 监听连接建立
socket.onopen = () => {console.log('WebSocket connection established');// 可以在连接建立后发送一条消息socket.send(JSON.stringify({ type: 'INIT', payload: 'Hello Server!' }));
};// 监听错误
socket.onerror = (error) => {console.error('WebSocket error:', error);
};// 监听连接关闭
socket.onclose = (event) => {console.log('WebSocket connection closed:', event);
};

2. 接收服务器消息

通过监听 onmessage 事件来处理服务器推送的消息。

socket.onmessage = (event) => {try {const message = JSON.parse(event.data); // 假设服务器发来的是 JSON 格式的数据console.log('Received message from server:', message);// 根据消息类型做不同处理switch (message.type) {case 'UPDATE':// 更新前端状态console.log('Update:', message.payload);break;case 'ALERT':// 展示提示信息alert(message.payload);break;default:console.warn('Unknown message type:', message.type);}} catch (err) {console.error('Error parsing message:', err);}
};

3. 发送消息到服务器

可以通过 socket.send 方法发送数据到服务器。

// 发送简单消息
socket.send('Hello Server');// 发送 JSON 数据
socket.send(JSON.stringify({ type: 'PING', timestamp: Date.now() }));

4. 处理重连逻辑

为了提高 WebSocket 的可靠性，需要处理连接断开后的重连。

function createWebSocket(url: string) {let ws: WebSocket | null = null;function connect() {ws = new WebSocket(url);ws.onopen = () => console.log('Connected');ws.onmessage = (event) => console.log('Message received:', event.data);ws.onclose = (event) => {console.log('Disconnected:', event.reason);// 自动重连setTimeout(connect, 3000);};ws.onerror = (error) => {console.error('WebSocket error:', error);};}connect();return ws;
}const socket = createWebSocket('ws://your-server-url');

5. 前端框架集成

React 中使用 WebSocket

使用 useEffect 创建和清理 WebSocket。

import React, { useEffect, useState } from 'react';const WebSocketDemo: React.FC = () => {const [messages, setMessages] = useState<string[]>([]);useEffect(() => {const socket = new WebSocket('ws://your-server-url');socket.onopen = () => console.log('Connected');socket.onmessage = (event) => {setMessages((prev) => [...prev, event.data]);};socket.onclose = () => console.log('Disconnected');socket.onerror = (error) => console.error('Error:', error);// 清理连接return () => {socket.close();};}, []);return (<div><h1>WebSocket Messages</h1><ul>{messages.map((msg, index) => (<li key={index}>{msg}</li>))}</ul></div>);
};export default WebSocketDemo;

6. 优化与注意事项

1. 心跳检测： 定期发送心跳包检测连接状态。

   ​setInterval(() => {    if (socket.readyState === WebSocket.OPEN) {        socket.send(JSON.stringify({ type: 'PING' }));    }}, 10000);​

2. 断开重连： 确保在连接断开时自动尝试重新连接。

3. 防止消息阻塞： 使用队列存储待发送消息，确保连接恢复时不会丢失重要信息。

4. 消息格式： 推荐使用 JSON 格式，明确消息类型和数据。