在现代 Web 应用程序中，实时数据更新变得越来越重要。为了实现实时数据更新，我们通常使用轮询或 WebSocket。但是，在某些情况下，这些方法可能不是最佳选择。这时，Server-sent Events(SSE) 就是一个很好的选择。
SSE 是一种基于 HTTP 的协议，它允许服务器向客户端推送事件。SSE 建立在长轮询的基础上，但是，它比长轮询更加高效且易于实现。在本文中，我们将学习如何使用 SSE 在单页应用程序中实现实时数据更新。
SSE 的基本原理
SSE 的基本原理很简单。客户端向服务器发送一个 HTTP 请求，请求打开一个持久性连接。一旦连接建立，服务器就可以向客户端发送事件。这些事件是纯文本数据，可以是任何格式。客户端接收到事件后，可以使用 JavaScript 处理这些事件。
SSE 的优点在于它的轻量级和易于使用。它不需要像 WebSocket 那样复杂的协议和库，而且它可以使用标准的 HTTP 服务器和客户端库来实现。
实现 SSE
现在，我们来看看如何实现 SSE。首先，我们需要在服务器端设置 SSE。在 Node.js 中，我们可以使用 sse-express 库来实现 SSE。下面是一个简单的 SSE 服务器示例：
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
------------------ ------------- ----- ---- -- -
-------------- -- -
--------------- ----------- - - ---------- - --------
-- ------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在上面的代码中，我们创建了一个 SSE 服务器，并在 /events 路径上监听请求。服务器每秒钟向客户端发送一个事件，事件的名称为 ping，事件的数据为当前时间戳。
现在，我们需要在客户端上监听 SSE 事件。在单页应用程序中，我们可以使用 JavaScript 来监听 SSE 事件。下面是一个简单的 SSE 客户端示例：
----- ----------- - --- ----------------------- ------------------------------------ ------- -- - ------------------------ ---
在上面的代码中，我们创建了一个 EventSource 对象，并在 /events 路径上监听 SSE 事件。当服务器发送一个 ping 事件时，客户端会将事件的数据输出到控制台。
SSE 的应用
现在，我们已经学习了如何实现 SSE。那么，在实际应用中，我们如何使用 SSE 呢？下面是一些 SSE 的应用场景：
实时通知：当某个事件发生时，服务器可以向客户端发送通知。例如，当有新的消息或评论时，服务器可以向客户端发送通知。
实时数据更新：当数据发生变化时，服务器可以向客户端发送更新。例如，当股票价格发生变化时，服务器可以向客户端发送最新的价格。
实时聊天：当用户发送消息时，服务器可以向所有在线用户发送消息。这样，所有在线用户都可以看到实时的聊天内容。
以上是 SSE 的一些应用场景。当然，SSE 还可以应用于其他场景，具体应用取决于你的需求。
总结
在本文中，我们学习了如何使用 SSE 在单页应用程序中实现实时数据更新。我们了解了 SSE 的基本原理和应用场景，并提供了一个简单的 SSE 示例。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66148a56d10417a2224c5515