React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(28)

실시간 기능 구현: WebSocket을 이용한 실시간 알림 및 데이터 업데이트

이번 강의에서는 WebSocket을 사용해 실시간 알림 및 데이터 업데이트 기능을 구현합니다. WebSocket은 서버와 클라이언트가 지속적으로 연결을 유지하며, 양방향 통신을 통해 실시간으로 데이터를 주고받을 수 있는 프로토콜입니다. 이를 통해 실시간 채팅, 알림, 주식 가격 변화와 같은 기능을 구현할 수 있습니다.

WebSocket 을 사용한 실시간 기능 구현

---

1. WebSocket 개요

1.1 WebSocket이란?

WebSocket은 전통적인 HTTP 요청-응답 방식과 달리, 서버와 클라이언트 간에 지속적인 연결을 유지하여 실시간 데이터를 주고받을 수 있습니다. 클라이언트가 서버에 요청을 보내고 응답을 받는 구조가 아니라, 서버가 클라이언트로 직접 데이터를 **푸시(push)**할 수 있습니다.

1.2 WebSocket의 주요 특징

• 양방향 통신: 클라이언트와 서버가 서로 데이터를 주고받을 수 있습니다.
• 지속 연결: 연결이 한 번 이루어진 후에는 별도의 요청 없이 데이터를 주고받을 수 있습니다.
• 낮은 지연 시간: HTTP 기반 통신에 비해 지연 시간이 적어, 실시간 기능에 적합합니다.

---

2. WebSocket 서버 설정

2.1 Node.js에서 WebSocket 서버 구현

Node.js에서 WebSocket을 설정하려면 ws 라이브러리를 사용합니다. npm을 통해 ws 라이브러리를 설치합니다.

npm install ws

 

서버 측에서는 클라이언트와의 연결을 관리하고, 실시간으로 데이터를 주고받을 수 있도록 설정합니다.

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// 클라이언트 연결 처리
wss.on('connection', (ws) => {
  console.log('클라이언트 연결됨');

  // 클라이언트로부터 메시지를 받으면 처리
  ws.on('message', (message) => {
    console.log('받은 메시지:', message);

    // 연결된 모든 클라이언트에 메시지 전송
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  // 클라이언트에 환영 메시지 전송
  ws.send('서버에 연결되었습니다.');
});

2.2 WebSocket 서버 설명

• on('connection'): 클라이언트가 서버에 연결될 때 실행됩니다.
• on('message'): 클라이언트가 메시지를 보낼 때마다 해당 메시지를 처리합니다.
• send(): 서버에서 클라이언트로 메시지를 전송합니다.
• clients.forEach(): 연결된 모든 클라이언트에 메시지를 브로드캐스트(송신)합니다.

---

3. 클라이언트에서 WebSocket 연결

클라이언트 측에서는 WebSocket 객체를 사용해 서버와 연결하고, 실시간으로 데이터를 주고받을 수 있습니다.

// src/components/WebSocketClient.js
import React, { useEffect, useState } from 'react';

function WebSocketClient() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  let ws;

  useEffect(() => {
    // WebSocket 연결
    ws = new WebSocket('ws://localhost:8080');

    ws.onopen = () => {
      console.log('WebSocket 연결됨');
    };

    ws.onmessage = (event) => {
      setMessages(prevMessages => [...prevMessages, event.data]);
    };

    ws.onclose = () => {
      console.log('WebSocket 연결이 종료되었습니다.');
    };

    return () => {
      ws.close();
    };
  }, []);

  const sendMessage = () => {
    ws.send(input);
    setInput('');
  };

  return (
    <div>
      <h2>실시간 메시지</h2>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{msg}</li>
        ))}
      </ul>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={sendMessage}>메시지 보내기</button>
    </div>
  );
}

export default WebSocketClient;

3.1 코드 설명

• useEffect: 컴포넌트가 렌더링될 때 WebSocket을 설정하고, 컴포넌트가 언마운트될 때 연결을 종료합니다.
• onopen: WebSocket이 성공적으로 연결되었을 때 실행됩니다.
• onmessage: 서버로부터 메시지를 수신하면 실행되며, 수신된 메시지를 상태로 관리합니다.
• send(): 클라이언트에서 서버로 메시지를 전송합니다.

---

4. 실시간 알림 및 데이터 업데이트

WebSocket을 사용해 실시간 알림 또는 데이터 업데이트 기능을 구현할 수 있습니다.

4.1 실시간 알림 기능

서버에서 특정 조건이 충족되었을 때 클라이언트로 실시간 알림을 전송할 수 있습니다. 예를 들어, 새로운 댓글이 달리거나 특정 이벤트가 발생했을 때 모든 클라이언트에게 알림을 보냅니다.

// 서버에서 실시간 알림 전송
const notifyClients = (message) => {
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(`알림: ${message}`);
    }
  });
};

4.2 실시간 데이터 업데이트

서버에서 데이터베이스의 상태가 변경될 때, 클라이언트에 실시간으로 데이터를 업데이트할 수 있습니다. 예를 들어, 주식 가격 변화, 스포츠 경기 점수 등을 실시간으로 클라이언트에게 푸시할 수 있습니다.

---

5. 실시간 채팅 기능 구현

WebSocket을 사용해 간단한 실시간 채팅 기능을 구현할 수 있습니다. 각 클라이언트가 입력한 메시지를 서버를 통해 모든 클라이언트에게 전송하는 방식입니다.

5.1 서버에서 메시지 브로드캐스트

서버에서는 클라이언트로부터 메시지를 받아 연결된 다른 모든 클라이언트에 해당 메시지를 전송합니다.

 

wss.on('message', (message) => {
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(message);
    }
  });
});

5.2 클라이언트에서 메시지 전송 및 수신

클라이언트 측에서는 **send()**를 통해 메시지를 전송하고, onmessage 이벤트를 통해 다른 클라이언트로부터 전송된 메시지를 실시간으로 수신합니다.

---

6. 보안 고려사항

6.1 SSL을 통한 보안 통신

실제 서비스에서는 WebSocket 연결을 SSL(Secure Sockets Layer)을 사용하여 암호화하는 것이 좋습니다. 이를 위해 wss:// 프로토콜을 사용하여 암호화된 WebSocket 연결을 설정합니다.

const ws = new WebSocket('wss://example.com/socket');

6.2 인증 및 권한 관리

실시간 통신에서도 사용자 인증이 필요할 수 있습니다. JWT(JSON Web Token)나 세션 토큰을 사용하여 WebSocket 연결 시 클라이언트를 인증할 수 있습니다.

---

결론

이번 강의에서는 WebSocket을 사용해 실시간 알림 및 데이터 업데이트 기능을 구현하는 방법을 배웠습니다. WebSocket을 통해 서버와 클라이언트가 지속적으로 연결을 유지하며 실시간으로 데이터를 주고받을 수 있습니다. 이를 활용해 실시간 채팅, 알림, 데이터 업데이트와 같은 다양한 기능을 구현할 수 있습니다.