https://codebylhb.tistory.com/156

프론트 예시 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SSE 알림 테스트</title>
</head>
<body>
  <h1>SSE 알림 테스트</h1>
  <div id="messages"></div>
  <button onclick="startSse()">알림 수신 시작</button>
  <button onclick="sendAlarm()">알림 발생</button>
  <p>여기에 알림이 쌓여요</p>

  <script>
    let eventSource;

    function startSse() {
      eventSource = new EventSource('<http://localhost:3000/sse/check>');
      eventSource.onmessage = (event) => {
        const data = event.data;
        console.log(event.data);
        const messageElement = document.createElement('p');
        messageElement.innerText = `Received: ${data}`;
        document.getElementById('messages').appendChild(messageElement);
      };
      eventSource.onerror = () => {
        console.log('SSE 연결이 종료되었습니다.');
        eventSource.close();
      };
    }

    function sendAlarm() {
      fetch('<http://localhost:3000/sse/call>')
        .then(response => response.json())
        .then(data => console.log(data));
    }
  </script>
</body>
</html>