[Spring/Spring Boot] SSE (Server-Sent Events)와 EventSource 적용해보기

SSE (Server-Sent Events)란?

서버에서 클라이언트로 데이터를 비동기적으로 전송하는 기술이다. 서버가 클라이언트에게 지속적으로 데이터를 전송할 때 주로 사용된다.

 

또한 실시간 업데이트가 필요한 경우(주식 시세, 실시간 채팅, 알림 등)에 사용되며 HTTP 기반으로 웹 브라우저와 웹 서버 간의 단방향 통신을 가능하게 하므로 클라이언트는 서버에 요청을 보내지 않고도 서버로부터 데이터를 받을 수 있고, 클라이언트는 웹 브라우저의 EventSource API를 사용해 서버로부터 이벤트를 수신하고 처리한다.

 

프로젝트에서 앨런AI에게 질문을 요청하면 응답을 실시간으로 받기 위해 사용하고자 했다.

실제로 프로젝트에서 어떻게 구현했는지 알아보자 !

 

 

 

WebClientService 코드 구현 - 비동기로 외부 API 호출

🔹 WebClientService 

@RequiredArgsConstructor
@Service
@Slf4j
public class WebClientService {

    @Value("${alan.key}")
    private String alanId;
    private final WebClient webClient = WebClient.builder().build();
    private final ObjectMapper objectMapper = new ObjectMapper().configure(JsonParser.Feature.ALLOW_SINGLE_QUOTES, true);

    public Flux<AlanResponseDto> getResponse(String content){
        return webClient.get()
                .uri("https://kdt-api-function.azurewebsites.net/api/v1/question/sse-streaming",
                        uriBuilder -> uriBuilder
                        .queryParam("content", content)
                        .queryParam("client_id", alanId)
                        .build())
                .retrieve()
                .bodyToFlux(String.class)
                .flatMap(this::parseJsonToResponseDto);
    }

    private Flux<AlanResponseDto> parseJsonToResponseDto(String jsonString){
        try {
            // JSON 문자열을 ResponseDto 객체로 파싱
            AlanResponseDto responseDto = this.objectMapper.readValue(jsonString, AlanResponseDto.class);
            return Flux.just(responseDto);
        } catch (JsonProcessingException e) {
            return Flux.error(e);
        }
    }
}

 

이스트소프트에서 제공한 앨런AI API를 WebClient를 활용해 비동기로 요청하고, 응답을 받아 문자열 스트림으로 변환한다.  

문자열로 변환하는 이유는 해당하는 JSON 응답값이 큰따옴표가 아닌 작은따옴표로 구성되어있기 때문이다. 

 

그러므로 각 parseJsonToResponseDto() 메서드를 통해서 작은따옴표로 구성된 JSON 문자열을 객체로 파싱하는 과정을 거쳐야하고 최종적으로는 Flux<AlanResponseDto>로 변환한다. 

 

@Getter
public class AlanResponseDto {
	@JsonProperty(value = "type")
	private String type;

	@JsonProperty(value = "data")
	private Data data;

	@Getter
	public static class Data {
		@JsonProperty(value = "content")
		private String content;

		@JsonProperty(value = "name")
		private String name;

		@JsonProperty(value = "speak")
		private String speak;
	}
}

AlanResponseDto는 위와 같다. 응답값 구조에 맞춰 작성하였다. 

응답값 구조

 

 

 

SseController 코드 구현

🔹 SseController 

@RequiredArgsConstructor
@RestController
@RequestMapping("/api")
@Slf4j
public class SseController {

    private final WebClientService webClientService;

    @GetMapping("/alan")
    public Flux<ServerSentEvent<AlanResponseDto>> getAlanResponse(HttpServletResponse response, @RequestParam String content){
        response.setContentType("text/event-stream");
        return webClientService.getResponse(content)
                .doOnNext(data -> {
                    log.info("Received data: {}", data.getData().getContent());
                })
                .map(data -> ServerSentEvent.<AlanResponseDto>builder()
                        .data(data)
                        .build())
                .delayElements(Duration.ofMillis(50));
    }
}

WebClientService를 통해 얻은 값을 SSE와 WebFlux를 활용해 실시간으로 사용자에게 보여줄 수 있도록 하는 코드이다. 

MIME 타입을 text/event-stream으로 지정하고, map을 통해 전송할 데이터를 설정하고 ServerSentEvent로 매핑한다. 

 

 

 

ServerSentEvent 클래스를 살펴보면 다음과 같은 필드를 포함하며

 

메서드를 가지고 있다. 

Representation for a Server-Sent Event for use with Spring's reactive Web support. Flux<ServerSentEvent> or Observable<ServerSentEvent> is the reactive equivalent to Spring MVC's SseEmitter.

 

참고자료에 위와 같은 내용이 있는 것으로 보아 Spring MVC의 SseEmitter와 유사하다는 것을 알 수 있다. 

SseEmitter는 동기식 및 블로킹 방식의 Spring MVC에서 SSE를 구현하기 위한 클래스이며,

Flux는 비동기 및 논블로킹 방식의 Spring WebFlux에서 SSE를 구현하기 위한 반응형 스트림이므로 더 많은 동시성을 지원하며 리소스를 효율적으로 사용한다. 

---

주어진 event, id, data 필드는 Nullable이므로 반드시 필요한 것은 아니었다. 

JavaScript를 활용해 데이터를 불러오면서 확실히 쓰임새를 알게 되었다. 

진행한 프로젝트에서는 딱히 id, event가 없어도 되는 필드였기 때문에 생략했고, data만 사용해 해당 필드에 응답값을 넣어주었다. 

 

 

 

완성된 화면

 

 

 

 

 

 

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/EventSource

https://tecoble.techcourse.co.kr/post/2022-10-11-server-sent-events/

https://www.baeldung.com/spring-server-sent-events

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/http/codec/ServerSentEvent.html