WebSocket是HTML5提供的全双工通信协议，允许客户端和服务器之间建立持久连接，实现双向实时数据传输，解决了传统HTTP协议只能由客户端主动发起请求、无法主动推送数据的痛点，非常适合即时聊天、实时数据监控、在线协作等场景。
WebSocket核心特性
WebSocket协议和HTTP协议同属于应用层协议，建立连接时借助HTTP握手完成，握手成功后连接会升级为WebSocket协议，后续通信不再依赖HTTP。它的核心特性包括：
- 全双工通信：客户端和服务器可以同时向对方发送数据，无需等待请求响应
- 持久连接：连接建立后长期保持，避免频繁建立连接的开销
- 轻量协议头：数据传输时的协议头很小，相比HTTP轮询大幅减少带宽消耗
- 支持跨域：默认支持跨域通信，无需额外配置CORS
JS实现WebSocket通信的基本流程
1. 建立WebSocket连接
JS内置了WebSocket构造函数，直接传入服务器WebSocket地址即可创建连接实例。地址格式为ws://（非加密）或wss://（加密，类似HTTPS）。
// 创建WebSocket连接实例
const socket = new WebSocket('ws://127.0.0.1:8080/ws');
// 连接建立成功的回调
socket.onopen = function(event) {
console.log('WebSocket连接已建立');
// 连接建立后可以直接发送消息
socket.send('客户端连接成功，准备接收数据');
};
2. 监听消息接收
通过onmessage事件可以监听服务器推送过来的消息，接收到的消息数据在回调事件的data属性中。
// 监听服务器发送的消息
socket.onmessage = function(event) {
const receivedData = event.data;
console.log('接收到服务器消息：', receivedData);
// 这里可以根据业务需求处理接收到的数据，比如更新页面内容
};
3. 发送消息到服务器
调用send方法可以向服务器发送数据，支持发送字符串、Blob对象、ArrayBuffer等类型的数据，实际开发中常用JSON字符串传递结构化数据。
// 向服务器发送JSON格式的消息
function sendMessageToServer(msgContent) {
if (socket.readyState === WebSocket.OPEN) {
const messageObj = {
type: 'text',
content: msgContent,
timestamp: Date.now()
};
socket.send(JSON.stringify(messageObj));
} else {
console.log('WebSocket连接未就绪，无法发送消息');
}
}
// 调用发送方法
sendMessageToServer('这是一条测试消息');
4. 错误处理与连接关闭
WebSocket连接过程中可能出现错误，也可以通过close方法主动关闭连接，同时监听连接关闭事件做后续处理。
// 监听连接错误
socket.onerror = function(event) {
console.error('WebSocket连接发生错误：', event);
};
// 监听连接关闭
socket.onclose = function(event) {
console.log('WebSocket连接已关闭，关闭码：', event.code, '关闭原因：', event.reason);
// 可以在这里实现断线重连逻辑
};
// 主动关闭连接
function closeSocketConnection() {
socket.close(1000, '客户端主动关闭连接');
}
WebSocket连接状态说明
WebSocket实例的readyState属性表示当前连接的状态，不同取值对应不同的连接阶段：
| 状态值 | 状态名称 | 说明 |
|---|---|---|
| 0 | CONNECTING | 连接正在建立中，尚未完成握手 |
| 1 | OPEN | 连接已建立，可以正常收发数据 |
| 2 | CLOSING | 连接正在关闭过程中 |
| 3 | CLOSED | 连接已完全关闭，或连接建立失败 |
断线重连实现示例
实际开发中网络波动可能导致WebSocket连接断开，通常需要实现自动重连逻辑，避免通信中断。
let socket = null;
let reconnectTimer = null;
const RECONNECT_INTERVAL = 3000; // 重连间隔3秒
const MAX_RECONNECT_COUNT = 5; // 最大重连次数
let reconnectCount = 0;
// 初始化WebSocket连接
function initWebSocket() {
socket = new WebSocket('ws://127.0.0.1:8080/ws');
socket.onopen = function() {
console.log('WebSocket连接成功');
reconnectCount = 0; // 连接成功重置重连计数
clearTimeout(reconnectTimer);
};
socket.onclose = function() {
console.log('WebSocket连接断开');
// 未达到最大重连次数时尝试重连
if (reconnectCount < MAX_RECONNECT_COUNT) {
reconnectCount++;
console.log(`第${reconnectCount}次尝试重连...`);
reconnectTimer = setTimeout(initWebSocket, RECONNECT_INTERVAL);
} else {
console.log('已达到最大重连次数，停止重连');
}
};
socket.onerror = function() {
console.error('WebSocket发生错误');
};
socket.onmessage = function(event) {
console.log('接收到消息：', event.data);
};
}
// 页面加载时初始化连接
window.onload = initWebSocket;
注意事项
- 生产环境建议使用
wss://加密协议，避免数据在传输过程中被窃听或篡改 - 发送数据前务必检查
readyState是否为OPEN状态，避免发送失败 - 服务器需要对应支持WebSocket协议，否则无法建立连接
- 长时间无数据交互时，部分网络环境可能会断开连接，可实现心跳机制定期发送空消息保持连接
WebSocketJavaScript实时通信JS_WebSocket修改时间：2026-06-13 19:45:43