vue项目中接入websocket时需要ip端口动态部署问题
作者:haohao_ding
这篇文章主要介绍了vue项目中接入websocket时需要ip端口动态部署问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目中接入websocket时需要ip端口动态部署
最近项目上到测试环境的时发现websocket总是连接失败,本地启动都没有问题。
查了一下问题发现前端项目接入websocket时ip和端口写死了。这样当然是不行的。
接下来直接上解决方案吧。
websocket的连接url为:ws://ip:port/websocket/test 为例。
为了方便部署时不需要修改代码,项目中接入的时候肯定是不能写入具体ip和端口的,这个时候我们可以像处理接口一样让每个环境的ip:port与浏览器访问的ip:port一致,然后通过nginx动态代理到我们指定的ip端口上去。
1.前端代码修改
var generateEndpoint = function (socketURI) { if (socketURI.includes("ws")) { return socketURI; } else { return `${location.protocol === 'https' ? 'wss' : 'ws'}://${location.host}` + socketURI; } };
2.nginx 动态代理
# WebSocket 服务 location /websocket { proxy_pass http://真实websocket服务的ip:端口; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Port $server_port; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }
即可。这样每次部署时都根据nginx代理到正确url了。
Tomcat部署Websocket后连接失败
应用如果启动websocket server后,Tomcat和Apache都需要相应的配置支持
1.首先Apache需要配置代理服务
在Httpd.conf中加入下面一行
ProxyPass /mwd/webSocketByMwd ws://127.0.0.1:8080/mwd/webSocketByMwd
其中
1)mwd 为应用名称,因为不同应用都可以启动websocket server,因为需要指定路径
2)webSocketByMwd, 为启动的服务名称,这个名称是程序启动时候设置的服务接口名称
2.Tomcat中打开端口 server.xml
Tomcat的版本默认是支持websocket的,所以只需将对应的端口打开即可
<Connector port="8080" URIEncoding="UTF-8" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"/>
我这边遇到的问题是,开始配置的代理后,websocket连接还是失败,后来发现是因为8080端口并没有打开,
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。