如何修复WebSocket无效帧头连接错误？PeerServer集成问题求助

嘿，这个问题我之前碰到过好几次，核心问题大概率是服务端PeerServer的路径配置和挂载路径不匹配导致的，咱们一步步来解决：

问题原因分析 #

你代码里配置了PeerServer的path: "/node"，但却用app.use("/peerjs", peerServer)把它挂载到了/peerjs路径下。这就导致客户端发起WebSocket连接时，请求的路径和服务端实际监听的路径不匹配，服务器无法正确解析WebSocket帧，从而抛出"Invalid frame header"错误。

解决方法 #

1. 统一服务端的路径配置 #

你需要让PeerServer的path参数和app.use的挂载路径保持一致，二选一修改即可：

方式一：修改PeerServer的path参数

const peerServer = ExpressPeerServer(server, { debug: true, path: "/peerjs" });
app.use("/peerjs", peerServer);

方式二：修改挂载路径为PeerServer的path值

const peerServer = ExpressPeerServer(server, { debug: true, path: "/node" });
app.use("/node", peerServer);

2. 同步客户端的Peer连接路径 #

确保客户端初始化Peer实例时，指定的path和服务端的路径完全一致，比如：

const peer = new Peer(undefined, {
  host: 'localhost',
  port: 1234,
  path: '/peerjs' // 这里要和服务端的路径保持统一
});

3. 清理缓存并重启服务 #

有时候旧的WebSocket连接缓存或者服务端进程残留会导致奇怪的问题，建议：

• 关闭当前Node服务进程，重新启动
• 清空浏览器缓存（或者用无痕模式打开页面）再测试

额外排查点（如果上述方法无效） #

• 检查你的server是不是正确创建的HTTP/HTTPS服务器，PeerServer需要依附于已启动的HTTP服务实例
• 查看是否有其他中间件（比如CORS、路由拦截器）干扰了WebSocket请求的处理
• 确认Peer和ExpressPeerServer的版本是否兼容，版本不匹配也可能导致协议帧解析错误

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