Socket.io - 실습 (emit)

Client

function backendDone(msg) {
  console.log(`The backend says: `, msg);
}

function handleRoomSubmit(event) {
  event.preventDefault();
  const input = form.querySelector("input");
  socket.emit("enter_room", input.value, backendDone);
  input.value = "";
}

=> emit은 기존 WebSocket에 send와 유사하게 커넥션이 일어나고 나서 발생시키는 함수이다. 여러가지 인자를 보낼 수 있으며, 마지막 함수는 백엔드에서 실행시점을 정할 수 있는 함수이고 파라미터도 받아올 수 있다.

Server

const wsServer = SocketIO(httpServer);

wsServer.on("connection", (socket) => {
  socket.on("enter_room", (roomName, done) => {
    console.log(roomName);
    setTimeout(() => {
      done("hello from the backend");
    }, 15000);
  });
});

=> 커넥션이 발생하고 emit을 받은 후, 15초 뒤에 파라미터를 프론트엔드에 전달한다. done함수는 결국 프론트엔드에서 실행되기 때문에 보안 이슈도 없다.

부연설명

=> Server에서 emit한 것을 Client에서도 on을 통해 받을 수 있다.