🚀 Socket.io 최(강)적화

Web socket에 관한 간단한 개념 정리부터

TCP 기반의 양방향 송수신의 프로토콜 이다.
OSI Layer에서는 HTTP와 같은 7계층에 위치를 하고 있고 연결이 유지된다는 점에서 큰 장점이 있는 프로토콜이다.

특징으로는

• 양방향 송수신 가능 (full duplex)
• 실시간 네트워킹 가능 (Real-time networking)
• 낮은 지연시간 (low latency)

Socket.io를 이용한 채팅방 구현

Socket.IO의 room 기능을 활용하여 각 스트리밍 방을 독립적으로 관리함으로써, 방 참여자들 간의 실시간 데이터 공유가 해당 방 내에서만 이루어지도록 구현했습니다.

기본 인터페이스

@WebSocketGateway({
  namespace: 'rooms', // namespace 등록 => ws://localhost:3000/rooms 로 접근
  cors: {
    origin: '*',
    methods: ['GET', 'POST'],
  },
})
export class RoomGateway{
 @WebSocketServer()
  server: Server; // server 등록
 constructor() {} // 외부 repository, service 등 의존성 주입

 @SubscribeMessage('test_message') // 'test_message' 라는 event name으로 식별
 async handleTest(
	@ConnectedSocket() client: Socket, // client : 현재 사용자 자신의 socket
	@MessageBody() data : { testId : string; }, // messageBody에 담아서 클라이언트에서 emit
 ) {
  // 로직
 }

}

• 기본적으로 NestJS의 @WebSocketGateway를 implement하여 사용
• RoomGateway 클래스를 만들어서 클라이언트에서 전송하는 WS message에 관한 각각의 핸들러 함수를 등록 해주는 방식

Ver 0.1

Sequence Diagram

sequenceDiagram
    participant Client
    participant Server
    participant Repository

    rect rgb(200, 200, 200)
    Note over Client,Repository: 기존 방식
    Client->>Server: Socket 연결 (handshaking)
    Server->>Client: Socket 연결 응답 (handshaking)
    Client->>Server: joinRoom 이벤트 발생
    Server->>Repository: 방 정보 조회
    Repository-->>Server: 방 정보 반환
    Server-->>Client: 방 참여 결과 응답
    end

Loading

기존 인터페이스

서버와 클라이언트는 초기에 우선적으로 handshaking 과정을 진행을 하게 됩니다.
이후로 요청에 관하여 클라이언트가 직접 특정 message를 emit 하고 서버에서 특정 메세지에 관한 핸들러 함수들을 처리하는 로직으로 진행을 하였습니다.
서버에서 등록한 핸들러 함수로는 다음과 같이 있습니다

handleCreateRoom: “createRoom” message subscribe을 통하여 방 생성에 관한 로직을 담당

handleJoinRoom: “joinRoom” message subscribe을 통하여 유저가 생성된 방에 입장하는 것을 처리하는 로직을 담당

handleLeaveRoom: “leaveRoom” message subscribe을 통하여 유저가 방에서 나가는 것에 관한 로직을 담당

Ver 0.2

sequenceDiagram
    participant Client
    participant Server
    participant Repository
    rect rgb(200, 240, 200)
    Note over Client,Repository: 변경된 방식
    Client->>Server: Socket 연결 (handshaking)
    activate Server
    Server->>Repository: 방 정보 즉시 조회
    Repository-->>Server: 방 정보 반환
    Server-->>Client: 연결 완료 (handshaking)
    deactivate Server
    end

Loading

현재 인터페이스

다만 inear 내부에서 소켓 연결은 크게 클라이언트가 새로운 라이브 세션에 들어갈때마다 새롭게 생성이 됩니다.
그렇기에 클라이언트의 joinRoom 과정은 언제나 handshaking 과 함께 바로 실행이 됩니다.
그렇기에 저희는 서버의 소켓 처리에 관한 흐름을 합쳐서 로직을 단순화하고 지연시간을 더 줄이고자 하였습니다.

handleConnection : Socket 연결 시점에 사용자의 방 참여를 검증하고 초기화

handleDisconnect : Socket 연결이 종료될 때 사용자의 방 퇴장 처리 및 관련된 정리 작업

연결 과정 변경으로 인해 기대되는 점

• 연결 생명주기 이벤트를 직접 처리하므로 누락 없이 모든 연결/종료 상황 처리 가능
• 네트워크 불안정이나 예기치 않은 연결 종료 상황도 안정적으로 처리
• 연결 시점에 필요한 모든 초기화 작업을 한 번에 처리
• 불필요한 연결을 조기에 차단하여 서버 리소스 절약하고, 코드의 양도 줄일 수 있음
• 관심사 분리가 명확함
  • 연결 관리는 handleConnection
  • 비즈니스 로직은 메시지 핸들러
  • 연결 끊는 작업은 handleDisconnect