업데이트: MSW에 Server-Sent Events 모킹을 위한 정식 지원이 추가되었습니다 — 이 글도 기여로 인정받았지만, 이제는 MSW 문서를 읽어보시는 것이 더 좋습니다.

Server-Sent Events는 서버에서 프론트엔드 애플리케이션으로 이벤트를 스트리밍할 수 있게 해줍니다. 웹소켓과 유사하지만 서버에서 클라이언트로의 단방향 연결만 제공합니다.

ChatGPT와 같은 생성형 AI 솔루션은 거대 언어 모델의 응답이 생성되는 동안 이를 클라이언트로 스트리밍하기 위해 Server-Sent Events를 활용합니다. 생성형 AI 애플리케이션의 인기로 인해 일반적인 REST API와는 다른 이러한 스트리밍 응답을 다루는 방법을 파악하는 것이 해결해야 할 과제 중 하나가 되었습니다.

Mock Service Worker는 다양한 프레임워크, 도구 및 환경에서 재사용할 수 있는 JavaScript API 목을 작성하기 위한 인기 있는 도구입니다. Mintel에서는 Storybook, 유닛 테스트 및 기타 개발 환경에서 사용할 목을 작성하기 위해 msw를 사용합니다.

msw는 SSE 이벤트 모킹을 지원하며, 웹소켓 지원은 베타 단계에 있습니다. 예를 들어 Server-Sent Events 연결을 여는 다음과 같은 프론트엔드 코드가 있다고 가정해 보겠습니다:

const source = new EventSource("http://example.com/stream");

source.onmessage = (event) => {
  console.log(`Message: ${event.data}`);
};

msw 목 핸들러는 다음과 같이 작성할 수 있습니다:

import { http, HttpResponse } from "msw";

const encoder = new TextEncoder();

const handler = http.get('http://example.com/stream', () => {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(
        encoder(
          `event:some-event\ndata:some data\n\n`
        )
      );
      controller.close();
    },
  });

  return new HttpResponse(stream, {
    headers: {
      "Content-Type": "text/event-stream",
    }.
  });
});

이 목은 event.data에 "some data"를 담고 있는 단일 some-event 이벤트로 응답합니다. 각 메시지는 필드와 값을 나타내는 텍스트 줄을 포함해야 하며, 필드 이름과 값은 콜론으로 구분됩니다. 메시지는 두 개의 개행 문자로 구분됩니다. 이벤트 스트림 메시지 형식에 대해 더 자세히 알아볼 수 있습니다.

msw를 이용한 스트리밍에 대해서도 더 알아볼 수 있으며, 지연된 응답을 재현하기 위해 응답을 지연 스트림으로 파이핑하는 방법에 대한 예시도 확인할 수 있습니다.

EventSource API의 한계, 예를 들어 인증을 위해 커스텀 요청 헤더를 제공할 수 없는 문제에 부딪혔다면 fetch-event-source도 확인해 보세요. 이 모킹 방식은 두 경우 모두에서 동작합니다.