使用react-use-websocket建立WebSocket连接报错该如何解决？

1. path配置是否需要修改 #

你后端配置的path: '/ws'不需要修改为/wss，wss是WebSocket的加密协议前缀，和接口路径是完全独立的两个概念，路径配置只需要保证前后端匹配即可。

2. 常见问题排查点 #

• 钩子使用不匹配
  react-use-websocket提供的useSocketIO是专门适配Socket.IO协议的钩子，如果你的NestJS后端没有启用Socket.IO适配，用的是原生WebSocket协议，请将前端导入的钩子替换为默认的useWebSocket。如果确认使用Socket.IO，请保证前后端Socket.IO的大版本完全一致，版本不兼容也会导致连接失败。
• 端口不匹配
  你后端NestJS的WebSocket网关监听的是3002端口，但是前端请求的地址ws://apiws.dev.managementsystem.com/ws没有携带端口，会默认请求80（HTTP）/443（HTTPS）端口，无法匹配到3002端口的服务。可将前端socketUrl修改为ws://apiws.dev.managementsystem.com:3002/ws，或者通过反向代理将WebSocket请求转发到3002端口。
• 协议不匹配
  如果你的前端站点是HTTPS协议，浏览器会主动拦截非加密的ws://请求，必须将协议前缀替换为wss://。
• 证书相关问题
  react-use-websocket基于浏览器原生WebSocket API封装，证书校验是浏览器层面的逻辑，库本身不支持自定义证书配置。如果是自签证书导致的报错，本地开发可将对应域名的自签证书加入系统/浏览器的信任列表，生产环境请使用CA机构签发的正规证书。
• 跨域配置缺失
  请确认NestJS后端的WebSocket网关已经配置了跨域允许，否则浏览器会因为跨域规则拦截连接请求。可以在@WebSocketGateway装饰器的配置中添加cors: { origin: '*' }（生产环境请替换为你的前端域名）测试。

内容的提问来源于stack exchange，提问作者Young Al Capone