WebSocket实现全双工通信，解决HTTP轮询效率低的问题，适用于实时场景；通过JavaScript的WebSocket API和Node.js的ws库可快速搭建双向通信，需注意连接管理、心跳、重连、安全及消息格式，提升应用实时性与用户体验。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许浏览器与服务器之间实时交换数据。相比传统的 HTTP 请求-响应模式，WebSocket 能够实现真正的双向通信，特别适用于聊天应用、实时通知、在线协作等场景。
为什么选择 WebSocket？
HTTP 协议是无状态、短连接的，每次通信都需要客户端发起请求。当需要频繁获取服务器更新时（如股票行情、消息推送），轮询方式效率低、延迟高。WebSocket 在建立连接后，客户端和服务器可随时主动发送数据，大幅降低延迟和资源消耗。
WebSocket 基本用法
在浏览器中，JavaScript 提供了 WebSocket 构造函数，使用非常简单：
const socket = new WebSocket('ws://localhost:8080');
// 连接成功时触发
socket.onopen = function(event) {
console.log('连接已建立');
socket.send('你好，服务器！');
};
// 接收到服务器消息时触发
socket.onmessage = function(event) {
console.log('收到消息：', event.data);
};
// 发生错误时触发
socket.onerror = function(event) {
console.error('通信出错：', event);
};
// 连接关闭时触发
socket.onclose = function(event) {
console.log('连接已关闭');
};
Node.js 实现 WebSocket 服务端
可以使用 ws 库快速搭建 WebSocket 服务器。先安装依赖：
立即学习“Java免费学习笔记（深入）”；
西亚购物系统 2004
下载
一套自选网上商城精美模版，自主商品管理，自行网店经营的网上商城平台，系统具有强大的商品管理、购物车、订单统计、会员管理等功能，同时拥有灵活多变的商品管理、新闻管理等功能，功能强劲的后台管理界面，无需登录FTP，通过IE浏览器即可管理整个网站。西亚购物平台经多方面权威调查和研究为您精心开发了很多特色实用功能。使商品展示、管理、服务全面升级。西亚购物平台为您提供了多款专业美观的店面样式、俱备完整的购物
npm install ws
然后创建服务端代码：
const WebSocket = require('ws');
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.on('close', function() {
console.log('客户端断开连接');
});
});
运行该脚本后，浏览器即可通过 ws://localhost:8080 连接并通信。
实际开发中的注意事项
使用 WebSocket 时需关注以下几点：
- 连接状态管理：始终检查 readyState 属性，避免在连接未建立时调用 send()
- 心跳机制：长时间空闲可能导致连接被中间代理关闭，建议定期发送 ping/pong 消息维持连接
- 重连机制：网络中断后应尝试自动重连，避免用户体验中断
- 安全性：使用 wss://（WebSocket Secure）替代 ws://，防止数据被窃听
- 消息格式：推荐使用 JSON 格式传递结构化数据，便于前后端解析
基本上就这些。WebSocket 让前端与后端的实时交互变得直接高效，掌握其基本用法和常见模式，能显著提升应用的响应能力和用户体验。不复杂但容易忽略的是连接异常处理和状态同步逻辑，建议封装成可复用的模块。
