MPA 환경에서 SSE 사용하는방법이 궁금합니다

Question

실시간알림 기능 구현을 위해 SSE를 사용하게 되었습니다.function setSSE() { let eventSource = new EventSource("/sub"); //실시간 알림 발생시 실행 eventSource.addEventListener("new", function (e) { $(".notice").addClass("active"); }); eventSource.addEventListener("error", function (event) { eventSource.close(); }); }위와같이 sse를 등록하면public static Map sseEmitters = new ConcurrentHashMap<>(); // 형식으로 저장 @GetMapping(value = "/sub", produces = "text/event-stream") public SseEmitter subscribe(@AuthenticationPrincipal PrincipalDetails principalDetails, @RequestHeader(value = "Last-Event-ID", required = false, defaultValue = "") String lastEventId) { int userId = principalDetails.getUser().getId(); return notificationService.subscribe(userId); }컨트롤러에서 받은 뒤 서비스단으로 넘겨줍니다 // SSeEmitter 객체 생성 public SseEmitter subscribe(int userId) { // 현재 클라이언트를 위한 SseEmitter 생성 SseEmitter sseEmitter = new SseEmitter(Long.MAX_VALUE); try { sseEmitter.send(SseEmitter.event().name("connect")); } catch (IOException e) { e.printStackTrace(); } // user의 pk값을 key값으로 해서 SseEmitter를 저장 NotificationController.sseEmitters.put(userId, sseEmitter); sseEmitter.onCompletion(() -> NotificationController.sseEmitters.remove(sseEmitter)); sseEmitter.onTimeout(() -> NotificationController.sseEmitters.remove(sseEmitter)); sseEmitter.onError((e) -> NotificationController.sseEmitters.remove(sseEmitter)); return sseEmitter; }서비스단에서 SSEmitter 객체를 생성하여 map에 등록합니다.주석에도 써있듯, userId를 키, SSE객체를 밸류로 설정하여 Map으로 관리하므로 알림을 보낼땐 알림을 받을 사용자의 ID만 알면 됩니다. // SSE로 실시간 알림 전송 private void sendEmitter(Notification notification, User receiver) throws IOException { SseEmitter sseEmitter = NotificationController.sseEmitters.get(receiver.getId()); try { sseEmitter.send(SseEmitter.event().name("new").data( notification.changeJsonData(), MediaType.APPLICATION_JSON)); } catch (Exception e) { e.printStackTrace(); NotificationController.sseEmitters.remove(receiver.getId()); } }원하던 방식대로 잘 동작은 합니다만...이 동작을 구현한 이후로 자꾸 커넥션 풀이 모자라다는 에러가 뜨기 시작하네요그래서 의심하게 된 부분이 바로 SSE가 계속해서 초기화된다는점입니다.현재 SPA가 아닌 MPA로 구현하였고, 스프링부트+타임리프를 사용하고있습니다. 리액트같은 라이브러리는 사용하지 않고있어요그런데 "알림" 기능은 헤더에 존재하고, 이 헤더는 어떤 페이지에 들어가던지 똑같이 존재해야합니다. 따라서 url을 변경할때마다(즉 다른 페이지에 진입할때마다) 위의 setSSE()가 계속해서 실행되고 있습니다. 만약 한 사용자가 한 페이지에서 새로고침을 100번하면 setSSE()가 100번 실행되는셈입니다.따라서 이로인해 불필요한 커넥션이 길어지는것같다는 생각이 듭니다.. 그리고 직관적으로 생각해봐도 너무 비효율적이예요그렇지만 타임리프 환경에서 맨처음에만 로드되고 그뒤로는 계속 전역으로 사용가능한 js파일이라는건 존재하지 않지 않나요..?그래서 어쩔수없이 매번 생성하고 Map으로 관리해서 서버에서 구별이라도 가능하게 만들었던건데, 이를 효율적으로 해결하고싶습니다. (eventSource 자체를 세션이나 쿠키에 저장하는것도 생각해봤는데,, GPT한테 물어봤을땐 권장하지 않는다고 하네요)어떻게 해야할까요? 그냥 SSE를 포기해야하는걸까요?ㅜㅜ

Lamanus · Answer

new SseEmitter(Long.MAX_VALUE)타임아웃이 무한대라서 그런거 아닐까요.

MPA 환경에서 SSE 사용하는방법이 궁금합니다

1개의 답변

#mpa 목록