[javascript] MobX와 웹 소켓 통신

04 Dec 2023

javascript

이번 글에서는 MobX와 웹 소켓 통신을 어떻게 구현할 수 있는지 알아보겠습니다. MobX는 React와 함께 사용하기 좋은 상태 관리 라이브러리인데, 웹 소켓을 통해 서버와 실시간으로 데이터를 주고받아야 하는 경우 MobX를 사용하여 간편하게 상태를 관리할 수 있습니다.

웹 소켓이란?

웹 소켓은 클라이언트와 서버 간 양방향 통신을 가능하게 해주는 프로토콜입니다. 기존의 HTTP 프로토콜은 클라이언트가 서버에게 요청을 보내고, 서버는 그에 대한 응답을 보내는 단방향 통신이었습니다. 반면 웹 소켓은 한 번 연결된 후에는 계속해서 서로 데이터를 주고받을 수 있는 양방향 통신을 지원합니다.

MobX와 웹 소켓 연동

MobX Store 생성

MobX의 상태 관리를 위해 Store를 생성합니다. Store는 웹 소켓을 통해 송수신한 데이터를 저장하고 관리하는 역할을 합니다.

// store.js
import { observable, action } from 'mobx';

class WebSocketStore {
  @observable messages = [];

  @action
  addMessage(message) {
    this.messages.push(message);
  }
}

export default new WebSocketStore();

웹 소켓 연결

웹 소켓 연결을 위한 클라이언트 코드를 작성합니다. 이때 onmessage 이벤트 핸들러를 등록하여 서버로부터 수신된 데이터를 처리합니다.

// websocket.js
import WebSocketStore from './store';

const webSocket = new WebSocket('ws://localhost:8080');

webSocket.onopen = () => {
  console.log('WebSocket connected');
};

webSocket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  WebSocketStore.addMessage(message);
};

export default webSocket;

MobX Observer 사용

React에서 MobX를 사용하기 위해 observer 컴포넌트를 사용합니다. Store에 변화가 있을 때마다 자동으로 컴포넌트를 업데이트합니다.

// Messages.js
import React from 'react';
import { observer } from 'mobx-react';
import WebSocketStore from './store';

const Messages = () => {
  return (
    <div>
      {WebSocketStore.messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
    </div>
  );
};

export default observer(Messages);

데이터 전송

클라이언트에서 서버로 데이터를 전송할 때는 send 메서드를 사용합니다. 예를 들어 버튼 클릭 시 입력된 메시지를 서버로 전송하는 코드는 다음과 같습니다.

// SendMessageButton.js
import React from 'react';
import webSocket from './websocket';

const SendMessageButton = ({ message }) => {
  const sendMessage = () => {
    webSocket.send(JSON.stringify({ message }));
  };

  return <button onClick={sendMessage}>Send Message</button>;
};

export default SendMessageButton;

이제 MobX와 웹 소켓을 사용하여 실시간으로 데이터를 주고받을 수 있는 상태 관리 시스템을 구현할 수 있습니다. MobX의 간편한 상태 관리와 웹 소켓의 양방향 통신을 활용하여 React 애플리케이션을 개발하는데 도움이 될 것입니다.

웹 소켓이란?

MobX와 웹 소켓 연동

참고 자료