升级HTTPS后WebSocket不能连接

前端部分

注意部分

  1. 如果网站WEB使用HTTPS协议,那相应的WebSocket必须要使用wss协议
  2. 使用wss协议的请求, 链接必须只能写域名,而非IP+端口
  3. 建议在URL域名后面为websocket定义一个路径,例如: /wss/
var ws = new WebSocket("wss://www.xxx.com/wss/");
后端部分

在HTTPS配置的server内加一个location

# websockets
location /wss/ {
    proxy_pass http://IP:端口;           
    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;
}

Nginx作为反向代理,无论是HTTP/S或是WebSocket都会走443端口,再由Nginx分发给各个服务

注意部分

  1. 前端中的链接是 wss://www.xxx.com/wss/,所以Nginx配置中一定要是 location /wss/ , 如果前端是 wss://www.xxx.com/wss,则Nginx配置中对应是 location /wss
  2. proxy_pass最好是公网IP加端口号, ‘localhost’,‘127.0.0.1’,会失败
  3. proxy_http_version 1.1 版本号必须是1.1
  4. proxy_pass转发到相应的IP和端口, 这个端口号根据自身的WebSocket服务而定
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
引用\[1\]和\[2\]提供了两个关于使用JavaScript实现WebSocket连接的示例代码。根据这些示例代码,可以看出在建立WebSocket连接时,需要指定正确的URL地址。在引用\[1\]的示例中,URL为'ws://132.122.233.63:8800/example',而在引用\[2\]的示例中,URL为'ws://localhost:8080/byteslounge/websocket'。如果无法连接WebSocket,可能是由于以下几个原因: 1. URL地址不正确:请确保URL地址正确,并且与后端WebSocket服务器的地址和端口匹配。 2. 后端WebSocket服务器未启动:请确保后端WebSocket服务器已经启动,并且正在监听指定的地址和端口。 3. 网络连接问题:请确保您的网络连接正常,可以尝试使用其他网络环境或设备进行测试。 4. 浏览器不支持WebSocket:请确保您使用的浏览器支持WebSocket协议。可以查看浏览器的兼容性列表,以确定您使用的浏览器是否支持WebSocket。 如果您仍然无法解决问题,请检查以上可能的原因,并尝试根据具体情况进行排查和调试。 #### 引用[.reference_title] - *1* [websocket -js浏览器端连接](https://blog.csdn.net/itmacy/article/details/131109165)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [websocket 无法连接 onerror](https://blog.csdn.net/zhixianjava/article/details/78227175)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敲代码der

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值