Pub‐Sub 패턴을 통한 실시간 방 목록 조회 기능 개발

배경

로비에 있는 유저들은 서버와 웹소켓으로 연결되어 있는 상태입니다. 유저가 직접 새로고침 버튼을 누르지 않아도 방 인원수가 변경되는 것과 방이 새로 생기고 없어지는 것을 실시간으로 조회할 수 있게 하기 위해 Pub/Sub 패턴을 적용하고자 했습니다.

처음에는 아래와 같이 레디스에서 제공하는 Pub/Sub 기능을 통해 레디스에 이벤트를 발행하면 그 이벤트가 각 WAS로 전파되고 각각의 WAS에서 연결되어 있는 웹소켓 클라이언트들에게 변경된 방 정보를 전송하는 구조로 구현하려고 했습니다.

하지만 마스터 클래스와 멘토링을 통해 꼭 필요하지 않은 기술을 무리해서 적용하는 게 좋지 않음을 알게 되었습니다. 저희 서비스에서는 WAS가 한 대 뿐이므로 레디스를 사용해야할 이유가 없었기 때문에 레디스를 사용하지 않고 애플리케이션에서 Pub/Sub 패턴을 적용해 구현하기로 했습니다.

구현

챌린지 과정에서 배웠던 Pub/Sub 패턴을 사용해 구현했습니다. 아래와 같은 EventManager 클래스를 통해 이벤트를 구독할 수 있고, 이벤트가 발행되는 순간에 등록되어 있던 구독자들에게 전파됩니다.

@Injectable()
export class EventManager {
  private readonly subscribers: Record<string, Subscriber[]> = {};

  publish(eventName: string, e: SocketEvent) {
    const subscribers = this.subscribers;
    if (!subscribers[eventName]) {
      return;
    }
    subscribers[eventName].forEach((subscriber) => subscriber(e));
  }

  subscribe(eventName: string, handler: Subscriber): Subscription {
    const subscribers = this.subscribers;
    if (!subscribers[eventName]) {
      subscribers[eventName] = [];
    }
    subscribers[eventName].push(handler);

    return {
      unsubscribe() {
        subscribers[eventName] = subscribers[eventName].filter(
          (subscriber) => subscriber !== handler,
        );
      },
    };
  }
}

결과

사용자들은 아래와 같이 로비에서 변경되는 방 목록을 실시간으로 조회할 수 있습니다.