WebSocket是全双工持久化协议,需用ws://或wss://创建实例,通过readyState(0-3)判断连接状态,监听onopen/onmessage/onerror/onclose事件,send()发送数据,注意断线重连、心跳保活及前后端协议约定。

WebSocket 是浏览器与服务器之间建立全双工、持久化连接的协议,相比 HTTP 轮询更高效、实时性更强。实现 WebSocket 通信核心是创建 WebSocket 实例,监听事件,并通过 send() 发送数据。
创建连接并监听状态
使用 new WebSocket(url) 初始化连接,URL 必须以 ws://(非加密)或 wss://(加密,推荐用于生产环境)开头。连接过程有四个关键状态,可通过 readyState 判断:
- 0(CONNECTING):正在连接中,此时不能发送消息
- 1(OPEN):连接已建立,可收发数据
- 2(CLOSING):正在关闭连接
- 3(CLOSED):连接已关闭或连接失败
建议在 onopen 回调中确认连接就绪后再发送数据;用 onerror 捕获连接异常(如跨域、URL 错误、网络中断)。
收发消息的核心操作
消息通信基于事件驱动:
立即学习“Java免费学习笔记(深入)”;
原生js表单提交验证代码下载。原生JavaScript实现,适合新手学习js。用户填写完成后,点击提交按钮,判断填写的信息是否符合要求,如不符合将弹出相应的修改信息要求,引导用户正确填写表单。
-
onmessage:接收服务器推送的数据,event.data是原始消息(可能是字符串或Blob/ArrayBuffer,需根据服务端约定解析) -
send(data):向服务端发送数据,支持字符串、ArrayBuffer、Blob;传入对象需先JSON.stringify() -
close(code, reason):主动关闭连接,可选传入关闭码(如1000表示正常关闭)和原因字符串
例如:ws.send(JSON.stringify({ type: 'login', user: 'Alice' })) 是常见登录请求格式。
处理断线重连与心跳保活
WebSocket 连接可能因网络抖动、服务重启等意外断开,前端应主动管理连接生命周期:
- 监听
onclose事件,在状态变为CLOSED后延迟几秒自动重连(避免密集重试) - 服务端通常要求客户端定期发送心跳包(如每 30 秒
ws.send('ping')),否则主动断开闲置连接 - 建议封装一个
WebSocketClient类,内置重连计数、指数退避、心跳定时器等逻辑
注意事项与常见问题
实际开发中容易忽略这些细节:
- 确保服务端已部署 WebSocket 服务(如 Node.js 的
ws库、Nginx 需配置Upgrade和Connection头) - 浏览器控制台可查看
Network → WS标签页,检查连接状态和收发帧内容 - 不要在
onmessage中执行耗时同步操作,避免阻塞后续消息;必要时用setTimeout或requestIdleCallback延迟处理 - 关闭页面前调用
ws.close(),避免资源泄漏(也可在beforeunload中处理)
基本上就这些。WebSocket 本身 API 很简洁,难点在于连接稳定性保障和前后端协议约定。









