问题场景：

在一次本地调试vue项目使用websocket与服务端通信时，出现了在pc端能正常通信，但换成手机端访问页面却出现无法连接websocket的情况。

原因分析：

1.检查是否是手机浏览器不支持websocket:
js加入代码：

if (typeof(WebSocket) === "undefined") {
	alert("您的浏览器不支持socket")
}

调试后发现并不是不支持。

2.怀疑是否是socket的url地址有误：

原先的url:

path: "ws://localhost:8081/lottery/socket?name="

将localhost换成外网ip：

path: "ws://127.xxx.xxx.xxx:8081/lottery/socket?name="

结果：手机端能正常访问了

结论：若没配置nginx，则客户端是直接通过socketUrl与服务端建立通信，pc端因为服务端和客户端都是在同一个pc跑起来的，所以用localhost能正常建立通信，当换另一台电脑或手机，那么肯定不行了。

解决方法：

1.如果我们使用上述原因分析里的方法用外网ip那肯定不行了，一个是不安全，另一个是环境改变的话又要更改代码（url），重新打包发布。

2.所以我们进行nginx统一配置websocket。

修改nginx安装目录下的conf/nginx.conf

#开启socket代理
map $http_upgrade $connection_upgrade { 
    default upgrade; 
    '' close; 
} 

 #nginx配置websocket
location ^~ /websocket {
   proxy_pass http://localhost:8081/lottery/socket?name=; #websocket地址
   proxy_http_version 1.1;
   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_read_timeout 120s;
   proxy_set_header Upgrade websocket;
   proxy_set_header Connection Upgrade;
}

这里只需把proxy_pass替换成你自己服务端的socket地址就行了。

修改vue中的socket地址配置：

path: `${location.protocol === 'https' ? 'wss' : 'ws'}://${location.host}/websocket`

到此结束

如果帮上你的忙的话，不妨点个赞吧，你的赞是我分享经验的最大动力，谢谢！