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

Spring Framework/Spring & Spring Boot

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

soogoori 2024. 5. 14. 15:08

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이므로 반드시 필요한 것은 아니었다.