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>