框架消息SSEjs(服务端客户端大眼数据不需要)「serveless框架」

如题，最近歪哥项目中需要用到实时消息推送，项目使用了React+Next.js框架，然后没有单独的服务端，用了nodejs服务与前端部署在一起
需求不复杂，主要是服务端需要在特定时机向客户端推送实时数据，说到推送，我们首先可能会想到火热的WebSocket，但SSE比WebSocket轻量，虽然不能双向通信，但巧的是需求中就是单向的，足够用了
SSE&Next.jsSSE这种成熟的技术自然是不缺资料，但现在是在Next.js框架下的服务端使用，相关资料并不多，而且项目中的Next.js还是使用了比较新的App Router的路由方式，参考资料就更不好找了，几经周折，歪哥也是成功摸索出来了，下面分享给大家
客户端客户端集成不复杂，下面是示例代码

useEffect(() => {    const eventSource = new EventSource('/api/demo/push');    const handler = (event: MessageEvent<any>) => {      let data = JSON.parse(event.data) as DemoData      // 业务逻辑      ...    }    eventSource.addEventListener("DEMO_EVENT", handler);    return () => {      eventSource.removeEventListener("DEMO_EVENT", handler);    }  }, [])

服务端服务端的话最关键就是要把数据封装成事件流，SSE中支持的协议是GET请求，传递参数的话有些麻烦，可以传递路径参数，歪哥这里暂时不需要
下面是简单示例，这里每一秒钟向客户端推送一条数据

export async function GET(req: Request) {  let responseStream = new TransformStream();  const writer = responseStream.writable.getWriter();  const encoder = new TextEncoder();  let eventId = 0;  const intervalId = setInterval(async () => {    const data = await getDataFromDB();    const eventData = JSON.stringify(data);    const eventName = "DEMO_EVENT";    writer.write(encoder.encode(`event: ${eventName}\n`));    writer.write(encoder.encode(`id: ${eventId}\n`));    writer.write(encoder.encode(`data: ${eventData}\n\n`));    eventId++;    if (eventId >= 3600) {      clearInterval(intervalId);      writer.close();    }  }, 1000);  return new Response(responseStream.readable, {    headers: {      "Content-Type": "text/event-stream",      "Connection": "keep-alive",      "Cache-Control": "no-cache, no-transform",    },  });}

例子中有一个定时器，如果里面需要读取数据库或网络数据的话，记得加异步关键字async，然后数据流就按照SSE的数据格式，写好id、event、data就行啦
最后记得设置header，主要是content-type
这里面歪哥为了防止出现异常导致推送没有正确停止，设置了最长推送一个小时就关闭流，可能不需要或者有更好的方法，这个看大家实际情况了
总结歪哥之前用WebSocket比较多，SSE用的少，有意思的是，最近很火的大模型对话中，AI生成回答的底层传输协议也是大量使用SSE，包括ChatGPT这种
想想也是有道理，大模型回答本来就是一个个token的生成，并不是一下子把一段回复文本都放出来，天然就是这种推送的机制，SSE比较轻量，这种服务端向客户端单向推送场景使用再合适不过了，所以大家还是有必要了解一下的