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端口并没有打开，

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue的指令和插值问题汇总
Vue 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，这篇文章主要介绍了vue的指令和插值总结,需要的朋友可以参考下
2022-10-10
VUE兄弟组件传值操作实例分析
这篇文章主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
2019-10-10
vue+Element-ui实现登录注册表单
这篇文章主要为大家详细介绍了vue+Element-ui实现登录注册表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
elementplus el-table(行列互换)转置的两种方法
本文主要介绍了elementplus el-table(行列互换)转置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-06-06
Vue router 路由守卫详解
这篇文章主要为大家介绍了Vue router 路由守卫，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
基于Vue3和element-plus实现登录功能(最终完整版)
这篇文章主要介绍了基于Vue3和element-plus实现一个完整的登录功能,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
Vite热更新失效的问题解决
本文主要介绍了Vite热更新失效的问题解决,原因是文件夹和文件名大小写不一致,下面就来解决一下次问题,感兴趣的可以了解一下
2024-08-08
vue中在vuex的actions中请求数据实例
今天小编就为大家分享一篇vue中在vuex的actions中请求数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
axios中post请求json和application/x-www-form-urlencoded详解
Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用,下面这篇文章主要给大家介绍了关于axios中post请求json和application/x-www-form-urlencoded的相关资料,需要的朋友可以参考下
2022-10-10
在Vue中使用HOC模式的实现
这篇文章主要介绍了在Vue中使用HOC模式的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08