WebSocket是HTML5提供的在单个TCP连接上进行全双工通信的协议，在JavaScript中可以直接使用内置的WebSocket对象来实现相关通信逻辑，无需额外引入第三方库。
WebSocket核心使用步骤
1. 创建WebSocket连接
首先需要实例化WebSocket对象，传入服务器的WebSocket地址，地址通常以ws://（非加密）或wss://（加密）开头。
// 创建WebSocket连接，这里使用本地测试地址，实际开发替换为真实服务器地址
const socket = new WebSocket('ws://127.0.0.1:8080/ws');2. 监听连接状态事件
WebSocket对象提供了多个事件用于监听连接的不同状态，常用的有以下几个：
- open：连接成功建立时触发
- message：接收到服务器发送的消息时触发
- error：连接发生错误时触发
- close：连接关闭时触发
下面是事件监听的示例代码：
// 连接成功回调
socket.addEventListener('open', function(event) {
console.log('WebSocket连接已建立');
// 连接建立后可以主动发送消息给服务器
socket.send('客户端连接成功，准备接收数据');
});
// 接收服务器消息回调
socket.addEventListener('message', function(event) {
// event.data就是服务器返回的消息内容，可以是字符串、Blob或ArrayBuffer类型
console.log('收到服务器消息：', event.data);
});
// 连接错误回调
socket.addEventListener('error', function(event) {
console.error('WebSocket连接发生错误：', event);
});
// 连接关闭回调
socket.addEventListener('close', function(event) {
console.log('WebSocket连接已关闭，关闭码：', event.code, '关闭原因：', event.reason);
});3. 向服务器发送消息
连接建立后，可以调用send()方法向服务器发送数据，支持发送字符串、Blob、ArrayBuffer等类型的数据。
// 发送字符串消息
function sendTextMessage(msg) {
if (socket.readyState === WebSocket.OPEN) {
socket.send(msg);
} else {
console.warn('当前连接未打开，无法发送消息');
}
}
// 发送JSON格式数据，实际开发中常用这种方式传递结构化数据
function sendJsonMessage(data) {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify(data));
}
}
// 调用示例
sendTextMessage('这是一条测试消息');
sendJsonMessage({ type: 'chat', content: '你好，服务器', userId: '123' });4. 关闭WebSocket连接
不需要通信时，可以主动调用close()方法关闭连接，也可以传入关闭码和关闭原因。
// 主动关闭连接，1000表示正常关闭 socket.close(1000, '客户端主动关闭连接');
readyState状态说明
WebSocket对象的readyState属性表示当前连接的状态，不同取值的含义如下：
| 状态值 | 含义 |
|---|---|
| 0 | CONNECTING，连接还未建立 |
| 1 | OPEN，连接已经建立，可以正常通信 |
| 2 | CLOSING，连接正在关闭过程中 |
| 3 | CLOSED，连接已经关闭或者无法打开 |
注意事项
实际开发中需要注意几个问题：一是WebSocket连接可能会因为网络波动断开，需要添加重连机制；二是发送消息前最好先判断readyState是否为OPEN状态，避免发送失败；三是如果是加密的wss连接，需要服务器配置对应的SSL证书。如果是需要兼容老版本浏览器，可以考虑使用Socket.IO等库做降级处理，但现代浏览器已经普遍支持原生的WebSocket API。
WebSocketJavaScript实时通信事件监听修改时间：2026-06-05 01:58:05