Vue3+Vite中关于websocket的配置和使用

某滴水2023-11-30 11:52

问题起源

项目中原websocket地址如下：

js 复制代码

const currentUrl = window.location.host
const wsurl = `ws://${currentUrl}/api/alarm/page

其中是通过window.location.host来实现部署到不同的服务器上时的ip和port，比如：ws://10.11.15.38:8030/api/alarm/page。

项目中原vite.config.js文件的配置如下：

js 复制代码

proxy: {
    '/api': {
      target: 'http://10.11.15.38:8030',
      changeOrigin: true,
      ws: true,
    },
 },

此时一旦连接websocket，就有可能报错4077或者4079，报错信息贴在下方：

但是！部署到生产环境后，生产环境是可以正常工作的，能与websocket建立长连接并返回对应的数据信息。问了gpt，它说：

那么ok，已知了这个只对本地开发服务器有影响，那大概率就是配置问题了。因此，考虑更改配置：

解决方案

先修改websocket路径，在路径/api后添加/websockets:

js 复制代码

const currentUrl = window.location.host
const wsurl = `ws://${currentUrl}/api/websockets/alarm/page

再修改vite配置，添加/api/websockets的匹配项：

js 复制代码

proxy: {
    '/api/websockets': {
      target: 'ws://10.11.15.38:8030',
      ws: true,
      rewrite: (p) => p.replace(/^\/api\/websockets/, '/api'),
    },
    '/api': {
      target: 'http://10.11.15.38:8030',
      changeOrigin: true,
      ws: true,
    },
 },

此处需要注意：

1、ws的target最好设置成跟下方/api的target一样，否则可能会连接不上ws服务器，也容易因为数据不一致导致歧义；

2、ws本来的地址是不包含/websockets的，所以匹配上之后要rewrite一下，将路径中的/websockets去掉；

3、/api/websockets要写在/api的前面，否则会被/api拦截，直接匹配到/api中去了，导致匹配不到;

4、最后，需要后端处理一下，将/api/websockets对应的地址指向原来/api对应的ws服务器上（此处具体我也不晓得，后端童鞋应该比较懂）。

以上，记录一下。