01. 구현 기능 파트

BE

Untitled

02. 질문

FE

import React, { useEffect } from 'react';
import styled, { css } from 'styled-components';
import { getCookie } from '../../utils/cookie';
import { EventSourcePolyfill, NativeEventSource } from 'event-source-polyfill';

const EventSource = EventSourcePolyfill;

export default function AdminDashBoard() {
  const dispatch = useDispatch();

  const { getDashboard, isDashboardError } = useSelector(
    state => state.dashboardStatus.dashboardStatus
  );

  const fetchSse = async () => {
    const url = `${process.env.REACT_APP_SERVER_URL}/api/subscribe`;
    const token = getCookie('myToken');
    console.log(token);
    const eventSource = new EventSource(url, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      // withCredentials: true,
    });

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

    eventSource.onmessage = async event => {
      console.log('result', event.data);
    };
		
		//에러가 발생했습니다.
    eventSource.onerror = async event => {
      console.log(event);
      if (event.target.readyState === EventSource.CLOSED) {
        console.log('eventsource closed (' + event.target.readyState + ')');
      } else {
        console.log('eventsource error', event);
      }
      // eventSource.close();
    };

    return eventSource;
  };

  useEffect(() => {
    let eventSource;
    const connectSse = async () => {
      eventSource = await fetchSse();
    };

    connectSse();

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

 
 //... 생략

  return (
    <>
    //...생략
    </>
  );
}

BE