vue项目中接入websocket时需要ip端口动态部署问题
更新时间：2023年09月26日 10:32:31 作者：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端口并没有打开，
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vuex给state中的对象新添加属性遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
vue Router(v3.x) 路由传参的三种方式场景分析
vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转，传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式，感兴趣的朋友跟随小编一起看看吧2023-07-07
这篇文章主要介绍了vue中异步数据获取方式(确保数据被获取)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
Vue实现hash模式网址方式(就是那种带#的网址、井号url)
这篇文章主要介绍了Vue实现hash模式网址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本文主要介绍了Vuex模块化实现待办事项的状态管理的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
Vue项目保持element组件同行,设置组件不自动换行问题
这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
关于Vue的 watch、computed和methods的区别汇总
这篇文章主要介绍关于Vue的 watch、computed和methods的区别，下面文章将围绕Vue的 watch、computed和methods的续航管资料展开全文它们之间区别的内容,需要的朋友可以参考一下，希望能帮助到大家2021-11-11
这篇文章主要介绍了Vue.js $refs用法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue项目中有一些方法需要在多个页面调用,但为了避免在每个页面都import进来,可以把方法加到原型上去,这样在每个组件中都能使用了,下面这篇文章主要给大家介绍了关于配置vue全局方法的两种方式,需要的朋友可以参考下2021-09-09
这篇文章主要为大家介绍了vue的生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
最新评论