WebSocket构造函数创建全双工连接,需合法ws/wss URL、可选子协议,初始化后readyState为0,须监听onopen事件(readyState=1)后方可send(),服务端须返回101状态及合规握手头。

WebSocket 构造函数用于创建一个到服务器的全双工通信连接,其初始化过程需严格遵循 HTML5 规范,确保协议升级成功、URL 有效且状态可控。
WebSocket 构造函数的基本语法与参数要求
构造函数签名如下:
new WebSocket(url, protocols)
其中:
立即学习“前端免费学习笔记(深入)”;
- url 必须是合法的 ws:// 或 wss:// 协议地址,不能是相对 URL,也不能包含片段标识符(#)或查询参数以外的非法字符;
- protocols 是可选字符串或字符串数组,表示子协议名称(如 "chat"、"json"),服务器将从中协商选择一个匹配项,不匹配则连接失败;
- 若 url 协议非 ws/wss、格式错误或跨域但服务端未响应正确的
Access-Control-Allow-Origin,会立即抛出SyntaxError或触发onerror事件。
连接初始化的状态流转与事件监听时机
实例创建后,readyState 初始值为 0(CONNECTING),此时不可调用 send()。必须通过事件监听确认连接就绪:
- 监听
onopen:当readyState变为1(OPEN)时触发,表示握手完成,可安全发送数据; - 避免在构造后立即
send():即使代码写在onopen外部,也因异步特性大概率失败; - 监听
onerror和onclose:分别捕获底层错误和连接关闭,注意onerror不提供具体错误信息,仅作兜底提示; -
onmessage应在onopen后注册,但规范允许提前绑定,消息会在连接建立后缓存并派发。
服务端握手的关键响应头
客户端发起 WebSocket 握手(HTTP Upgrade 请求)后,服务端必须返回符合 RFC 6455 的响应:
- 状态码必须为
101 Switching Protocols; - 必须包含
Upgrade: websocket和Connection: Upgrade; -
Sec-WebSocket-Accept值需由客户端Sec-WebSocket-Key经标准算法生成,校验失败将导致连接中止; - 若指定了
protocols,服务端应通过Sec-WebSocket-Protocol返回协商后的子协议名,否则浏览器视为协议不匹配。
常见初始化失败原因与验证建议
连接无法进入 OPEN 状态时,可按以下顺序排查:
- 检查浏览器控制台是否报
WebSocket connection to 'xxx' failed,通常对应网络层或服务端拒绝; - 确认服务端实际监听 ws/wss 协议,而非仅 HTTP;
- 使用 curl 或 Postman 模拟 Upgrade 请求,验证响应头完整性;
- 若部署在 Nginx/Apache 后,确保反向代理已正确透传 Upgrade 和 Connection 头;
- 避免在页面加载未完成时创建 WebSocket,防止因 DOM 尚未就绪影响错误处理逻辑。


















