SocketIO의 기본 이벤트

socketIO는 크게 emit, on 이벤트를 가지고 움직인다.
emit으로 메세지를 전송하고, on을 통해 메세지를 받는 것이 큰 틀이라고 보면 된다.

데이터 송수신

socket.emit을 통해 메세지 등 자유롭게 인자를 전달할 수 있다.
데이터 타입에 구애받지 않고 전달할 수 있다는 것이 엄청난 강점이다.

특정한 소켓 이름을 지정해 데이터를 전달하면 이름이 일치하는 소켓끼리 매개변수를 통해 데이터를 주고 받을 수 있다. 단, 마지막 매개변수는 반드시 함수가 되어야하는데, 이는 매개변수의 끝을 알린다.

back -> front

// server.js
io.on("connection", (socket) => {
  socket.emit("hello", "world");
});

// App.js
socket.on("hello", (args)=>{
  console.log(args) // "world"
})

front -> back

// server.js
io.on("connection", (socket) => {
  socket.on("hello", (arg) => {
    console.log(arg); // "world"
  });
});

// App.js
socket.emit("hello", "world");

유의사항

프론트, 백 모두 데이터를 전달하거나 전달받을 수 있으나, 프론트에서 emit 메서드의 인자로 함수를 넘겨서 백엔드에서 호출하더라도 해당 함수는 프론트 단에서 실행된다.

이게 무슨 말인지,
다음 코드를 보면서 살펴보자.

// server.js 
io.on("connection", (socket) => {
  socket.on("room", (value, callback) => {
    callback();
  });
});

// App.js (
socket.emit("room", "hi", ()=>{
  console.log("hi")
});

프론트에서 위와 같이 함수를 넘겼다고 가정해보자.

해당 콘솔로그는 백 터미널에서 출력되는 것이 아니라 브라우저 콘솔에서 출력되는 것을 확인할 수 있다.
백에서 실행될 경우 치명적인 보안 문제를 야기할 수 있기 때문에 그렇다.

참고 자료
🎥 https://nomadcoders.co/noom/lectures/3098
📄 https://socket.io/docs/v4/emitting-events/