websocket 从ip端口升级https域名模式

妖狐艹你老母 2023-03-13 15:21 22阅读 0赞

做系统升级的时候前端有用到websocket做数据实时更新，之前用的websocket连接时ip加端口模式：

this.ws = new WebSocket("ws://192.168.10.63:15674/ws")

这种模式是没有问题的，但当项目的访问从http升级到https的时候，发现websocket连接不上了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNTE5MTI_size_16_color_FFFFFF_t_70][]前端报错了！！！让人头疼的错误~~

遇到问题还得解决问题，于是就硬着头皮整问题，于是发现websocket的连接有2种方式，

this.ws = new WebSocket("ws://192.168.10.63:15674/ws")
    
    this.ws = new WebSocket("wss://域名/ws")

ws和wss2种方式；

***WebSocket可以使用 ws 或 wss 来作为统一资源标志符，类似于 HTTP 或 HTTPS。其中 ，wss 表示在 TLS 之上的 WebSocket，相当于 HTTPS。默认情况下，WebSocket的 ws 协议基于Http的 80 端口；当运行在TLS之上时，wss 协议默认是基于Http的 443 端口。说白了，wss 就是 ws 基于 SSL 的安全传输，与 HTTPS 一样样的道理。所以，如果你的网站是 HTTPS 协议的，那你就不能使用 ws:// 了，浏览器会 block 掉连接，和 HTTPS 下不允许 HTTP 请求一样。***

那赶快多加了一个s然后换成域名，结果还是报错了，

![20200515150922252.png][]

upstream  backend  {
    	server  127.0.0.1:15674;
    }
    
    server {
        location /ws {
       		 proxy_pass http://backend;
       		 proxy_http_version 1.1;
        		 proxy_set_header Upgrade $http_upgrade;
       		 proxy_set_header Connection "upgrade";
    	}
    }

至此，websocket在https域名模式下的连接正常！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNTE5MTI_size_16_color_FFFFFF_t_70]: /images/20230312/8834167c05d74eb0aa0c652ba496434b.png
[20200515150922252.png]: /images/20230312/9e6221eb527246b98889756bb41d18a4.png