TIL61-01 SSE

SSE란

• SSE(서버-센트 이벤트, Server-Sent Events)는 서버에서 클라이언트로 단방향으로 데이터를 전송할 수 있는 웹 기술이다.

• 일반적인 웹 애플리케이션에서는 클라이언트가 서버에 요청을 보내고, 서버는 이에 대한 응답을 클라이언트에게 반환한다. 그러나 SSE를 사용하면, 서버에서 클라이언트로 데이터를 주기적으로 보낼 수 있다.

• SSE는 일반적으로 "스트림"으로부터 데이터를 받아오며, 이 스트림은 서버 측에서 오픈된 HTTP 연결을 통해 클라이언트에게 데이터를 전송한다. 클라이언트는 이 스트림을 받아들이고, 새로운 데이터가 전송될 때마다 이를 처리한다.

• 이러한 방식으로 SSE는 웹 애플리케이션에서 실시간으로 데이터를 처리하거나 업데이트할 필요가 있는 경우 유용하게 사용될 수 있다. 예를 들어, 주식 거래 시스템이나 실시간 채팅 애플리케이션 등에서 SSE를 활용할 수 있다.

리액트 예시 코드

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

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    const eventSource = new EventSource('/api/stream');

    eventSource.onmessage = (event) => {
      setData(event.data);
    };

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

  return (
    <div>
      <p>{data}</p>
    </div>
  );
}

export default App;

• 위 코드에서 EventSource 객체는 /api/stream 경로를 통해 서버와 연결한다. onmessage 콜백 함수는 서버로부터 오는 데이터를 받아들이고, setData 함수를 통해 리액트 state를 업데이트 한다. 마지막으로, useEffect 훅에서 return 함수를 사용하여 컴포넌트가 언마운트될 때 EventSource 객체를 닫는다.

• 위 예시 코드에서는 서버에서 데이터를 전송하는 SSE의 구현은 제공되지 않았다. 따라서 서버 측 코드도 함께 구현해야 한다. 이를 위해서는 서버에서 SSE를 지원하는 라이브러리를 사용하거나, SSE를 수동으로 구현해야 한다.