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;