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了.

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

haohao_ding

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值