JavaScriptWebSocket_实时通信应用开发

夜晨 2025-11-23 00:00:00 次阅读

WebSocket通过单个TCP连接实现全双工通信，适用于实时场景如聊天室和行情推送；相比HTTP轮询，其延迟低、负载小；浏览器使用原生API创建连接并监听open、message、error、close事件以收发消息和处理状态；服务端可用Node.js的ws库搭建，支持广播消息给所有客户端；需关注连接状态readyState及错误重连机制，确保通信稳定。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，特别适合需要实时交互的应用场景，比如聊天室、在线协作、股票行情推送等。相比传统的 HTTP 轮询，WebSocket 能显著降低延迟和服务器负载。

建立 WebSocket 连接

在浏览器端，JavaScript 提供了原生的 WebSocket API，使用非常简单：

const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', (event) => {
console.log('连接已建立');
socket.send('客户端上线');
});

注意 URL 协议是 ws（非加密）或 wss（加密），类似于 HTTPS。

处理消息收发

通过监听 message 事件接收服务器推送的数据：

socket.addEventListener('message', (event) => {
  console.log('收到消息:', event.data);
});

发送消息只需调用 send() 方法：

function sendMessage() {
  const input = document.getElementById('messageInput');
  socket.send(input.value);
  input.value = '';
}

服务端实现（Node.js + ws 库）

使用 Node.js 搭建 WebSocket 服务端，推荐 ws 库：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('客户端已连接');
socket.on('message', (data) => {
console.log('收到:', data);
// 广播给所有客户端
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
});
socket.on('close', () => {
console.log('客户端断开');
});
});

错误处理与连接状态管理

实际开发中必须监听错误和连接状态变化：

socket.addEventListener('error', (event) => {
  console.error('连接出错:', event);
});
socket.addEventListener('close', (event) => {
console.log('连接关闭', event.code, event.reason);
// 可在此实现重连逻辑
setTimeout(() => connect(), 3000);
});