如何在部署在 Vercel 上的 Next.js 无服务器函数中使用 EventSource（服务器发送事件）？

Question

如何使用部署在Vercel上的无服务器函数使下面的示例正常工作？由于一些依赖项（Firebase）需要node.js，因此我无法使用边缘函数，并且我找不到任何关于如何在next.js 无服务器函数中使用eventsource或是否可能的资源。

来源：https://github.com/Nutlope/twitterbio/blob/main/pages/api/generate.ts

/api/generate:

import { OpenAIStream, OpenAIStreamPayload } from "../../utils/OpenAIStream";

if (!process.env.OPENAI_API_KEY) {
  throw new Error("Missing env var from OpenAI");
}

export const config = {
  runtime: "edge",
};

const handler = async (req: Request): Promise<Response> => {
  const { prompt } = (await req.json()) as {
    prompt?: string;
  };

  if (!prompt) {
    return new Response("No prompt in the request", { status: 400 });
  }

  const payload: OpenAIStreamPayload = {
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: prompt }],
    temperature: 0.7,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
    max_tokens: 200,
    stream: true,
    n: 1,
  };

  const stream = await OpenAIStream(payload);
  return new Response(stream);
};

export default handler;

OpenAIStream.ts:

import {
  createParser,
  ParsedEvent,
  ReconnectInterval,
} from "eventsource-parser";

export type ChatGPTAgent = "user" | "system";

export interface ChatGPTMessage {
  role: ChatGPTAgent;
  content: string;
}

export interface OpenAIStreamPayload {
  model: string;
  messages: ChatGPTMessage[];
  temperature: number;
  top_p: number;
  frequency_penalty: number;
  presence_penalty: number;
  max_tokens: number;
  stream: boolean;
  n: number;
}

export async function OpenAIStream(payload: OpenAIStreamPayload) {
  const encoder = new TextEncoder();
  const decoder = new TextDecoder();

  let counter = 0;

  const res = await fetch("https://api.openai.com/v1/chat/completions", {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
    },
    method: "POST",
    body: JSON.stringify(payload),
  });

  const stream = new ReadableStream({
    async start(controller) {
      // callback
      function onParse(event: ParsedEvent | ReconnectInterval) {
        if (event.type === "event") {
          const data = event.data;
          // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
          if (data === "[DONE]") {
            controller.close();
            return;
          }
          try {
            const json = JSON.parse(data);
            const text = json.choices[0].delta?.content || "";
            if (counter < 2 && (text.match(/\n/) || []).length) {
              // this is a prefix character (i.e., "\n\n"), do nothing
              return;
            }
            const queue = encoder.encode(text);
            controller.enqueue(queue);
            counter++;
          } catch (e) {
            // maybe parse error
            controller.error(e);
          }
        }
      }

      // stream response (SSE) from OpenAI may be fragmented into multiple chunks
      // this ensures we properly read chunks and invoke an event for each SSE event stream
      const parser = createParser(onParse);
      // https://web.dev/streams/#asynchronous-iteration
      for await (const chunk of res.body as any) {
        parser.feed(decoder.decode(chunk));
      }
    },
  });

  return stream;
}

- GorvGoyl

Answer 1

你可以在无服务器函数中使用普通的`res.write()`和`res.end()`。

步骤：

- 使用`eventsource-parser`包将OpenAI响应作为流进行解析，提取内容。 - 在`onParse`回调中，你可以使用`res.write()`将响应流式传输给客户端，并在`data: [DONE]`时结束响应，就像OpenAI在他们的文档中所提到的那样。

我在我的项目中应用了这种方法，作为使用边缘函数的替代方式。求职信生成器。 你可以在存储库中找到更多详细信息和代码。

- `src/utils/fetchOpenAIAPI.ts`用于获取OpenAI API。 - `src/utils/OpenAIStreamForServerless.ts`用于将响应流式传输给客户端。

希望对你有所帮助。

- Mohammed