选择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 服务，并监听消息事件。
<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 库上手快、维护方便。只要前后端建立好协议，就能稳定推送各类实时数据。不复杂但容易忽略细节，比如心跳机制和异常恢复，上线前务必测试完整流程。