Express에 WebSocket 추가

요즘 대부분의 사람들은 ws 패키지를 사용합니다.

단계는 간단합니다. 익스프레스 앱에 연결하고 ws 자체 서버를 생성하도록 허용하지 말고 경로를 선택하십시오. 단순한 HTTP 이상으로 협상하는 프로토콜인 "업그레이드"이벤트를 처리합니다.

import express from "express"
import cookieParser from "cookie-parser"
import * as WebSocket from 'ws';

const app = express()
app.use(express.json())
app.use(cookieParser())

// all your normal routes
app.post("/refresh-token", issueRefreshToken)
app.post("/delete-token", deleteRefreshToken)

// and now the magic
const websocketServer = new WebSocket.Server({
  noServer: true,
  path: "/echo"
})
server.on("upgrade", (request, socket, head) => {
  websocketServer.handleUpgrade(request, socket, head, (websocket) => {
    websocketServer.emit("connection", websocket, request)
  })
})

websocketServer.on('connection', (ws: WebSocket) => {

  //connection is up, let's add a simple simple event
  ws.on('message', (message: string) => {
    websocketServer.clients.forEach((client) => {
      client.send(`${message}`)
    })

    //log the received message and send it back to the client
    console.log('received: %s', message);
    ws.send(`Hello, you sent -> ${message}`);
  });

  ws.send('Hi there, I am a WebSocket server');
});

이렇게 하면 연결된 각 클라이언트에 수신한 내용을 브로드캐스트하는 에코 서버가 생성됩니다.

이를 테스트하기 위해 wscat이 잘 작동합니다.

yarn global add wscat

그런 다음 두 개의 별도 터미널에서 이 작업을 수행합니다.

wscat -c 'ws://localhost/echo'

하나를 입력하면 다른 하나에서 즉시 볼 수 있습니다.