17370845950

JavaScript实时通信核心是WebSocket或Socket.io：前者为原生全双工协议，需手动处理连接状态；后者自动降级、重连并支持房间广播，更适生产环境，且需前后端协同实现鉴权、消息格式统一等。

用 JavaScript 实现实时通信，核心是建立客户端与服务器之间的双向、低延迟连接。WebSockets 是浏览器原生支持的协议，适合基础实时场景；Socket.io 则在 WebSocket 基础上封装了自动降级、重连、房间管理等能力，更适合生产环境。

用原生 WebSocket 建立基础连接

WebSocket 是 HTML5 提供的全双工通信协议，需服务端配合（如 Node.js 的 ws 库）。浏览器中只需实例化 WebSocket 对象：

• 创建连接：const ws = new WebSocket('ws://localhost:8080');
• 监听消息：ws.onmessage = (event) => console.log('收到：', event.data);
• 发送消息：ws.send(JSON.stringify({ type: 'chat', text: 'Hello' }));
• 注意处理 onopen、onerror、onclose 状态，避免未连接时调用 send()

用 Socket.io 快速搭建可靠实时应用

Socket.io 自动选择最佳传输方式（WebSocket → HTTP 长轮询），并内置心跳、断线重连和命名空间支持。前后端需同时引入：

• 服务端（Node.js）：npm install socket.io，搭配 http 服务器启动 io 实例
• 客户端：（路径由服务端自动提供）
• 连接后，用 socket.emit() 发送事件，socket.on() 监听事件，如 socket.emit('joinRoom', 'room-123')
• 服务端通过 io.to('room-123').emit('message', data) 向指定房间广播，比手动管理连接更简洁

处理常见问题：断连、鉴权与数据格式

真实项目中不能只依赖“连上了就一直通”。关键点包括：

• 连接前鉴权：Socket.io 支持 auth 选项传 token，服务端在 connection 事件中验证 JWT 或 session
• 断线重连控制：客户端可配置 { reconnection: true, reconnectionAttempts: 5 }；服务端监听 disconnect 做清理
• 消息结构统一：建议约定 { event: 'user:online', data: {...}, timestamp: Date.now() } 格式，方便前端路由分发和日志追踪
• 避免直接传 DOM 节点或函数——只传可序列化的纯对象

简单示例：一个计数器同步

服务端（index.js）：

const io = require('socket.io')(3000);
io.on('connection', socket => {
  socket.on('increment', () => {
    io.emit('countUpdated', { count: (global.count || 0) + 1 });
    global.count++;
  });
});

客户端（HTML）：