HTTPS 下使用WebSocket的一些实践

欢迎大家来到IT世界,在知识的湖畔探索吧!

问题描述：

HTTPS 下发起WS连接，连接失败，Chrom 浏览器报错。

 socket.js:19 Mixed Content: The page at 'https://app.XXX.com' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://172.16.10.80:9035/websocket/'. This request has been blocked; this endpoint must be available over WSS. 

欢迎大家来到IT世界,在知识的湖畔探索吧!

问题排查：

HTTPS 连接下浏览器不允许WS协议，只允许WSS协议

问题解决：

（1）确定后端接口提供ws 能力

WS 在线测试工具：http://wstool.jackxiang.com/

• ws://172.16.10.80:9035/websocket/

欢迎大家来到IT世界,在知识的湖畔探索吧!

确定接口能提供ws 的能力

（2）、nginx 配置websocket代理【客户端不直连websocket接口】

欢迎大家来到IT世界,在知识的湖畔探索吧!#全局配置 ............. map $http_upgrade $connection_upgrade { default upgrade; '' close; } ..................... server { listen 443 ssl; server_name app.XXX.com; ssl_certificate /home/application/nginx/cert/XXX.com/XXX.com.crt; ssl_certificate_key /home/application/nginx/cert/XXX.com/XXX.link.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; gzip_buffers 4 16k; location ^~/websocket { rewrite ^/websocket/(.*)$ /$1 break; proxy_pass http://172.16.10.80:9035; proxy_read_timeout 300s; proxy_send_timeout 300s; 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 $connection_upgrade; } ................... } 

• rewrite 地址重写
• proxt_http_version 1.1 表示反向代理发送的HTTP协议的版本是1.1，HTTP1.1支持长连接
• proxy_pass http://172.16.10.80:9035 表示反向代理的uri, 如果多个地址可使用负载均衡变量表示
• proxy_set_header Host $host; 表示传递时请求头不变， $host是nginx内置变量，表示的是当前的请求头，proxy_set_header表示设置请求头
• proxy_set_header X-Real-IP $remote_addr; 表示传递时来源的ip还是现在的客户端的ip
• proxy_read_timeout 300s； 表示两次请求之间的间隔超过 300s 后才关闭这个连接，默认的60s，自动关闭的元凶
• proxy_send_timeout 300s; 指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间，而是在两次write操作期间。如果超时后，upstream没有收到 新的数据，Nginx会关闭连接，默认的60s
• proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 表示X-Forwarded-For头不发生改变
• proxy_set_header Upgrade $http_upgrade; 表示设置Upgrade不变
• proxy_set_header Connection $connection_upgrade; 表示如果 $http_upgrade为upgrade，则请求为upgrade(websocket)，如果不是，就关闭连接

（3）、前端代码改造，区分ws 还是 WSS

• 因我们的站点支持HTTP 和 HTTPS 双协议栈网站访问，使用同一套前端代码，因此就需要前端同学 在代理中加入判断，当我访问的是HTTP 站点的时候，走WS 协议，同理 当我访问的是HTTPS 站点的时候，走WSS 协议
• 大致JS代码如下：

访问测试：

参考:

• http://t.csdn.cn/s2cFV