websocket通过webpack\nginx转发代理

最新推荐文章于 2024-08-21 11:54:23 发布

Beam007

最新推荐文章于 2024-08-21 11:54:23 发布

阅读量1.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Beam007/article/details/109315336

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

代码如下

websock = new WebSocket('ws://' + location.host + '/wsProxy/')
注意此处必须使用location.host，获取localhost和端口号，因为部署到服务器你这端口号不能写死吧。

webpack配置：

'/wsProxy/': {
        target: 'http://后台服务IP:后台服务PORT', // 后台的websocket服务地址
        changeOrigin: false,
        ws: true,
        secure: false,
        pathRewrite: {
          '^/wsProxy/': ''
        }
      },

注意后台对应websocket服务地址，此处配置成http://

nginx配置：

location /wsProxy/ {
            proxy_pass http://wsServer/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
        }

upstream wsServer {
        server 后台服务IP:后台服务PORT;
    }
map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }