在前端开发中，我们经常需要向服务器发送请求并获取响应。而随着 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 每隔一秒钟向客户端发送一个事件。
客户端监听事件流
在客户端，我们可以使用以下代码来监听事件流：
const eventSource = new EventSource('/sse');
eventSource.onmessage = (event) => {
console.log(event.data);
};在这个例子中，我们创建了一个 EventSource 对象，并指定了事件流的 URL。然后，我们可以使用 onmessage 事件监听事件流中的消息，并在控制台输出消息内容。
使用 SSE 实现处理请求的通用框架
使用 SSE 可以实现服务器主动向客户端推送数据的功能，但是在实际开发中，我们可能需要更加灵活的处理方式。下面，我们将使用 SSE 实现一个通用的请求处理框架。
服务器端设置事件流
在服务器端，我们可以使用以下代码来设置一个事件流：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
----------------------- ---- -- -
----- - -------- - - -------------------
-- --------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
------------------ -----
- ---- -
-------------------
----------
-
----------------
-------- ------------------ ---- -
-- -------
-- ---
-- --------
---------------- - - -------------------- - --------
-- ----
----------
-在这个例子中，我们首先判断请求的 URL 是否为 /sse，如果是，则设置响应头的 Content-Type 为 text/event-stream，并调用 handleRequest 函数处理请求。在 handleRequest 函数中，我们可以处理请求的逻辑，并向客户端发送事件。最后，我们需要调用 res.end() 完成请求。
客户端监听事件流
在客户端，我们可以使用以下代码来监听事件流：
function handleRequest(url, callback) {
const eventSource = new EventSource(url);
eventSource.onmessage = (event) => {
callback(JSON.parse(event.data));
};
}在这个例子中，我们定义了一个 handleRequest 函数，它接受一个 URL 和一个回调函数作为参数。在函数内部，我们创建了一个 EventSource 对象，并使用 onmessage 事件监听事件流中的消息。当收到消息时，我们将消息解析为 JSON 对象，并调用回调函数。
总结
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，而客户端则可以通过 EventSource 对象监听这些事件。使用 SSE 可以实现服务器主动向客户端推送数据的功能，并且可以使用 SSE 实现一个通用的请求处理框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e83c9eb4cecbf2d466f60