react使用websocket通信

// 这里的转发标识为/ws
const wsPath = `ws://${window.location.host}/ws/system`
const socket = new WebSocket(wsPath)
socket.addEventListener("open", () => {
  // send可以传递字符串或者二进制
  socket.send(JSON.stringify({ page: 1, size: 10 }))
})
socket.addEventListener("message", this.handleMessage)
socket.addEventListener("close", () => {
  socket.removeEventListener("message", this.handleMessage)
  socket.close()
})

devServer: {
      proxy: {
        // 普通http请求
        '/api': {
            target: 'http://localhost:8099/',
            changeOrigin: true,
            secure: false
        },
      // websocket请求配置
        '/ws': {
          target: 'ws://localhost:8099/',// 可以写http或者ws开头
          ws: true, // 代理使用websokcet协议
          secure: false,
          changeOrigin: true
        }
}

// 这里是websocket相关的配置
location /api/ws {
            proxy_pass http://192.168.233.238:8090;
            proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
            proxy_set_header Host $host;
            proxy_http_version 1.1;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto https;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Origin "";
            proxy_redirect off;
        }

location ~ /ws/ {
  rewrite ^/ws/(.*) /api/v1/$1 break;
  proxy_pass http://ginapp-service:8686;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}