https协议下配置websocket问题（踩坑）
目录
场景：
本地环境
本地环境前端：
本地环境后端
现场环境：
nginx配置
问题一：
原因：https协议下不能使用ws去访问
问题二：改用wss建立连接后提示连接失败
正确的配置
理论知识
场景：
在本地开发环境中一直使用的是windows+http+websocket，本地测试都是正常的，但是部署到线上时使用的是https,导致websocket一直连接失败
本地环境
本地环境前端：
ws://ip.端口/GisqPlatformExplorer/ws/login.do
其中loginWebSocketUrl=ws://192.168.xx.xx:8082
本地环境后端
原理就是：当我websocket访问路径含有/ws/login.do时，会对该访问进行loginwebsocketHandler处理。我这里功能主要是访问该路径时，记录用户登录登出日志的功能(前面博客有写过)。
现场线上环境：
linux+https+nginx+websocket
nginx配置
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
client_max_body_size 1024M;
#gzip on;
server {
listen 11921 ssl;
server_name localhost;
ssl_certificate .\ssl\8872433_xxx.cn.pem;
ssl_certificate_key .\ssl\8872433_xxx.cn.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location /GisqPlatformExplorer/ws/login.do {
proxy_pass http://xx.xx.xx.xx:8081;
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;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# HTTPS server
server {
listen 443 ssl;
server_name localhost;
ssl_certificate ssl/cert.crt;
ssl_certificate_key ssl/cert.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
root html;
index index.html index.htm;
}
location /GisqPlatformExplorer/ {
proxy_pass http://localhost:8081;
}
}
}
问题一：
Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
原因：https协议下不能使用ws去访问
解决方案：改成wss://xx.xx.xx.xx:11921/GisqPlatformExplorer/ws/login.do与websocket建立连接
问题二：改用wss建立连接后提示连接失败
WebSocket connection to 'wss://xx.xx.xx.xxx:11921/GisqPlatformExplorer/ws/login.do' failed
有两个地方要注意：
一个是域名问题：使用wss时必须要使用域名去访问。
一个是nginx配置问题： ‘
错误的配置：
原因主要是加“/”与不加“/”的区别没有搞清楚：nginx中斜杠(/)详解，配置location、proxy_pass时，加“/”与不加“/”的区别
参考：nginx中斜杠(/)详解_nginx_脚本之家
Nginx中proxy_pass的斜杠(/)问题 - 达摩院的BLOG - 博客园
location /GisqPlatformExplorer/ws/login.do {
proxy_pass http://xx.xx.xx.xx:8081/;
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;
}
实际访问代理地址：http://xx.xx.xx.xx7:8081/正确的配置
location /GisqPlatformExplorer/ws/login.do {
proxy_pass http://127.0.0.1:8081/GisqPlatformExplorer/ws/login.do;
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;
}
实际访问代理地址：http://127.0.0.1:8899/GisqPlatformExplorer/ws/login.do
location /GisqPlatformExplorer/ws/login.do {
proxy_pass http://127.0.0.1:8081;
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;
}
实际访问代理地址：http://127.0.0.1:8081/GisqPlatformExplorer/ws/login.do再次测试访问wss://xx.xx.xx.xxx:11921/GisqPlatformExplorer/ws/login.do路径时建立连接成功。
理论知识
（不了解必定会踩坑）
1.http情况下用ws,https情况下必须要使用wss
https相当于使用http+ssl认证，使用https时websocket访问（比如建立链接时）必须要使用wss
2. 使用域名
https下一般都是域名去访问的，存在有域名解析的过程，因此wss时也要使用域名
3.使用域名+指定端口
这个之前没有了解过，只是认为域名就包含了端口，其实也是可以指定端口的下面是现场环境访问的路径
nginx斜杠问题：
参考如下写的不错，很容易理解
Nginx中proxy_pass的斜杠(/)问题 - 达摩院的BLOG - 博客园
location /api1/ {
proxy_pass http://localhost:8080;
}
在访问http://localhost/api1/xxx时，会代理到http://localhost:8080/api1/xxx
location /api2/ {
proxy_pass http://localhost:8080/;
}
当访问http://localhost/api2/xxx时，http://localhost/api2/（注意最后的/）被替换成了http://localhost:8080/，然后再加上剩下的xxx，于是变成了http://localhost:8080/xxx。
主要看proxy_pass http://localhost:8080，这种方式称为不带URI方式；
proxy_pass http://localhost:8080/xx或http://localhost:8080/，这种方式称为带URI方式；
其中不带URI方式主要是匹配（保留匹配路径及后面的所有），而带URI方式主要是替换（将匹配到的相同部分替换掉，然后保留完全匹配后面的所有）