什么是 Server Sent Events？
Server Sent Events（SSE）是一种服务器向客户端推送流式数据的技术。相比于传统的 HTTP 请求，SSE 可以实现服务器与客户端的实时双向通信，使得客户端可以接收到实时的数据更新。
Next.js 中的 SSE
Next.js 是一个基于 React 的 SSR 框架，它提供了一种简单的方式来实现 SSE。在 Next.js 中，我们可以通过 response.write() 方法向客户端发送数据。下面是一个简单的 SSE 示例：
------ ------- -------- -------- ---- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
---------------- ----- ----------------------------
-- ------
-在这个示例中，我们首先设置了响应头，包括 Content-Type、Cache-Control 和 Connection。然后，我们使用 setInterval() 方法每秒钟向客户端发送一条数据。
SSE 的应用场景
SSE 可以用于实现实时通知、在线聊天、实时数据更新等应用场景。下面是一个简单的在线聊天应用的示例：
------ - ---------- -------- - ---- --------
-------- ---------- -
----- ---------- ------------ - -------------
----- ------ -------- - -------------
------------ -- -
----- ----------- - --- -------------------------
--------------------- - ------- -- -
----- ------- - -----------------------
---------------------- -- ------------- ----------
--
------ -- -- -
--------------------
--
-- ----
----- ----------- - -- -- -
------------------ -
------- -------
----- ---------------- ---- ---
-------- -
--------------- -------------------
--
---------- -- -
------------
---
--
------ -
-----
----
----------------------- -- -
--- ------------------------------------
---
-----
------ ----------- ------------ ------------- -- ------------------------ --
------- -----------------------------------
------
--
-在这个示例中，我们首先通过 useEffect() 方法创建了一个 SSE 的连接。在 onmessage 方法中，我们接收到了服务器发送的消息，并将其添加到了消息列表中。
同时，我们也提供了一个发送消息的方法 sendMessage()。在这个方法中，我们通过 fetch() 方法向服务器发送了一个 POST 请求，并将消息内容以 JSON 格式传递给服务器。
总结
SSE 是一种实现实时通信的技术，它可以用于实现在线聊天、实时数据更新等应用场景。在 Next.js 中，我们可以使用 response.write() 方法来实现 SSE。同时，我们也可以使用 React 的 useEffect() 方法来创建 SSE 的连接，并使用 fetch() 方法向服务器发送消息。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cc5f63add4f0e0ff5c9730