WebSocket是一种在单个TCP连接上提供全双工通信的网络协议，通过ws://或wss://建立持久化连接，实现浏览器与服务器间的实时双向数据传输。1. 与HTTP不同，WebSocket连接建立后，客户端和服务器均可主动发送数据，适用于聊天、通知、行情等实时场景。2. 前端使用原生JavaScript的WebSocket对象连接服务器，通过onopen、onmessage、onerror、onclose事件处理连接状态、接收消息、错误及关闭逻辑，并可向页面动态更新内容。3. 后端可用Node.js的ws库搭建服务，监听指定端口，处理客户端连接与消息，并支持广播机制将消息推送给所有活跃客户端。4. 实际应用中需注意连接状态管理以实现断线重连，引入心跳机制防止超时断开，生产环境使用wss加密并校验origin提升安全性，多实例部署时结合Redis等中间件实现跨节点消息同步。正确配置下，WebSocket相较轮询具有更低延迟和更高效率，关键在于稳定连接与异常处理。
要实现网页端的实时数据推送，WebSocket 是最常用的技术之一。它能在浏览器和服务器之间建立持久的双向通信通道，让数据可以即时传输，适用于聊天应用、实时通知、股票行情等场景。
1. 什么是 WebSocket？
WebSocket 是一种网络协议，通过 ws://（非加密）或 wss://（加密）连接，在单个 TCP 连接上提供全双工通信。与传统的 HTTP 请求不同，WebSocket 连接一旦建立，客户端和服务器都可以随时主动发送数据。
2. 前端使用 JavaScript 创建 WebSocket 连接
在浏览器中，可以通过原生的 WebSocket 对象轻松连接到服务器：
// 创建 WebSocket 实例
const socket = new WebSocket('ws://localhost:8080');
// 连接成功时触发
socket.onopen = function(event) {
console.log('WebSocket 连接已建立');
// 可以在这里发送初始消息
socket.send('用户已上线');
};
// 接收服务器推送的消息
socket.onmessage = function(event) {
console.log('收到消息:', event.data);
// 更新页面内容，例如显示通知
document.getElementById('output').innerHTML += '' + event.data + '
立即学习“Java免费学习笔记（深入）”；
';
};
// 发生错误时
socket.onerror = function(error) {
console.error('WebSocket 错误:', error);
};
// 连接关闭时
socket.onclose = function(event) {
console.log('连接已关闭', event.code, event.reason);
};3. 后端使用 Node.js 搭建 WebSocket 服务
可以使用 Node.js 的 ws 库快速搭建一个 WebSocket 服务器。
// 安装 ws 库
npm install ws
// 服务器代码（server.js）
const WebSocket = require('ws');
// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('有新客户端连接');
// 监听来自客户端的消息
ws.on('message', function(data) {
console.log('收到:', data);
// 广播给所有连接的客户端
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(`广播: ${data}`);
}
});
});
// 发送欢迎消息
ws.send('欢迎进入 WebSocket 服务！');
});4. 实现注意事项
为了让 WebSocket 在实际项目中稳定运行，需要注意以下几点：
- 连接状态管理：始终监听 onopen、onclose 和 onerror 事件，确保能处理断线重连。
- 心跳机制：长时间无数据交互可能导致连接中断，可定期发送 ping/pong 消息保持活跃。
- 安全性：生产环境应使用 wss（WebSocket Secure），并校验来源（origin）防止跨站攻击。
- 服务扩展：多实例部署时需结合 Redis 等中间件实现消息广播。
基本上就这些。只要前后端都正确配置，WebSocket 就能高效地实现实时数据推送，体验远优于轮询方式。关键是保持连接稳定，并合理处理异常情况。
