phpsse网页推送SSE新闻推送在Nextjs前端框架中的应用

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。

phpsse网页推送SSE新闻推送在Nextjs前端框架中的应用 React