Nginx去配置socket的时候,发现nginx没有配置ws/wss协议,配置步骤如下

本文介绍了WebSocket协议的特性,包括其与HTTP协议的兼容性,以及WS和WSS(安全WebSocket)的区别。重点讨论了在Nginx服务器中配置WebSocket(WS)和安全WebSocket(WSS)的步骤,包括路径重写和SSL证书的使用,以实现前后端的正常通信。同时,通过实例展示了配置过程中遇到的问题及解决方案。
摘要由CSDN通过智能技术生成

配置之前需要知道ws协议和wss协议的区别

一、WS 和 WSS 的区别

WebSocket 协议是 html5 的一种通信协议,可以使客户端和服务端双向数据传输更加简单快捷,并且在 TCP 连接进行一次握手后,就可以持久性连接,同时允许服务端对客户端推送数据。

WS 协议和 WSS 协议均是 WebSocket 协议的 SCHEM。也是统⼀的资源标志符。WS是非安全的,没有证书;WSS是安全的,需要SSL证书。

WS 一般默认是 80 端口,而 WSS 默认是 443 端口,大多数网站用的就是 80 和 433 端口。

http 协议下使用 WS,在 https 协议下使用 WSS。

WebSocket协议的特点:

建立在 TCP 协议之上,服务端实现容易;

与 HTTP 协议有良好的兼容性,握手时不容易被屏蔽,可以通过各种 HTTP 代理服务器;

数据轻量,实时通讯;

可以发送文本和二进制数据;

不限制同源,客户端可以与任意服务器端进行通讯。

二、Nginx 下配置 WS

WS 配置

server {
     listen 8001;

     location / {
			 proxy_pass http://192.168.188.126:9007;
			 proxy_http_version 1.1;
			 proxy_set_header Upgrade $http_upgrade;
			 proxy_set_header Connection "Upgrade";
		 }
}

在这里插入图片描述

但是在测试的话会有单独的路径,刚开始我的配置是这个样子:

location /ws/ {
			proxy_pass http://127.0.0.1:9007;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "Upgrade";
		 }

访问socket的时候的路径为:
在这里插入图片描述

前端连接的时候:
在这里插入图片描述
但是一直报错:
在这里插入图片描述

我在想,访问/ws的时候将请求代理到127.0.0.1:9007
,那 /ws/webSocket就应该转发到127.0.0.1:9007/ws/webSocket

突然发现,多了个前缀有木有,我在服务器路径为:/webSocket

修改:在这里插入图片描述

在这里插入图片描述

第二天在帖子上看到一句话:

rewrite ^/api/(.*)$ /$1 break;

这句话的含义就是:

rewrite “^/api/(.)$” /$1 break,路径重写:
“^/api/(.
)$”:匹配路径的正则表达式,用了分组语法,把/api/以后的所有部分当做1组
/$1:重写的目标路径,这里用$1引用前面正则表达式匹配到的分组(组编号从1开始),即/api/后面的所有。这样新的路径就是除去/api/以外的所有,就达到了去除/api前缀的目的
break:指令,常用的有2个,分别是:last、break
last:重写路径结束后,将得到的路径重新进行一次路径匹配
break:重写路径结束后,不再重新匹配路径。

= : 用于不含正则表达式的 uri 前,要求请求字符串与 uri 严格匹配,如果匹配成功,就停止继续向下搜索并立即处理该请求。
~ : 用于表示 uri 包含正则表达式,并且区分大小写。
~* : 用于表示 uri 包含正则表达式,并且不区分大小写。
^~ : 用于不含正则表达式的 uri 前,要求 Nginx 服务器找到标识 uri 和请求字符串匹配度最高的 location 后,立即使用此 location 处理请求,而不再使用 location 块中的正则 uri 和请求字符串做匹配。

配置这句话就可以去掉路径:

location /ws/ {
     rewrite ^/ws/(.*)$ /$1 break;
     proxy_pass http://1.116.37.17:9007;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection "Upgrade";
  }

服务区只使用/webSocket就可以了

三、Nginx 下配置 WSS

WSS 配置

server {
     listen 443 ssl;
     server_name im-wss-api.xxx.xxx;
     ssl_certificate ../cert/server.crt;
     ssl_certificate_key ../cert/server.key;
     ssl_session_timeout 5m;
     ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
     ssl_prefer_server_ciphers on;

     location / {
         proxy_pass http://localhost:8088;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "Upgrade";
     }
}

我使用的是ws协议,配置完成之后:
在这里插入图片描述
连接成功!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

杵意

谢谢金主打赏呀!!

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

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

打赏作者

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

抵扣说明:

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

余额充值