vue3 vite.config.ts配置proxy代理websockets

在 Vue3 中，如果你想要通过 Vite 配置文件 `vite.config.ts` 来代理 WebSocket 连接，Vite 提供了一个 `serverMiddleware` 功能，允许你在服务器中间件中设置自定义的请求处理。对于 WebSocket 的代理，你可以创建一个处理 WebSocket 连接的函数，并将其添加到 `viteServer.ws` 数组中。

以下是一个简单的示例，展示如何在 `vite.config.ts` 中配置 WebSocket 代理：

import { createServer } from 'http'
import { createVueApp } from 'vue'
import App from './App.vue'

const app = createVueApp(App)

// 创建 WebSocket 代理函数
async function wsProxy(ws: WebSocket, req: any) {
  // 如果需要的话，可以在这里对请求做额外的处理
  // 比如检查是否已经登录、设置WebSocket路径等

  ws.url = '/your-backend-websocket-endpoint'; // 设置代理的目标URL
  await ws.handshake(req)
  
  ws.on('message', async (message) => {
    // 处理接收到的消息
    console.log(`Received message: ${message}`)
    
    try {
      const response = await yourBackendAPI(message);
      ws.send(response); // 发送回应给客户端
    } catch (error) {
      ws.terminate();
    }
  });

  ws.on('close', () => {
    console.log('WebSocket connection closed')
  });
}

// Vite server 配置
export default defineConfig({
  build: {},
  server: {
    middleware: [
      {
        path: /^\/ws/, // 匹配所有以/ws开头的URL
        handler: createServer((req, res) => {
          const ws = new WebSocket(req.url.replace(/^ws:/i, 'wss:' if process.env.NODE_ENV === 'production' else 'ws:')); // 使用ws或wss取决于生产环境
          wsProxy(ws, req);
          ws.pipe(res);
          ws.on('upgrade', (ws) => wsProxy(ws, req));
        }),
      },
    ],
  },
  plugins: [],
})

在这个例子中，`wsProxy` 函数会在客户端尝试连接WebSocket时被调用，它会将连接升级并转发到指定的后台WebSocket端点。记得替换 `/your-backend-websocket-endpoint` 为实际的WebSocket服务地址。