h5页面webSocket(wss)连接失败的解决方法

[jvip_chen]

在一个h5页面中通过websocket连接服务器，如果该h5页面是通过https来访问，需要注意wss连接是不能以ip加端口的方式来连接的。

比如页面https://domain.com/index.html中有如下js代码

代码 [选择] Expand

var wsServer = 'wss://8.8.8.8:8888';
var websocket = new WebSocket(wsServer);这样是连接不上websocket服务器的，因为wss不支持ip加端口的方式。

解决的办法是利用nginx的方向代理功能，将代码改成：

代码 [选择] Expand

var wsServer ='wss://domain.com/wss';
var websocket = new WebSocket(wsServer);同时nginx配置文件中，加入如下配置：

代码 [选择] Expand

# server外面最上面加
upstream webSocket {
  server 8.8.8.8:8888;#需要代理到的socket服务器端口
}
# server里面加入
# 访问：wss://xxxx.com/wss
location /wss {
  proxy_pass https://webSocket/;#代理到上面的地址去
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "Upgrade";
}这样就可以连接成功了。

注意将文中的域名、ip和端口替换成你自己的。