本文介绍如何使用NPM包 sse 在前端应用程序中实现服务器发送事件（Server-Sent Events）的功能。通过本文，你将学习到：
- SSE是什么以及为什么要使用它
- 如何使用SSE在前端应用程序中接收服务器端的事件
- SSE的示例代码和最佳实践
简介
SSE是一种让服务器向客户端推送数据的Web API。与WebSocket不同，SSE只允许从服务器到客户端的单向通信，并且支持自动重连。这使得SSE成为适用于一些场景的有用工具，例如需要实时刷新数据的Web应用程序。
使用SSE
首先，我们需要在前端项目中安装sse模块。可以使用npm安装：
npm install sse
然后，我们需要创建一个新的EventSource对象并将其连接到服务器的SSE端点。
let eventSource = new EventSource('/sse-endpoint');这里的sse-endpoint是服务器上的SSE端点路由，可以在后端代码中定义。
接下来，我们需要监听eventSource对象的message事件来处理由服务器发送的事件。
eventSource.addEventListener('message', function(event) {
console.log('Received message:', event.data);
});当服务器发送一个事件时，它将触发message事件并将事件数据作为参数传递给回调函数。在这个示例中，我们只是将事件数据打印到控制台。
最后，在代码完成执行之后，我们需要手动关闭eventSource连接。
eventSource.close();
示例代码
下面是一个完整的使用SSE的示例代码。在此示例中，我们使用Node.js和Express框架来创建服务器端的SSE端点：
服务器端代码（Node.js）
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
-------------------------------- - ------------
------------------------ ------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
---------------- ----- -----------------------------------
-- ------
---
----- ------ - -----------------------
------------------- ---------- -
------------------- --------- -- ---- -------
---客户端代码（浏览器）
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
-------
------
------- ---------
---- --------------------
--------
--- ----------- - --- -----------------------------
--------------------------------------- --------------- -
----- ----------- - ------------------------------------
--------------------- -- -----------------------
---
--------------------------------------- ---------- -
--------------------
---
---------
-------
-------在这个示例中，我们在服务器端定义了一个SSE端点路由/sse-endpoint。当有客户端连接到该路由时，服务器将每秒钟向客户端发送一个包含当前时间的事件。在浏览器端代码中，我们创建了一个EventSource对象，并在message事件回调函数中将收到的数据添加到页面中。
最佳实践
以下是使用SSE的一些最佳实践：
- 当数据量较大时，避免使用SSE来推送数据。因为SSE只支持单向通信，如果客户端需要发送数据到服务器，那么WebSocket可能更适合。
- 在前端应用程序中使用SSE时，请确保正确处理错误和重连逻辑。
- 合理配置SSE超时时间。根据具体场景不同，可以考虑增加或减少SSE连接的超时时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50596