WebSocket是浏览器与服务器间持久化双向通信标准,需用ws://或wss://协议创建实例,监听onopen、onmessage、onerror、onclose事件,支持文本/JSON/二进制收发,并应实现指数退避重连策略。

WebSocket 是浏览器与服务器之间建立持久化双向通信通道的标准方式,相比轮询或长连接更高效、低延迟。要实现实时通信,核心是正确创建 WebSocket 实例并处理连接生命周期。
创建 WebSocket 连接
使用 new WebSocket(url) 即可发起连接,url 必须以 ws://(非加密)或 wss://(加密,推荐)开头,不能用 http:// 或 https://。
- 例如:
const ws = new WebSocket("wss://echo.websocket.org");(测试用公共回显服务) - 若后端运行在本地 Node.js 服务(如用
ws库),地址可能是"ws://localhost:8080" - 连接时可携带参数,如
"wss://api.example.com/chat?user=123",后端可通过upgradeReq.url解析查询字符串
监听关键事件
WebSocket 对象提供多个事件回调,用于响应连接状态变化和收发数据:
- onopen:连接成功建立后触发,此时可立即发送消息
-
onmessage:收到服务器推送的消息时触发,
event.data是文本或Blob/ArrayBuffer - onerror:连接失败或发生异常时触发(注意:它不表示连接关闭,也不替代 onclose)
-
onclose:连接被关闭时触发,
event.code和event.reason可帮助判断原因(如 1000 正常关闭,1006 异常断连)
发送与接收数据
WebSocket 默认以文本(UTF-8 字符串)通信,也可传输二进制数据:
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
立即学习“Java免费学习笔记(深入)”;
- 发送文本:
ws.send("hello server") - 发送 JSON:
ws.send(JSON.stringify({ type: "login", userId: 42 })) - 发送二进制(如 ArrayBuffer):
ws.send(new Uint8Array([1,2,3]).buffer) - 接收时判断类型:
if (typeof event.data === "string") { ... } else if (event.data instanceof Blob) { ... }
连接管理与重连策略
真实场景中网络不稳定,需主动管理连接状态:
- 连接关闭后不要直接复用原实例,应新建
new WebSocket(...) - 建议实现指数退避重连:首次 1 秒后重试,失败则 2 秒、4 秒、8 秒……上限设为 30 秒
- 用户切换页面或休眠时,可监听
visibilitychange或pagehide事件暂停重连,恢复后再尝试 - 避免频繁重连导致服务端压力,可在后端记录客户端心跳或使用连接令牌校验合法性









