websocket通过new websocket()建立持久全双工连接,需用wss://协议、监听open/message/error/close事件,发送前检查readystate,配合心跳与重连提升健壮性。

WebSocket 在 JavaScript 中建立长连接实现双向实时通信,核心是用 new WebSocket() 创建实例,并正确处理连接生命周期和消息收发。它不是“保持连接”的技巧,而是协议本身设计为持久、全双工——只要 TCP 链路正常、服务端不主动断开、客户端不关闭,连接就一直存在。
创建连接:指定 ws 或 wss 协议地址
必须使用 ws://(开发调试)或 wss://(生产环境,类似 HTTPS),不能用 http://。浏览器会拒绝非安全上下文下的 ws 连接(如 HTTP 页面中)。
-
正确写法:
const ws = new WebSocket("wss://api.example.com/ws"); -
常见错误:写成
"http://..."或漏掉协议前缀,会直接抛出异常 - URL 可带查询参数,例如
wss://.../chat?token=abc123,用于服务端鉴权
监听关键事件:掌握连接状态与数据流
WebSocket 对象提供四个核心事件,必须显式监听,否则无法感知连接是否就绪或已中断。
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
-
open:握手成功后触发,此时
ws.readyState === WebSocket.OPEN,可安全调用send() -
message:收到服务器推送的数据时触发,
event.data是字符串或 ArrayBuffer(取决于发送类型) -
error:连接失败或过程中出错(如网络中断、跨域被拒),通常伴随
close事件 -
close:连接关闭时触发,
event.code和event.reason可辅助判断原因(如 1000 正常关闭,1006 异常断连)
发送与接收数据:注意 readyState 和数据格式
发送前务必检查 readyState,避免在 CONNECTING 或 CLOSED 状态下调用 send() 导致静默失败。
- 推荐写法:
if (ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify({ type: "login", user: "alice" })); } - 服务端返回的文本消息默认是字符串,二进制需设置
ws.binaryType = "arraybuffer"后解析 - 不要依赖
onmessage的执行顺序:多个消息可能合并或异步到达,业务逻辑需自行保证顺序(如加序列号)
连接健壮性:手动处理重连与心跳
浏览器不会自动重连,断连后需开发者主动重建;长时间空闲连接可能被中间件(如 Nginx、负载均衡)切断,需心跳保活。
- 简单重连策略:在
close或error后延迟几秒再 new WebSocket,避免雪崩重连(可用指数退避) - 心跳机制:客户端定时
ws.send("ping"),服务端响应"pong";若超时未收到回复,主动 close 并重连 - Nginx 配置要点:需透传
Upgrade和Connection: Upgrade头,否则握手失败
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










