WebSocket握手异常：React项目摄像头固件更新后连接失败求助

这个错误的核心原因是WebSocket握手的子协议匹配规则：客户端发起连接时会发送Sec-WebSocket-Protocol头，列出支持的子协议；服务端必须从这个列表里选一个返回，否则浏览器会判定握手失败。你遇到的新版本固件返回了text作为子协议，但你的代码只发送了tv-img-protocol，所以出现不匹配错误。

你不需要立刻联系厂商，直接修改代码就能解决问题，具体方案如下：

修改WebSocket连接代码 #

在创建WebSocket实例时，把服务端新支持的text子协议加入到请求的子协议列表中：

wsRef.current = new WebSocket(`ws://${ip}:${80}/websocket`, [
  "tv-img-protocol",
  "text" // 新增该子协议
]);

为什么此方案可行 #

• 客户端同时发送两个子协议后，服务端会根据自身固件版本选择对应子协议返回（旧固件选tv-img-protocol，新固件选text），两种情况都能通过浏览器的匹配校验。
• 你的代码已经设置了binaryType = "arraybuffer"，即使子协议标识为text，只要摄像头推送的还是二进制流，后续的消息处理逻辑完全可以正常工作，无需额外修改消息处理代码。

验证建议 #

修改后分别在新旧固件版本的摄像头上测试连接，确认两种情况都能正常建立WebSocket连接并接收直播流。

内容的提问来源于stack exchange，提问作者betty