选择WebSocket因其实现持久化双向通信，相比HTTP轮询显著降低延迟与资源消耗，适用于聊天室、实时通知等场景。Node.js通过ws库可快速搭建WebSocket服务，前端利用原生API连接并实时接收数据，结合定时发送机制与事件监听实现动态更新。需注意连接稳定性、重连机制、错误处理及安全性，推荐使用wss加密传输，服务端维护clients集合支持广播，确保心跳机制与异常恢复完善以保障生产环境可靠性。
前端要实时获取后端数据，传统轮询方式效率低、延迟高。使用 WebSocket 能实现双向通信，真正达到“实时”效果。结合 Node.js 后端，WebSocket 是最直接、高效的方案之一。
1. 为什么选择 WebSocket？
HTTP 请求是单向的，前端必须主动发起才能拿到数据。而 WebSocket 建立的是持久连接，服务端可以主动向前端推送消息。
适用场景包括：聊天室、实时通知、股票行情、在线协作等需要即时更新的业务。
- 低延迟：建立一次连接，长期通信
- 双向通信：服务端可主动推数据
- 节省资源：相比轮询减少大量无效请求
2. Node.js 后端搭建 WebSocket 服务
使用 ws 库快速创建 WebSocket 服务。先安装依赖：
立即学习“前端免费学习笔记（深入）”；
npm install ws然后创建一个简单的服务器（server.js）：
const http = require('http');
const WebSocket = require('ws');
// 创建 HTTP 服务
const server = http.createServer();
const wss = new WebSocket.Server({ server });
// 监听客户端连接
wss.on('connection', (ws) => {
console.log('客户端已连接');
// 定时发送实时数据
const interval = setInterval(() => {
const data = { time: new Date().toISOString(), value: Math.random() };
ws.send(JSON.stringify(data));
}, 1000);
// 监听客户端消息
ws.on('message', (message) => {
console.log('收到:', message.toString());
});
// 连接关闭时清理
ws.on('close', () => {
console.log('客户端断开');
clearInterval(interval);
});
});
server.listen(3001, () => {
console.log('WebSocket 服务运行在 ws://localhost:3001');
});
3. 前端通过 WebSocket 连接并接收数据
前端使用原生 WebSocket API 连接 Node 服务，并监听消息事件。
HTML 页面中添加以下 JavaScript 代码：
<script>
const socket = new WebSocket('ws://localhost:3001');
// 连接成功
socket.addEventListener('open', (event) => {
console.log('已连接到 WebSocket 服务');
});
// 监听来自服务端的消息
socket.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
console.log('实时数据:', data);
// 更新页面内容
document.getElementById('data').innerHTML = `
时间: ${data.time} <br>
数值: ${data.value.toFixed(4)}
`;
});
// 处理错误
socket.addEventListener('error', (event) => {
console.error('连接出错', event);
});
// 连接关闭
socket.addEventListener('close', (event) => {
console.log('连接已关闭');
});
</script>
<div id="data">等待数据...</div>
4. 注意事项与优化建议
实际项目中需考虑连接稳定性、重连机制和错误处理。
- 网络异常时手动重连：监听 close 事件后延迟重新 new WebSocket
- 避免频繁创建连接：封装成单例模式或使用连接池
- 传输格式统一：推荐使用 JSON 格式传递结构化数据
- 安全性：生产环境建议使用 wss（WebSocket Secure），配合 HTTPS
- 服务端管理：多个客户端连接时，可用 clients 集合广播消息
基本上就这些。WebSocket 让前后端实时通信变得简单高效，Node.js 搭配 ws 库上手快、维护方便。只要前后端建立好协议，就能稳定推送各类实时数据。不复杂但容易忽略细节，比如心跳机制和异常恢复，上线前务必测试完整流程。
