React + Spring SSE

Question

현재 채팅 웹 어플리케이션을 만들고 있는데, 채팅 보낸후에 푸시 알림을 SSE를 사용하여 구현중에 문제가 생겨 질문드립니다! 제발 고수분들 도와주세요...문제 상황 : 클라이언트에 SSE 연결까지는 되는데, 클라이언트에서 채팅 메세지를 보내고 "sse"라는 이벤트를 받지를 못함.(addEventListener가 호출 조차 안됨) 현재 백엔드는 Spring Cloud , Gateway를 통해 MSA 환경에서 SSE 기능을 구현했습니다. Postman과 디버깅을 했을떈 백엔드에선 클라이언트로 정상적으로 데이터를 전송하는것을 확인했습니다.//관련 백엔드 코드 @Transactional public SseEmitter subscribe(Long memberId, String lastEventId) { Integer memberNo = memberId.intValue(); //Emitter map에 저장하기 위한 key 생성 String id = memberNo + "_" + System.currentTimeMillis(); // SseEmitter map에 저장 SseEmitter emitter = emitterRepository.save(id, new SseEmitter(DEFAULT_TIMEOUT)); log.info("emitter add: {}", emitter); // emitter의 완료 또는 타임아웃 Event가 발생할 경우, 해당 emitter를 삭제 emitter.onCompletion(() -> emitterRepository.deleteById(id)); emitter.onTimeout(() -> emitterRepository.deleteById(id)); // 503 에러를 방지하기 위한 더미 Event 전송 sendToClient(emitter, id, "EventStream Created. [userId=" + memberNo + "]"); // 클라이언트가 미수신한 Event 목록이 존재할 경우 전송하여 Event 유실을 예방 if (!lastEventId.isEmpty()) { // id에 해당하는 cache 찾음 Map events = emitterRepository.findAllCacheStartWithId(String.valueOf(memberNo)); //미수신한 Event 목록 전송 events.entrySet().stream() .filter(entry -> lastEventId.compareTo(entry.getKey()) < 0) .forEach(entry -> sendToClient(emitter, entry.getKey(), entry.getValue())); } return emitter; } private void sendToClient(SseEmitter emitter, String id, Object data) { try { log.info("event : " + data); emitter.send(SseEmitter.event() .name("sse") .id(id) .data(data)); log.info("event call: " + emitter); } catch (IOException ex) { emitterRepository.deleteById(id); log.error("--- SSE 연결 오류 ----", ex); } } React로 작성한 프론트 부분이 문제인것같은데, 전역에서 처리하기 위해 Redux를 사용중입니다. 관련 코드를 아래 첨부하겠습니다! 도와주시면 감사하겠습니다!!import React, { createContext, useContext, useState, useEffect } from 'react'; import { EventSourcePolyfill } from 'event-source-polyfill'; const NotificationContext = createContext(); export const useNotifications = () => useContext(NotificationContext); export const NotificationProvider = ({ children }) => { const [notifications, setNotifications] = useState([]); useEffect(() => { const memberNo = localStorage.getItem('id'); const jwtToken = localStorage.getItem('exampl'); const eventSource = new EventSourcePolyfill(`example`, { headers: { 'Authorization': `Bearer ${jwtToken}`, }, heartbeatTimeout: 1740000, }); eventSource.onopen = () => { console.log('connected'); }; console.log(eventSource.url); eventSource.addEventListener('sse', (event) => { console.log(event.data); if (!event.data.includes('EventStream Created')) { const newNotification = JSON.parse(event.data); setNotifications((prevNotifications) => [...prevNotifications, newNotification]); } }); eventSource.onerror = (e) => { if (e.error) { console.log('Error'); eventSource.close(); } if (e.target.readyState === EventSource.CLOSED) { console.log('closed'); eventSource.close(); } }; }, []); return ( {children} ); }; import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { NotificationProvider } from './context/NotificationContext'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );

codezzzz · Answer

const eventSource = new EventSourcePolyfill(`example`, { headers: { 'Authorization': `Bearer ${jwtToken}`, }, heartbeatTimeout: 1740000, });백엔드 api 주소가 path가 "example" 맞을까요?

React + Spring SSE

1개의 답변

#sse 목록