SSE(Server-Sent Events) 방식과 WebSocket 통신 방식

SSE(Server-Sent Events)와 WebSocket 통신은 웹 애플리케이션에서 실시간 데이터 푸시와 통신을 구현하는 두 가지 주요 방법입니다.

SSE(서버-센트 이벤트)

1. SSE는 서버에서 클라이언트로 단방향 통신을 위한 웹 기술입니다.
2. 주로 서버에서 클라이언트로 실시간 업데이트를 보내는 데 사용됩니다.
3. SSE는 기본 HTTP 프로토콜을 사용하며, 특별한 서버 설정 없이 사용할 수 있습니다.
4. 클라이언트는 서버에 연결한 후 서버가 업데이트할 때까지 연결을 유지하며 데이터를 기다립니다.
5. 서버에서 데이터가 전송되면 클라이언트의 이벤트 리스너를 통해 데이터를 처리할 수 있습니다.
6. 주로 실시간 뉴스, 주식 가격 업데이트, 알림 시스템 등에서 사용됩니다.

WebSocket 통신

1. 소켓 통신은 양방향 통신을 위한 네트워크 프로그래밍 방식입니다.
2. 클라이언트와 서버 사이에 실시간 양방향 데이터 스트림을 만들고 유지합니다.
3. 소켓 통신은 일반적으로 TCP/IP 기반으로 작동하며, 클라이언트와 서버는 서로의 IP 주소와 포트를 사용하여 통신합니다.
4. 실시간 채팅 애플리케이션, 온라인 게임, 화상 통화 등에서 주로 사용됩니다.

요약

SSE는 단방향 통신을 위한 간단하고 브라우저 호환성이 좋은 방법으로, 서버에서 클라이언트로 실시간 업데이트를 보내는 데 적합합니다. 반면에 소켓 통신은 양방향 통신을 지원하며 더 복잡한 응용 프로그램을 개발하는 데 사용됩니다. 선택할 방법은 프로젝트 요구 사항과 성격에 따라 다를 수 있습니다.

---

서버 예시 코드

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    const message = `data: ${new Date().toLocaleTimeString()}\n\n`;
    res.write(message);
  }, 1000);
});

server.listen(3000, () => {
  console.log('SSE server is running on port 3000');
});

클라이언드 예시 코드 - SSE

import React, { useEffect, useState } from 'react';

function SSEComponent() {
  const [sseData, setSSEData] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('/sse-endpoint'); // SSE 엔드포인트 경로를 지정합니다.

    eventSource.onmessage = (event) => {
      const newSSEData = JSON.parse(event.data); // 받은 데이터를 파싱합니다.
      setSSEData((prevData) => [...prevData, newSSEData]);
    };

    eventSource.onopen = () => {
      console.log('SSE connection opened.');
    };

    eventSource.onclose = () => {
      if (eventSource.readyState === EventSource.CLOSED) {
        console.log('SSE connection closed.');
      }
    };

    return () => {
      eventSource.close(); // 컴포넌트가 언마운트될 때 SSE 연결을 닫습니다.
    };
  }, []); // 빈 배열을 전달하여 컴포넌트가 처음 마운트될 때만 이펙트를 실행합니다.

  return (
    <div>
      <h1>SSE Data:</h1>
      <ul>
        {sseData.map((data, index) => (
          <li key={index}>{data}</li>
        ))}
      </ul>
    </div>
  );
}

export default SSEComponent;

클라이언드 예시 코드 - WebSocket

import React, { useState, useEffect } from 'react';

function WebSocketExample() {
  const [messages, setMessages] = useState([]);
  const [inputMessage, setInputMessage] = useState('');
  const socket = new WebSocket('ws://localhost:8080');

  useEffect(() => {
    // 컴포넌트가 마운트될 때 WebSocket 연결을 설정합니다.
    socket.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };

    // 컴포넌트가 언마운트될 때 WebSocket 연결을 닫습니다.
    return () => {
      socket.close();
    };
  }, []);

  const sendMessage = () => {
    socket.send(inputMessage);
    setInputMessage('');
  };

  const handleInputChange = (e) => {
    setInputMessage(e.target.value);
  };

  return (
    <div>
      <h1>WebSocket Example</h1>
      <div>
        <input
          type="text"
          value={inputMessage}
          onChange={handleInputChange}
          placeholder="Type a message"
        />
        <button onClick={sendMessage}>Send</button>
      </div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
    </div>
  );
}

export default WebSocketExample;

---

참고 자료

1. https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events/Using_server-sent_events
   - SSE 명세와 브라우저 호환성
2. https://developer.mozilla.org/ko/docs/Web/API/WebSocket
   - WebSocket 명세와 브라우저 호환성