<div id="readability-page-1" class="page"><div>
 
 <div id="SE-ab395b76-7947-4133-8310-20f79672b55c">
 SSE (Server Sent Event) 는 server =&gt; client 로 데이터를 보내는 단방향 통신이다. 즉, client 는 server 에 커넥션을 연결하고 server 에서 데이터를 보내주는것을 받을수만 있다.​SSE (Server Sent Event) 의 특징으로는 header 에 'Accept: text/event-stream' 를 적어줘야 한다.​장점 :<ul><li>클라이언트와 서버 연결 유지 및 실시간 메시지 전송</li><li>쉬운 구현<ul><li>client : JS 에서 API 제공<ul><li>js 의 EventSource 객체로 구현하면 server 와 연결이 끊길시 알아서 retry 시도</li></ul></li><li>backend : Springboot 에서도 SseEmitter 를 통해 쉽게 구현 가능</li></ul></li></ul>​단점 :<ul><li>단방향 통신</li></ul>​아래는 스프링 구현 코드​springboot :<ul><li><ul><li>produces = [MediaType.TEXT_EVENT_STREAM_VALUE] 꼭 필요</li><li>subscribe 시, SseEmitter 리턴해줘야 연결 유지됨</li><li>예제에서 사용한 CopyOnWriteArrayList 는 concurrentHashMap 과 같이 동시성을 해결해주는 List type (쓰기보다 읽기에 최적화)</li></ul></li></ul>
 </div> <div id="SE-1af20a44-b448-4859-9596-8334acb7c39a">
 package com.writer0713.practice.controller

import org.springframework.http.MediaType
import org.springframework.stereotype.Service
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter
import java.util.concurrent.CopyOnWriteArrayList

@RestController
class SseController(
 private val sseService: SseService,
) {
 @GetMapping("/sse/subscribe", produces = [MediaType.TEXT_EVENT_STREAM_VALUE])
 fun subscribe(): SseEmitter {
 val emitter = SseEmitter()
 sseService.addEmitter(emitter)

 val initialEvent =
 SseEmitter
 .event()
 .data("SSE connected")

 emitter.send(initialEvent)

 return emitter
 }

 @GetMapping("/sse/sendMessage")
 fun sendMessage(message: String) {
 sseService.sendEvent(message)
 }
}

@Service
class SseService {
 private val emitters = CopyOnWriteArrayList&lt;SseEmitter&gt;()

 fun addEmitter(emitter: SseEmitter) {
 emitters.add(emitter)
 emitter.onCompletion { emitters.remove(emitter) }
 emitter.onTimeout { emitters.remove(emitter) }
 }

 fun sendEvent(message: String) {
 for (emitter in emitters) {
 try {
 emitter.send(message)
 } catch (exception: Exception) {
 emitter.complete()
 emitters.remove(emitter)
 }
 }
 }
}

 </div> <div id="SE-12d79f90-153d-448d-9b72-8917b53aca41">
 curl --location 'http://localhost:8080/sse/subscribe' \
--header 'Accept: text/event-stream'
data:SSE connected

 </div> <div id="SE-705dc5e8-65b3-445e-9d56-ee91ec432a31">
 <ul><li>message send</li></ul>
 </div> <div id="SE-c0aca73d-2d40-4847-bcc5-4e4ad6f00b23">
 curl --location 'http://localhost:8080/sse/sendMessage?message=hello'
 </div> <div id="SE-f11afa11-887d-46bc-a0d9-1fb8fce15dd8">
 <ul><li>message receiving</li></ul>
 </div> <div id="SE-31cbbba6-bb0b-4531-a218-4665cd449598">
 curl --location 'http://localhost:8080/sse/subscribe' \
--header 'Accept: text/event-stream'
data:SSE connected

data:hello
 </div> </div></div>

나만의공간。

KIM JUNGHWAN

SSE (Server Sent Event) 는 server => client 로 데이터를 보내는 단방향 통신이다. 즉, client 는 server 에 커넥션을 연결하고 server 에서 데이터를 보내주는것을 받을수만 있다. SSE (Server Sent Event) 의 특징으로는 header 에 'Accept: text/event-stream' 를 적어줘야 한다. 장점 : 클라이언트와 서버 연결 유지 및 실시간 메시지 전송 쉬운 구현 client : JS 에서 API 제공 js 의 EventSource 객체로 구현하면 server 와 연결이 끊길시 알아서 retry 시도 backend : Springboot 에서도 SseEmitter 를 통해 쉽게 구현 가능 단점 : 단방향 통신 아래는 스프링 구현 코드 springboot : produces = [MediaType.TEX.......

[HTTP] SSE (w/ springboot)

댓글