소켓 통신은 웹 애플리케이션에서 실시간으로 데이터를 주고받을 수 있는 중요한 기술입니다. 자바스크립트에서 소켓 통신을 구현하기 위해 옵저버 패턴을 사용할 수 있습니다. 옵저버 패턴은 객체 사이의 일대다 종속성을 정의하는 디자인 패턴으로, 한 객체의 상태가 변경되면 종속된 객체들에게 자동으로 알림을 전달합니다.

1. 옵저버 클래스 만들기

먼저 옵저버 클래스를 만들어야 합니다. 이 클래스는 소켓에서 발생하는 이벤트를 처리하고 필요한 동작을 수행하는 역할을 합니다.

class SocketObserver {
  update(data) {
    // 소켓에서 받은 데이터를 처리하는 로직을 작성합니다.
  }
}

위의 코드에서 update 메소드는 소켓에서 발생한 이벤트를 처리하는 메소드입니다. 소켓으로부터 받은 데이터를 처리할 수 있는 로직을 이 메소드에 작성해야 합니다.

2. 옵저버 패턴 적용하기

이제 소켓 클래스에 옵저버 패턴을 적용해야 합니다. 소켓 클래스는 옵저버들을 등록하고, 소켓에서 데이터가 들어오면 등록된 옵저버들에게 알림을 전달해야 합니다.

class Socket {
  constructor() {
    this.observers = [];
  }
  
  addObserver(observer) {
    this.observers.push(observer);
  }
  
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
  
  notifyObservers(data) {
    this.observers.forEach(observer => observer.update(data));
  }
  
  // 소켓에서 데이터를 받았을 때 호출되는 메소드
  receive(data) {
    this.notifyObservers(data);
  }
}

위의 코드에서 addObserver 메소드는 옵저버를 등록하는 메소드입니다. notifyObservers 메소드는 등록된 옵저버들에게 알림을 전달하는 메소드입니다. 추가로 removeObserver 메소드를 사용하여 옵저버를 제거할 수도 있습니다.

3. 사용 예제

이제 옵저버 패턴이 적용된 소켓 클래스를 사용해보겠습니다.

const socket = new Socket();

const observer1 = new SocketObserver();
const observer2 = new SocketObserver();

socket.addObserver(observer1);
socket.addObserver(observer2);

// 소켓에서 데이터를 받았을 때, 옵저버들의 update 메소드가 호출됩니다.
socket.receive("Hello, World!");

위의 코드에서는 먼저 Socket 객체를 생성하고, SocketObserver 객체 두 개를 생성하여 등록합니다. 마지막으로 receive 메소드를 사용하여 소켓에서 데이터를 전달하면, 등록된 옵저버들의 update 메소드가 자동으로 호출됩니다.

이렇게 옵저버 패턴을 활용하면 자바스크립트에서 소켓 통신을 구현할 때 객체 간의 느슨한 결합을 유지하면서 확장성 있는 코드를 작성할 수 있습니다.

#자바스크립트 #소켓통신