데이터 캐싱으로 웹소켓 성능 개선하기 (불필요한 네트워크 트래픽 없애기)

이전에 받은 데이터를 캐싱하여, 같은 데이터를 여러 번 받을 필요가 없도록 하여 웹소켓 로직의 성능을 개선할 수 있다.

객체를 이용하여 해당 기능을 구현해보도록 하자

class WebSocketManager {
  constructor() {
    // WebSocket 연결
    this.socket = new WebSocket("ws://localhost:8080");

    // 데이터를 캐싱하기 위한 객체
    this.dataCache = {};

    // WebSocket에서 데이터가 도착하면 호출되는 콜백 함수, 데이터 캐싱
    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.dataCache[data.id] = data;
    };
  }

  // 데이터를 요청하는 메소드
  getData(id) {
    // 데이터 캐시가 있으면 해당 데이터를 반환
    if (this.dataCache[id]) {
      return Promise.resolve(this.dataCache[id]);
    }

    // 데이터 캐시가 없으면 새로운 Promise를 생성
    return new Promise((resolve) => {
      // 100ms 주기로 데이터 캐시에 해당 데이터가 있는지 확인
      const interval = setInterval(() => {
        if (this.dataCache[id]) {
          // 데이터 캐시에 해당 데이터가 있으면 Promise
          clearInterval(interval);
          resolve(this.dataCache[id]);
        }
      }, 100);
    });
  }
}

// WebSocketManager 객체를 생성
const webSocketManager = new WebSocketManager();

// id가 1인 데이터를 요청
webSocketManager.getData(1).then((data) => {
  console.log(data);
});

WebSocketManager 클래스를 사용하여 WebSocket을 관리하고, dataCache 객체를 이용하여 데이터를 캐싱한다.

getData 메소드에서는 먼저 dataCache에 해당 데이터가 있는지 확인하고, 없다면 새로운 Promise를 생성하여 해당 데이터가 도착할 때까지 주기적으로 확인한다.

데이터가 도착하면 Promise가 해결되고, 해당 데이터가 반환된다.

 

이를 이용하여 데이터를 캐싱하고 불필요한 네트워크 트래픽을 줄일 수 있다.