반응형
설명
서버에서 클라이언트로 데이터를 수신하는 방법 (단방향 통신)
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>반응형
'개발 > etc' 카테고리의 다른 글
| Vault (1) | 2023.02.07 |
|---|---|
| 헥사고날 아키텍처 (Hexagonal Architecture) (2) | 2022.09.25 |
| JWT (JSON WEB TOKEN) (0) | 2021.12.22 |
| Rest API (0) | 2021.06.02 |
| HTTP관련 (https, spdy, ajax, websocket) (0) | 2018.12.09 |
