[React] WebSocket을 이용한 실시간 데이터 통신 구현

목차

React와 WebSocket을 이용한 실시간 데이터 통신 구현하기

안녕하세요, 실시간 인터랙티브 애플리케이션을 개발하는 데 관심 있는 개발자 여러분! 오늘은 React 애플리케이션에서 WebSocket을 사용하여 실시간 데이터 통신을 구현하는 방법을 알아보겠습니다. WebSocket은 웹 애플리케이션에서 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 이를 활용하면, 사용자가 데이터를 요청하고 기다릴 필요 없이 서버로부터 데이터를 지속적으로 받아볼 수 있습니다.

---

WebSocket의 기본

WebSocket 프로토콜은 HTTP와 달리, 연결을 한 번 맺은 후에 계속 열어두어 데이터를 양방향으로 흐를 수 있도록 합니다. 이 특징은 실시간 채팅, 게임, 금융 거래 등의 애플리케이션에서 매우 유용합니다.

 

React에서 WebSocket 구현하기

1. WebSocket 서버 설정

실시간 통신을 위해서는 먼저 WebSocket 서버가 필요합니다. Node.js와 ws 라이브러리를 사용하여 간단한 WebSocket 서버를 구축할 수 있습니다.

// Node.js WebSocket 서버 예시
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', socket => {
    socket.on('message', message => {
        console.log(`Received message => ${message}`);
        socket.send(`Hello, you sent -> ${message}`);
    });
    socket.send('Hi there, I am a WebSocket server');
});

2. React 클라이언트에서 WebSocket 연결하기

React 컴포넌트에서 WebSocket을 사용하여 서버와 통신할 수 있습니다. 여기서는 클래스 컴포넌트를 사용한 예를 들어 설명합니다.

import React, { Component } from 'react';

class ChatApp extends Component {
  state = { messages: [] };

  componentDidMount() {
    this.socket = new WebSocket('ws://localhost:8080');

    this.socket.onmessage = (event) => {
      const message = event.data;
      this.setState(state => ({
        messages: [...state.messages, message]
      }));
    };
  }

  componentWillUnmount() {
    this.socket.close();
  }

  sendMessage = (message) => {
    this.socket.send(message);
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.messages.map((message, index) => (
            <li key={index}>{message}</li>
          ))}
        </ul>
        <button onClick={() => this.sendMessage('Hello Server!')}>Send Message</button>
      </div>
    );
  }
}

export default ChatApp;

 

WebSocket의 이점과 주의사항

• 이점: 실시간 데이터 통신, 낮은 지연시간, 양방향 통신, 연결 오버헤드 감소.
• 주의사항: 보안 문제(WebSocket Secure, wss:// 사용 권장), 연결 관리, 서버 부하 관리.

 

마무리하며...

WebSocket을 React와 결합하여 사용함으로써, 실시간 통신이 필요한 강력하고 반응성이 뛰어난 웹 애플리케이션을 만들 수 있습니다. 위에서 설명한 기술들을 활용하여 여러분의 프로젝트에 적용해보세요. 실시간 기능이 애플리케이션의 사용자 경험을 현저히 향상시킬 수 있습니다!

---

Reference:

WebSocket - Web APIs | MDN

 

ws