追記: MSWではServer-Sent Eventsをモックするための正式サポートが追加されました。この記事もクレジットされていますが、現在はMSWのドキュメントを読むことをおすすめします。

Server-sent eventsは、サーバーからフロントエンドアプリケーションへイベントをストリーミングできるようにする仕組みです。WebSocketに似ていますが、サーバーからクライアントへの一方向の接続のみを提供する点が異なります。

ChatGPTのような生成AIソリューションでは、大規模言語モデルのレスポンスが生成されるたびにクライアントへストリーミングするためにServer-sent eventsが使われています。生成AIアプリケーションの人気に伴い、こうしたストリーミングされるレスポンスをどう扱うかは、一般的なREST APIとは異なる部分もあり、乗り越えるべき課題の一つとなっています。

Mock Service Workerは、さまざまなフレームワークやツール、環境間で再利用できるJavaScriptのAPIモックを作成するための人気のツールです。Mintelでは、Storybookやユニットテスト、その他の開発環境で使用するモックを作成するためにmswを利用しています。

mswはSSEイベントのモックをサポートしており、WebSocketのサポートはベータ版です。例えば、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イベントで応答します。各メッセージはフィールドと値を表すテキスト行からなり、フィールド名と値はコロンで区切られます。メッセージは2つの改行文字で区切られます。イベントストリームのメッセージ形式について詳しくはこちらをご覧ください。

また、mswでのストリーミングについても、レスポンスをレイテンシーストリームにパイプして遅延レスポンスを再現する方法の例と合わせて詳しく読むことができます。

EventSource APIの制限、たとえば認証用のカスタムリクエストヘッダーを指定できないといった問題に直面している場合は、fetch-event-sourceもチェックしてみてください。このモック手法はどちらでも同様に機能します。