sync opennextjs/opennextjs-aws#792

Author: vicb

examples/e2e/pages-router/e2e/streaming.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from "@playwright/test";
+
+const SADE_SMOOTH_OPERATOR_LYRIC = `Diamond life, lover boy
+He move in space with minimum waste and maximum joy
+City lights and business nights
+When you require streetcar desire for higher heights
+No place for beginners or sensitive hearts
+When sentiment is left to chance
+No place to be ending but somewhere to start
+No need to ask, he's a smooth operator
+Smooth operator, smooth operator
+Smooth operator`;
+
+test("streaming should work in api route", async ({ page }) => {
+  await page.goto("/sse");
+
+  // wait for first line to be present
+  await page.getByTestId("line").first().waitFor();
+  const initialLines = await page.getByTestId("line").count();
+  // fail if all lines appear at once
+  // this is a safeguard to ensure that the response is streamed and not buffered all at once
+  expect(initialLines).toBe(1);
+
+  const seenLines: Array<{ line: string; time: number }> = [];
+  const startTime = Date.now();
+
+  // we loop until we see all lines
+  while (seenLines.length < SADE_SMOOTH_OPERATOR_LYRIC.split("\n").length) {
+    const lines = await page.getByTestId("line").all();
+    if (lines.length > seenLines.length) {
+      expect(lines.length).toBe(seenLines.length + 1);
+      const newLine = lines[lines.length - 1];
+      seenLines.push({
+        line: await newLine.innerText(),
+        time: Date.now() - startTime,
+      });
+    }
+    // wait for a bit before checking again
+    await page.waitForTimeout(200);
+  }
+
+  expect(seenLines.map((n) => n.line)).toEqual(SADE_SMOOTH_OPERATOR_LYRIC.split("\n"));
+  for (let i = 1; i < seenLines.length; i++) {
+    expect(seenLines[i].time - seenLines[i - 1].time).toBeGreaterThan(500);
+  }
+
+  await expect(page.getByTestId("video")).toBeVisible();
+});

examples/e2e/pages-router/src/pages/api/streaming/index.ts

@@ -0,0 +1,42 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const SADE_SMOOTH_OPERATOR_LYRIC = `Diamond life, lover boy
+He move in space with minimum waste and maximum joy
+City lights and business nights
+When you require streetcar desire for higher heights
+No place for beginners or sensitive hearts
+When sentiment is left to chance
+No place to be ending but somewhere to start
+No need to ask, he's a smooth operator
+Smooth operator, smooth operator
+Smooth operator`;
+
+function sleep(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ message: "Method not allowed" });
+  }
+
+  res.setHeader("Content-Type", "text/event-stream");
+  res.setHeader("Connection", "keep-alive");
+  res.setHeader("Cache-Control", "no-cache, no-transform");
+  res.setHeader("Transfer-Encoding", "chunked");
+
+  res.write(`data: ${JSON.stringify({ type: "start", model: "ai-lyric-model" })}\n\n`);
+  await sleep(1000);
+
+  const lines = SADE_SMOOTH_OPERATOR_LYRIC.split("\n");
+  for (const line of lines) {
+    res.write(`data: ${JSON.stringify({ type: "content", body: line })}\n\n`);
+    await sleep(1000);
+  }
+
+  res.write(`data: ${JSON.stringify({ type: "complete" })}\n\n`);
+
+  res.end();
+}

examples/e2e/pages-router/src/pages/sse/index.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type Event = {
+  type: "start" | "content" | "complete";
+  model?: string;
+  body?: string;
+};
+
+export default function SSE() {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [finished, setFinished] = useState(false);
+
+  useEffect(() => {
+    const e = new EventSource("/api/streaming");
+
+    e.onmessage = (msg) => {
+      console.log(msg);
+      try {
+        const data = JSON.parse(msg.data) as Event;
+        if (data.type === "complete") {
+          e.close();
+          setFinished(true);
+        }
+        if (data.type === "content") {
+          setEvents((prev) => prev.concat(data));
+        }
+      } catch (err) {
+        console.error(err, msg);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        padding: "20px",
+        marginBottom: "20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+      }}
+    >
+      <h1
+        style={{
+          fontSize: "2rem",
+          marginBottom: "20px",
+        }}
+      >
+        Sade - Smooth Operator
+      </h1>
+      <div>
+        {events.map((e, i) => (
+          <p data-testid="line" key={i}>
+            {e.body}
+          </p>
+        ))}
+      </div>
+      {finished && (
+        <iframe
+          data-testid="video"
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/4TYv2PhG89A?si=e1fmpiXZZ1PBKPE5"
+          title="YouTube video player"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        ></iframe>
+      )}
+    </div>
+  );
+}