Nginx配置之WSS

Posted 2023-03-19

参考技术A

关于 WebSocket ，维基百科是这样介绍的：

WebSocket 协议在2008年诞生，2011年成为国际标准，现在几乎所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

简单来说， WebSocket 减少了客户端与服务器端建立连接的次数，减轻了服务器资源的开销，只需要完成一次 HTTP 握手。整个通讯过程是建立在一次连接/状态中，也就避免了 HTTP 的非状态性，服务端会一直与客户端保持连接，直到双方发起关闭请求，同时由原本的客户端主动询问，转换为服务器有信息的时候推送。所以，它能做实时通信（聊天室、直播间等），其他特点还包括：

现象描述： 在 https 协议下访问网站时，客户端浏览器控制面板异常信息：

这种情况，毫无疑问我们就需要使用 wss:// 安全协议了，需要将客户端浏览器获取的页面中 webscoket 的形式由 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 请求一样。

Nginx配置wss访问实现微信小程序的websocket通信

WSS是Web Socket Secure的简称, 它是WebSocket的加密版本。WSS与WS类似于HTTPS和HTTP，不同之处在于是不同的通信协议，都运行在SSL（Secure Socket Layer，安全套接层）之上。

WebSocket协议和HTTP协议虽然不同，但是WebSocket协议的握手和HTTP是兼容的，它使用HTTP的Upgrade协议头将连接从HTTP连接升级到WebSocket连接。这个特性使得WebSocket应用程序可以很容易地应用到现有的基础设施

1 核心代码块

location /wss   
 			
      proxy_http_version 1.1;  
      proxy_set_header Upgrade $http_upgrade;  
      proxy_set_header Connection "Upgrade";  
     

2 完整 nginx 配置

 # 后台接口服务
upstream zb_backendss 
    server localhost:8080       weight=10;


upstream zb_backendss_admin 
    server localhost:8083       weight=10;


server 

    listen       443 ssl;
    listen 80 ;
    server_name wuliu.test.com;
    ssl on;
    ssl_certificate  6447499_wuliu.test.com.pem;   
    ssl_certificate_key 6447499_wuliu.test.com.key;
    ssl_session_timeout  300m;   
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   
    ssl_prefer_server_ciphers   on; 

    location /Z9Mjp4uAGR.txt 
        alias   /opt/learncoal-webapps/web-admin-toupiao/le/Z9Mjp4uAGR.txt;

              

    location /demo/wx 
                proxy_pass http://zb_backendss;
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;
                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;

                 
    location /demo/imserver 
                proxy_pass http://zb_backendss;
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;
                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;

                proxy_http_version 1.1;  
                proxy_set_header Upgrade $http_upgrade;  
                proxy_set_header Connection "Upgrade";  
        
      location /demo/admin 
                proxy_pass http://zb_backendss_admin;
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;
                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
                
 
      location /admin-api/storage 
                rewrite ^/admin-api/storage/(.*)$ /$1 break;
                root /opt/ershoutushou/api/dts/storage;               
               

     location / 
                 root   /opt/learncoal-webapps/web-admin-wuliu/dist;
                  index index.html index.htm;
                

3 在微信小程序中直接使用访问

wss://wuliu.test.com/wss