網站升級HTTPS后WebSocket不能連接的問題

一、前端代碼

var socket = new WebSocket("wss://www.smcic.cn/wss/");

注意點：

1. 如果網站使用HTTPS，WebSocket必須要使用wss協議；
2. 使用wss協議的連接請求必須只能寫域名，而非IP+端口；
3. 建議在URL域名后面為websocket定義一個路徑，本例中是/wss/；

二、Nginx配置

前提是要配置好HTTPS

只需要在HTTPS配置的server內加一個location即可

# websockets
location /wss/ {
    proxy_pass http://xxx.xx.xx.xx:8006;            
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
}

注意：

　　1、location /wss/ {...}這里要格外注意！

　　　　html中的url是 wss://www.xxx.cn/wss/，所以Nginx配置中一定要是 /wss/

　　　　如果前端是 wss://www.xxx.cn/wss，Nginx對應是 /wss

　　2、proxy_pass對應的最好是公網IP加端口號，我試過 'localhost'，'127.0.0.1'，域名都會失敗

　　3、proxy_http_version 1.1 版本號必須是1.1，這條配置必需

說明：

　　Nginx反向代理，無論是HTTP/S或是WebSocket都會走443端口，由Nginx分發給各個項目服務器。在我的項目中WebSocket服務器是獨立於Django的，監聽端口為8006。