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)向指定房间广播，比手动管理连接更简洁
处理常见问题：断连、鉴权与数据格式
真实项目中不能只依赖“连上了就一直通”。关键点包括：
立即学习“Java免费学习笔记（深入）”；
-
连接前鉴权：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）：
const socket = io();socket.on('countUpdated', ({ count }) => {
document.getElementById('counter').textContent = count;
});
document.getElementById('btn').onclick = () => socket.emit('increment');
