記錄使用websocket時因為Sec-Websocket-Protocol遇到的一個問題

多芒小丸子發表於2018-11-08
WebProtocol

前言

最近在做的專案中用到了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傳遞過去。

解決方法

很簡單，穿第二個引數的時候加一層判斷，如果為空，就只傳一個引數就可以了。

相關文章