HTTPS环境下使用WebSocket问题解决

本文讲述了如何在服务器上部署WebSocket应用,遇到wss连接问题后,通过理解wss协议与SSL的关系,利用Nginx作为代理,正确配置SSL以解决连接阻塞的问题。
摘要由CSDN通过智能技术生成

1、问题
使用WebSocket在本地是没有问题的,能够和前端进行正常交互,但是将项目部署到服务器上,发现和前端建立不了WebSocket的连接,打开浏览器控制台报错:This request has been blocked; this endpoint must be available over WSS.

2、理解
1、首先我们要明白 wss协议实际是websocket+SSL,就是在websocket协议上加入SSL层,类似https(http+SSL)。

2、利用nginx代理wss【通讯原理及流程】

(1)、客户端发起wss连接连到nginx

(2)、nginx将wss协议的数据转换成ws协议数据并转发到Workerman的websocket协议端口

(3)、Workerman收到数据后做业务逻辑处理

(4)、Workerman给客户端发送消息时,则是相反的过程,数据经过nginx/转换成wss协议然后发给客户端

3、关于 ws 和 wss
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 请求一样。

4、解决
前提,服务器已经配置好了Nginx。如果没有配置的可以去网上搜索,很多资料的。如果找不到资料的小伙伴可以看文章的最后,我会把我的nginx配置贴出来。

在前端将:ws:// 修改为:wss://即可,同时,后面不要跟IP地址加端口,要使用网站的域名,例如:

本地websocket链接:ws://192.168.0.46:8781/tf/webSocket/huozhu20220819

那么更新到服务器的时候,链接应该修改为:wss://网站域名/tf/webSocket/huozhu20220819

注意:这里直接使用域名是在Nginx做了代理,可以根据url自动匹配到对应的IP地址+端口

5、Nginx配置
server
{
listen 80;
listen 443 ssl;
server_name 域名;

ssl on;
ssl_certificate 证书.crt;
ssl_certificate_key 证书.key;
ssl_session_timeout 5m;
ssl_session_cache shared:SSL:50m;
ssl_protocols SSLv3 SSLv2 TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_prefer_server_ciphers on;

location /wss/  {   
 proxy_pass http://127.0.0.1:82/;        #通过配置端口指向部署websocker的项目
 proxy_http_version 1.1;    
 proxy_set_header Upgrade $http_upgrade;    
 proxy_set_header Connection "Upgrade";    
 proxy_set_header X-real-ip $remote_addr;
 proxy_set_header X-Forwarded-For $remote_addr;
 }

}

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值