WebSocket是HTML5规范中定义的一种全双工通信协议，它允许客户端和服务端在单个TCP连接上建立持久化的双向通信通道，突破传统HTTP协议只能由客户端主动发起请求的限制，实现服务端主动向客户端推送数据的能力，非常适合需要低延迟、高频交互的实时通信场景。
WebSocket的核心特点
- 全双工通信：客户端和服务端可以同时向对方发送数据，不需要等待对方响应
- 持久连接：连接建立后不会自动断开，除非主动关闭或出现异常
- 轻量协议：数据帧头部很小，相比HTTP请求减少了大量冗余的头部信息，传输效率更高
- 支持跨域：默认支持跨域通信，不需要额外的跨域配置
javascript中使用WebSocket实现实时通信的步骤
1. 建立WebSocket连接
javascript内置了WebSocket构造函数，直接传入服务端的WebSocket地址即可创建连接，地址协议为ws（非加密）或wss（加密，类似HTTPS）。
// 创建WebSocket连接，假设服务端地址为ws://127.0.0.1:8080/ws
const socket = new WebSocket('ws://127.0.0.1:8080/ws');
// 连接建立成功的回调
socket.onopen = function(event) {
console.log('WebSocket连接已建立');
// 连接建立后可以直接向服务端发送消息
socket.send('客户端已连接');
};
2. 监听服务端消息
通过onmessage事件可以监听服务端主动推送的消息，接收到的消息可以是文本、二进制数据等类型。
// 监听服务端发送的消息
socket.onmessage = function(event) {
const message = event.data;
console.log('收到服务端消息：', message);
// 这里可以处理消息并更新页面，比如更新聊天内容、实时数据展示等
};
3. 向服务端发送消息
连接建立后，调用send方法即可向服务端发送数据，支持发送字符串、Blob对象、ArrayBuffer等类型的数据。
// 向服务端发送文本消息
function sendMessage(content) {
if (socket.readyState === WebSocket.OPEN) {
socket.send(content);
} else {
console.log('连接未就绪，无法发送消息');
}
}
// 示例：发送聊天消息
sendMessage('这是一条实时聊天消息');
4. 处理连接关闭和异常
通过onclose事件可以监听连接关闭的情况，onerror事件可以捕获连接过程中的异常，方便做重连或者错误提示处理。
// 监听连接关闭
socket.onclose = function(event) {
console.log('WebSocket连接已关闭，关闭码：', event.code, '关闭原因：', event.reason);
// 可以在这里实现自动重连逻辑
};
// 监听连接异常
socket.onerror = function(error) {
console.log('WebSocket连接出现异常：', error);
};
5. 主动关闭连接
当不需要通信时，可以主动调用close方法关闭连接，可选传入关闭码和关闭原因。
// 主动关闭连接，1000是正常关闭的标准关闭码 socket.close(1000, '客户端主动关闭连接');
WebSocket和传统轮询方案的对比
| 对比项 | WebSocket | 短轮询 | 长轮询 |
|---|---|---|---|
| 通信模式 | 全双工持久连接 | 客户端定时发起HTTP请求 | 客户端发起请求，服务端有数据才返回 |
| 实时性 | 高，服务端可主动推送 | 低，依赖轮询间隔 | 中等，依赖服务端响应速度 |
| 资源消耗 | 低，连接持久且协议轻量 | 高，频繁发起HTTP请求 | 中等，请求次数比短轮询少 |
| 适用场景 | 即时聊天、实时数据推送、在线游戏 | 对实时性要求极低的场景 | 实时性要求中等、无法使用WebSocket的场景 |
注意事项
- WebSocket地址如果是生产环境建议使用
wss加密协议，避免数据被窃听 - 实际开发中建议封装WebSocket连接逻辑，加入自动重连、心跳检测等机制，保证连接稳定性
- 如果传输的是复杂数据，建议约定统一的格式比如JSON，方便双方解析处理
WebSocket协议的标准关闭码可以参考规范定义，比如1000表示正常关闭，1001表示端点离开等，合理的使用关闭码可以让连接管理更规范。
WebSocketjavascript实时通信全双工通信修改时间：2026-07-11 10:09:22