개발/etc

SSE (Server Sent Event)

mungmang 2023. 8. 20. 00:42
반응형
설명

서버에서 클라이언트로 데이터를 수신하는 방법 (단방향 통신)
WebSocket 의 경우, 서버 <-> 클라이언트 간 양방향 통신을 하지만, SSE 의 경우 단방향 통신을 함!
따라서 간단한 알림 전송 기능 개발등에 적합한 기술

 

구현 예제 
// server-side

// case1) SseEmitter 이용
// https://tecoble.techcourse.co.kr/post/2022-10-11-server-sent-events/ 참고 


// case2) WebFlux 이용 
// ...
@GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> sse() {
    return Flux.just("Server time: " + LocalDateTime.now())
            .doFinally(signalType -> {
                if (signalType == SignalType.CANCEL || signalType == SignalType.ON_COMPLETE) {
                    log.info("Closing SSE connection");
                }
            });

    ..
}
<!-- client-side --> 
<!-- server-side 의 case2) 방식 대응 --> 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE TEST</title>
</head>
<body>
<h1>SSE TEST</h1>
<div id="sse-data"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

  const eventSource = new EventSource("{server-side주소}/sse");
  eventSource.onmessage = event => {
     $("#sse-data").append(event.data); // 이부분을 토스트 팝업 형태로 표현하면 됨!
  };

  eventSource.onerror = error => {
    console.error("SSE error:", error);
    eventSource.close();
  };
</script>
</body>
</html>
반응형