http/https與websocket的ws/wss的關系

...2964.worker.js:1 Mixed Content: The page at ... 2964.worker.js' was loaded over HTTPS, 
but attempted to connect to the insecure WebSocket endpoint 'ws://xxx/api/socket'. 
This request has been blocked; this endpoint must be available over WSS.

11d6885739735528ad71.worker.js:1 WebSocket is already in CLOSING or CLOSED state

 

今天在域名升級到HTTPS的時候遇到websocket的鏈接問題，通過上面錯誤可以看出，是應為https是安全鏈接，websocket的url對應的也應該是安全連接。

 

之前在http下使用的是new WebSocket('ws://xxx');但是在切換到HTTPS后這個鏈接部分瀏覽器報錯甚至代碼整體拋出異常走不下去了，之前沒有注意過websocket在兩個不同協議下有什么不同，實際上按照標准來是有如下對應關系的

http -> new WebSocket('ws://xxx')

https -> new WebSocket('wss://xxx')

 也就是在https下應該使用wss協議做安全鏈接，且wss下不支持ip地址的寫法，寫成域名形式

經過測試，部分報錯的瀏覽器的確是因為這個原因導致的代碼異常，即在https下把ws換成wss請求即可，看到這里心細的也許會發現，是部分瀏覽器，實際上瀏覽器並沒有嚴格的限制http下一定使用ws，而不能使用wss，經過測試http協議下同樣可以使用wss協議鏈接，https下同樣也能使用ws鏈接，那么出問題的是哪一部分呢

1.Firefox環境下https不能使用ws連接

2.chrome內核版本號低於50的瀏覽器是不允許https下使用ws鏈接

3.Firefox環境下https下使用wss鏈接需要安裝證書

 實際上主要是問題出在Firefox以及低版本的Chrome內核瀏覽器上，於是在http與https兩種協議都支持的情況下可以做兼容處理，即在http協議下使用ws，在https協議下使用wss

let protocol = location.protocol === 'https:' 
    ? 'wss://localhost:8888' 
    : 'ws://localhost:8889';

new WebSocket(protocol);

 

這樣可以更加不同的協議環境采取不同的鏈接方法，當然如果只支持https那最好還是使用wss協議，避免Firefox以及部分低版本Chrome內核瀏覽器的異常，當然新版本的瀏覽器都是支持的

 

 

參考鏈接：https://blog.csdn.net/Garrettzxd/article/details/81674251