Socket.io 문법 개념 정리

지난 1월에 동료랑 같이 했었던 socket.io를 3개월이 지나고 최근에 다시 하다보니 문법적인 개념이 헷갈렸다. 당시에 샘플을 내가 만들었고, 지금도 socket.io 쪽은 팀원들 중에 내가 제일 잘 알아야하는 입장인거 같은데, 며칠 전에 동료가 문법적인 부분을 물어봤을 때 아는건데도 설명을 제대로 못했다.😅 그래서 이번에 제대로 문법적인 부분을 숙지해보자는 생각으로, 공부한 내용들을 블로그에 정리해본다.✍

https://hjinn0813.tistory.com/162

WebSocket과 socket.io의 기본 개념

---

1. 소켓이 연결되었을 때, 문장의 '주어'가 누구인가

일단 가장 먼저, 소켓 서버쪽 코드에서 소켓을 연결한 이후에 '주어'가 누구인지부터 파악해야, 이후의 문장에서 문법적인 부분을 이해하기 쉬운 것 같다. 내가 어문학 계열 전공자여서 이런 코드 분석도 주어, 목적어를 구분하게 되는듯?😂

// 소켓 서버쪽 코드 (express)
io.on('connection', (socket) => {})

아무튼, 소켓 서버쪽 코드에서 소켓을 실제로 연결하는 시점에 이런 콜백함수가 있다.
여기에서 인자로 들어가는 socket은 서버에 연결된 클라이언트 한 명(객체)을 의미한다.
즉, 만약에 내가 소켓에 접속했다고 가정했을 때, 인자의 socket은 나를 의미하게 되는 것이다.
그래서 콜백함수 안에서 socket.id라고 콘솔을 찍었을때 나오는 랜덤한 값이 "내 소켓 아이디"이다.
참고로, 소켓 아이디는 소켓에 연결될 때마다 쓰는 일회용 아이디라서 별도로 저장이 불가능하다.

---

2. 기본적으로 사용하는 문장 구조

socket.on('action', callback);
socket.emit('action', data);
io.emit('action', data);

이렇게 3가지가 기본적으로 사용하는 문장 구조이다.

• socket.on() : 서버가 보낸 액션을 내가 받는다.
• socket.emit() : 내가 보낸 액션을 서버가 받는다.
• io.emit() : 서버가 소켓에 연결된 모든 사람들에게 액션을 보낸다.

---

그런데 여기서 응용문이 등장하면서 헷갈릴 수 있다.
우리가 뭔가를 보낼 때에는 목적지를 분명하게 작성해야 하기 때문에, 아래 응용문은 무조건 emit()에서만 쓰인다.
on()은 누가 어떻게 액션을 보냈는지에 관계없이 받기만 하면 되니까 응용문이 없다.

socket.broadcast.emit('action', data);

// socket.join('room');
socket.to(room).emit('action', data);
io.to(room).emit('action', data);

io.to(socket.id).emit('action', data);

• broadcast : 특정 대상을 제외하고 보내고 싶을 때 사용하는데, socket 객체에만 사용할 수 있다.
  이유는 앞서 설명했듯 io는 소켓에 연결된 모든 사람(혹은 서버), socket은 나를 의미하기 때문에,
  "나를 제외한다" 는 말은 가능해도 "모든 사람들을 제외하고" 는 문법적으로 불가능하기 때문이다.
• to(toom) : 이 문장을 쓰기 전에, socket.join(room)으로 "내가 특정 룸에 들어간다" 는 조건을 걸어야 에러가 나지 않는다.
  • socket.to(room) : 내가 나랑 같은 방에 있는 사람들에게 액션을 보낸다.
    이 때는 주어로 socket이 쓰였기 때문에, 나는 이 액션을 받는게 불가능하다.
  • io.to(room) : 서버가 같은 방에 있는 사람들에게 액션을 보낸다. 이 때는 나도 이 액션을 받을 수 있다.
  • io.to(socket.id) : 서버가 나를 제외한 사람들에게 액션을 보낸다.
    이렇게 작성한다면 괄호에는 반드시 socket.id라고 명확하게 작성해야 한다.
    socket은 객체여서, io.to(socket)은 문법적으로 맞지 않는다.

io는 문맥에 따라 "서버"라고 해석될 수도, "소켓에 연결된 모든 사람"으로 해석될 수도 있다.
예를 들어,
- io.on() → 전체 소켓 연결을 대표하므로, "소켓에 연결된 모든 사람"으로 해석해도 된다.
- io.to(room).emit() → io가 emit()을 실행하는 주어이므로, "서버"라고 해석하게 된다.

/* 소켓 객체 콘솔 예시 */

{
  id: 'abc123xyz456',              // 이 소켓의 고유 ID
  rooms: Set { 'abc123xyz456' },   // 이 소켓이 현재 들어가 있는 방 목록
  handshake: {                     // 연결 요청할 때 보낸 정보들
    headers: { ... },
    query: { ... },
    auth: { ... }
  },
  request: { ... },                // HTTP 요청 관련 정보 (쿠키, 헤더 등)
  emit: [Function],                // 서버 → 클라이언트로 이벤트 보낼 때 사용
  on: [Function],                  // 클라이언트 → 서버로 이벤트 받을 때 사용
  join: [Function],                // 방 참여
  leave: [Function],               // 방 나가기
  broadcast: {                     // 나를 제외한 다른 사람들에게 보내기
    emit: [Function]
  },
  // 기타 여러 내부 속성들...
}

---

이렇게 하여 socket.io에 대한 기본적인 문법 정리 끝!

정리해보니까 생각보다 어렵지 않은데, 쓸 때는 왜 그렇게 헷갈리는지 모르겠다..😂