websocket通过单个TCP连接实现全双工通信,相比http轮询更高效,适用于实时场景。在javaScript中使用new WebSocket()创建连接,监听onopen、onmessage、onerror和onclose事件处理通信状态。连接建立后可通过send()发送字符串或二进制数据,接收消息时通过Event.data获取内容,支持jsON解析。需检查readyState确保连接开启方可发送数据。主动调用close()关闭连接会触发onclose事件,网络异常时onerror触发但不自动重连,需手动实现重连机制。实际应用需前后端协同,确保协议一致与安全认证。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,能够实现客户端与服务器之间的实时数据交互。相比传统的 HTTP 轮询,WebSocket 更高效、延迟更低,非常适合聊天应用、实时通知、在线协作等场景。在 javascript 中,可以通过原生 API 实现 WebSocket 通信。
创建 WebSocket 连接
要使用 WebSocket,首先需要创建一个 WebSocket 实例,传入服务器的 WebSocket 地址(以 ws:// 或 wss:// 开头)。
const socket = new WebSocket(‘wss://echo.websocket.org’);
连接建立后,会触发几个关键事件:
- onopen:连接成功时触发
- onmessage:收到服务器消息时触发
- onerror:通信发生错误时触发
- onclose:连接关闭时触发
示例代码:
立即学习“Java免费学习笔记(深入)”;
socket.onopen = () => {
console.log(‘连接已建立’);
socket.send(‘Hello Server!’);
};
接收服务器消息
当服务器向客户端发送数据时,客户端通过 onmessage 事件接收。事件对象的 data 属性包含实际消息内容。
socket.onmessage = (event) => {
console.log(‘收到消息:’, event.data);
};
消息内容通常是字符串,也可以是 json 格式或二进制数据(如 Blob 或 ArrayBuffer)。如果传输的是 JSON 数据,建议使用 JSON.parse() 解析。
发送消息到服务器
使用 send() 方法可以向服务器发送数据。支持发送字符串、ArrayBuffer 或 Blob。
socket.send(‘这是一条文本消息’);
socket.send(JSON.stringify({ type: ‘chat’, msg: ‘你好’ }));
注意:必须在连接状态为 OPEN(即 onopen 触发后)才能调用 send(),否则会报错。可通过 readyState 检查连接状态:
if (socket.readyState === WebSocket.OPEN) {
socket.send(‘可以发送’);
}
关闭连接与异常处理
主动关闭连接可调用 close() 方法:
socket.close();
关闭后会触发 onclose 事件,可获取关闭码和原因:
socket.onclose = (event) => {
if (event.wasClean) {
console.log(`连接正常关闭,状态码=${event.code}`);
} else {
console.log(‘连接异常关闭’);
}
};
遇到网络中断或服务器问题时,onerror 被触发,但不会自动重连。实际项目中常需手动实现重连机制:
let retryTimes = 0;
const maxRetries = 5;
function connect() {
const socket = new WebSocket(‘wss://your-server’);
socket.onclose = () => {
if (retryTimes setTimeout(connect, 2000);
retryTimes++;
}
};
socket.onerror = () => socket.close();
}
基本上就这些。掌握连接、收发消息和错误处理,就能在前端实现完整的 WebSocket 通信。实际开发中还需配合后端服务(如 node.js、Socket.IO、spring WebSocket 等),确保协议一致和安全认证。不复杂但容易忽略细节,比如状态判断和重连策略。