자바스크립트 Observers를 활용한 웹 소켓 통신 처리

08 Nov 2023

javascript

웹 소켓은 실시간 통신을 구현하는데 사용되는 기술입니다. 이를 통해 서버와 클라이언트 간에 양방향 통신을 할 수 있으며, 데이터를 실시간으로 주고 받을 수 있습니다. 이번에는 자바스크립트 Observers를 활용하여 웹 소켓 통신을 처리하는 방법을 알아보겠습니다.

Observers란?

Observers는 객체의 변화를 감지하고 해당 변화에 대한 처리를 수행하는 패턴입니다. 자바스크립트에서는 MutationObserver를 사용하여 DOM의 변화를 감지할 수 있습니다. 이 패턴을 웹 소켓 통신에 적용하여 데이터의 변동을 감지하고 적절한 처리를 할 수 있습니다.

웹 소켓 통신 처리 예제

// 웹 소켓 연결
const socket = new WebSocket('ws://localhost:3000');

// MutationObserver 생성
const observer = new MutationObserver((mutationsList, observer) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'data') {
      // 데이터가 변경된 경우 처리 로직 작성
      const newData = mutation.target.getAttribute('data');
      console.log('새로운 데이터:', newData);
    }
  }
});

// 대상 엘리먼트를 관찰하도록 설정
const targetElement = document.getElementById('target');
observer.observe(targetElement, { attributes: true });

// 웹 소켓 메시지 수신 이벤트 핸들러
socket.onmessage = (event) => {
  const data = event.data;
  
  // 데이터가 변경되었음을 알리기 위해 대상 엘리먼트의 속성 변경
  targetElement.setAttribute('data', data);
};

위의 예제에서는 웹 소켓을 통해 메시지를 수신할 때마다 targetElement의 data 속성을 변경합니다. 이때 MutationObserver를 사용하여 data 속성의 변화를 감지하고, 변화에 대한 처리 로직을 작성합니다. 이 예제는 데이터가 변경될 때마다 해당 데이터 값을 콘솔에 출력하는 예제입니다.

이러한 방식으로 Observers를 활용하여 웹 소켓 통신을 처리할 수 있습니다.

결론

자바스크립트 Observers를 활용하면 웹 소켓을 좀 더 효과적으로 처리할 수 있습니다. 데이터의 변화를 감지하고 적절한 처리를 수행할 수 있으므로, 실시간 통신이 필요한 웹 애플리케이션 개발에 유용하게 활용할 수 있습니다.

#웹소켓 #Observers