在前端开发中，我们经常需要向服务器发送请求并获取响应。而随着 Ajax 技术的发展，我们可以使用 XMLHttpRequest 对象来实现异步请求。但是，在某些场景下，我们需要实现服务器主动向客户端推送数据的功能。这时候，Server-Sent Events 就成为了一个不错的选择。
什么是 Server-Sent Events
Server-Sent Events（SSE）是一种基于 HTTP 的服务器推送技术。它允许服务器向客户端发送事件流，而客户端则可以通过 EventSource 对象监听这些事件。
与 WebSocket 不同，SSE 是一种单向通信方式，即数据只能由服务器向客户端推送，而客户端不能主动向服务器发送数据。但是，SSE 的优势在于它使用的是 HTTP 协议，可以避免一些防火墙和代理的问题。
如何使用 Server-Sent Events
在使用 SSE 之前，我们需要先在服务器端设置一个事件流，然后在客户端监听这个事件流。
服务器端设置事件流
在服务器端，我们可以使用以下代码来设置一个事件流：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- -----------
-------------- -- -
---------------- - - --- -------------------- - --------
-- ------
----------------在这个例子中，我们创建了一个 HTTP 服务器，并设置了响应头的 Content-Type 为 text/event-stream，这告诉浏览器这是一个事件流。然后，我们使用 setInterval 每隔一秒钟向客户端发送一个事件。
客户端监听事件流
在客户端，我们可以使用以下代码来监听事件流：
----- ----------- - --- -------------------- --------------------- - ------- -- - ------------------------ --
在这个例子中，我们创建了一个 EventSource 对象，并指定了事件流的 URL。然后，我们可以使用 onmessage 事件监听事件流中的消息，并在控制台输出消息内容。
使用 SSE 实现处理请求的通用框架
使用 SSE 可以实现服务器主动向客户端推送数据的功能，但是在实际开发中，我们可能需要更加灵活的处理方式。下面，我们将使用 SSE 实现一个通用的请求处理框架。
服务器端设置事件流
在服务器端，我们可以使用以下代码来设置一个事件流：
----- ---- - ----------------
----- --- - ---------------
----------------------- ---- -- -
----- - -------- - - -------------------
-- --------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
------------------ -----
- ---- -
-------------------
----------
-
----------------
-------- ------------------ ---- -
-- -------
-- ---
-- --------
---------------- - - -------------------- - --------
-- ----
----------
-在这个例子中，我们首先判断请求的 URL 是否为 /sse，如果是，则设置响应头的 Content-Type 为 text/event-stream，并调用 handleRequest 函数处理请求。在 handleRequest 函数中，我们可以处理请求的逻辑，并向客户端发送事件。最后，我们需要调用 res.end() 完成请求。
客户端监听事件流
在客户端，我们可以使用以下代码来监听事件流：
-------- ------------------ --------- -
----- ----------- - --- -----------------
--------------------- - ------- -- -
---------------------------------
--
-在这个例子中，我们定义了一个 handleRequest 函数，它接受一个 URL 和一个回调函数作为参数。在函数内部，我们创建了一个 EventSource 对象，并使用 onmessage 事件监听事件流中的消息。当收到消息时，我们将消息解析为 JSON 对象，并调用回调函数。
总结
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，而客户端则可以通过 EventSource 对象监听这些事件。使用 SSE 可以实现服务器主动向客户端推送数据的功能，并且可以使用 SSE 实现一个通用的请求处理框架。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658e83c9eb4cecbf2d466f60