记录使用websocket时因为Sec-Websocket-Protocol遇到的一个问题

前言

最近在做的项目中用到了websocket，在谷歌浏览器中显示正常，别人在百度浏览器打开，没有数据显示，百度浏览器是ie内核，开始时先想到的是websocket的兼容性，结果证实websokcet是支持ie的。

百度浏览器的报错

WebSocket connection to 'wss://://pusher.rising.com/app/4a530ae5e37bb480c08b?protocol=7&client=js&version=2.2.
0&flash=false' fai failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header 
but no response was received
复制代码

直译过来是因为websocket握手时，发了一个不为空的头，Sec-WebSocket-Protocol，但是没有接受这个头的响应。 所以将问题焦点聚集在了Sec-WebSocket-Protocol。

百度和谷歌浏览器请求投的差异

同一个请求谷歌浏览器的请求头是没有Sec-WebSocket-Protocol这个字段的，而百度浏览器是传了一个undefined。原因大致明了，因为Sec-WebSocket-Protocol传值造成的。

声明websocket的方法

var Socket = new WebSocket(url, [protocol] );
复制代码

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议，是可选的。当我们给proctocol传递一个为空的变量时，谷歌浏览器会自动过滤掉值为空的请求头，儿百度浏览器会将undefind传递过去。

解决方法

很简单，穿第二个参数的时候加一层判断，如果为空，就只传一个参数就可以了。

转载于:https://juejin.im/post/5be2b51d51882516df0306ba