JavaScript如何实现实时通信_WebSocket如何建立连接？

日期：2025-12-26 00:00 / 作者：狼影

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

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 字符串）通信，也可传输二进制数据：

发送文本：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) { ... }

真实场景中网络不稳定，需主动管理连接状态：