vite-expressでws(WebSocket)を使う

背景

ExpressでWebWocketが使いたくてwsを使おうとした。
ついでにvueも使いたかったのでvite-expressを使おうとしたら、wsがエラーになってしまった

解決方法

ViteもHMRでWebSocketを使っており

viteのwsのコードの一部

if (server) {
  wss = new WebSocket.Server({ noServer: true })
  server.on('upgrade', (req, socket, head) => {
    if (req.headers['sec-websocket-protocol'] === HMR_HEADER) {
      wss.handleUpgrade(req, socket, head, (ws) => {
        wss.emit('connection', ws, req)
      })
    }
  })
}

それと干渉しているのが原因っぽいので条件を追加してあげればいい

変更前

httpServer.on('upgrade', (req, socket, head) => {
  wsServer.handleUpgrade(req, socket, head, (ws) => {
    wsServer.emit('connection', ws, req)
  })
})

変更後

httpServer.on('upgrade', (req, socket, head) => {
  const HMR_HEADER = 'vite-hmr'
  if (req.headers['sec-websocket-protocol'] !== HMR_HEADER)  {
    wsServer.handleUpgrade(req, socket, head, (ws) => {
      wsServer.emit('connection', ws, req)
    })
  }
})