Flask-React SSE (Server-Sent Events) 구현

 

📌 1. 백엔드 (Flask) - SSE 엔드포인트 만들기

SSE는 클라이언트가 HTTP 연결을 열고 서버가 텍스트 스트림을 지속적으로 보내는 방식이야. Flask에서 SSE를 처리하려면 stream_with_context를 사용해줘야 해.

Flask 코드 예시:

from flask import Flask, Response, stream_with_context
import time

app = Flask(__name__)

@app.route('/stream')
def stream():
    def event_stream():
        while True:
            # 서버에서 데이터를 지속적으로 보내줌
            time.sleep(1)
            yield f"data: 현재 서버 시간: {time.strftime('%Y-%m-%d %H:%M:%S')}\n\n"
    
    return Response(stream_with_context(event_stream()), mimetype="text/event-stream")

if __name__ == '__main__':
    app.run(debug=True, threaded=True)

설명:

• yield를 통해 데이터 스트림을 계속 보내.
• mimetype="text/event-stream"을 반드시 설정해야 해.
• 각 메시지는 data:로 시작하고 \n\n으로 끝나야 해.

---

📌 2. 프론트엔드 (React) - SSE 수신 코드

React에서는 기본 브라우저 API인 EventSource를 이용해서 서버로부터 오는 이벤트를 받을 수 있어.

React 코드 예시:

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

function SSEComponent() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('http://localhost:5000/stream');

    eventSource.onmessage = (e) => {
      console.log('새 메시지:', e.data);
      setMessages(prevMessages => [...prevMessages, e.data]);
    };

    eventSource.onerror = (err) => {
      console.error('SSE 연결 에러:', err);
      eventSource.close();
    };

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

  return (
    <div>
      <h1>서버에서 오는 메시지들</h1>
      <ul>
        {messages.map((msg, idx) => (
          <li key={idx}>{msg}</li>
        ))}
      </ul>
    </div>
  );
}

export default SSEComponent;

설명:

• EventSource 객체를 생성해서 서버 /stream에 연결해.
• .onmessage 핸들러에서 서버가 보내주는 데이터를 받을 수 있어.
• 에러나 컴포넌트 언마운트 시 eventSource.close()로 연결을 닫아줘야 해.

---

📌 3. 추가 주의사항

• CORS 문제 발생할 수 있어. Flask에 CORS 설정이 필요할 수 있음.

  from flask_cors import CORS
  
  app = Flask(__name__)
  CORS(app)
  

• pip install flask-cors
• 서버 타임아웃 주의!
  • 배포할 때는 gunicorn 같은 WSGI 서버에서 keep-alive 설정을 잘 해줘야 함.
  • 클라우드나 프록시 서버가 중간에 연결을 끊지 않게 주의해야 해.
• SSE는 단방향 통신 (서버 ➔ 클라이언트) 방식이야. 클라이언트가 서버에 데이터를 보내려면 별도 API를 써야 해.

---

✅ 요약

역할 기술 요소 비고

백엔드	Flask + stream_with_context + text/event-stream	주기적으로 데이터 yield
프론트엔드	React + EventSource	.onmessage로 수신 처리
기타	CORS 설정, Keep-Alive 주의	배포 환경에 따라 추가 세팅