在现代 Web 应用程序中，实时通知是一个必不可少的功能。通过实时通知，用户能够及时收到重要信息，如新消息、通知和更新等。Server-sent Events (SSE) 是一种实现实时通知的技术，它提供了一种简单而基于 Web 的方式，用于在客户端和服务器之间进行实时通信。在本文中，我们将介绍 SSE 的基本概念和使用方法，并提供一个示例来演示如何在 Web 应用程序中使用 SSE 实现实时通知功能。
SSE 的基本概念
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送实时消息。与传统的 Ajax 请求不同，SSE 使用单个 HTTP 连接，该连接保持打开状态，直到服务器发送消息或连接超时。这种方式使得 SSE 更加高效和可靠，因为它避免了频繁的连接和断开操作。
在 SSE 中，服务器发送的消息是一个简单的文本格式，其中包含一个或多个字段。每个字段都由一个字段名和一个字段值组成，它们之间用冒号分隔。消息以两个换行符结尾。以下是一个示例 SSE 消息：
data: Hello, world! id: 12345 event: message
在上面的示例中，data 字段包含消息的正文，id 字段包含一个唯一的标识符，event 字段包含消息的类型。客户端可以根据这些字段来处理消息，并采取相应的措施，例如将消息显示在用户界面上。
使用 SSE 实现实时通知功能
使用 SSE 实现实时通知功能非常简单。客户端只需要创建一个 EventSource 对象，然后将其连接到服务器上的 SSE 端点。服务器可以通过该端点向客户端发送消息，并且客户端可以通过监听 message 事件来处理这些消息。以下是一个示例：
-- -------------------- ---- ------- -- -- ----------- -- ----- ------ - --- ------------------------------ -- -- ------- -- ---------------------------------- ----- -- - ----- ---- - ----------------------- -- ---- --------------------- -------- ------------------ ---
在上面的示例中，客户端创建了一个 EventSource 对象，并将其连接到 /notifications 端点。服务器可以使用该端点向客户端发送消息。当客户端收到消息时，它将触发 message 事件，并将消息的正文作为事件的 data 属性传递给事件处理程序。在此示例中，我们将消息的正文解析为 JSON，然后将其记录到控制台中。
服务器端的实现也非常简单。它只需要创建一个 SSE 端点，并将消息发送到连接到该端点的客户端。以下是一个示例：
-- -------------------- ---- -------
-- -- --- --
------------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
-------------- -- -
----- ---- - -
-------- ------- -------
--
---------------- ------------------------------
-- ------
---在上面的示例中，服务器创建了一个 /notifications 端点，并将其响应头设置为 SSE 格式。然后，它使用 setInterval 函数定期发送消息。每次发送消息时，服务器将消息的正文作为 SSE 格式写入响应流中。客户端将收到这些消息，并通过 message 事件处理程序来处理它们。
结论
使用 SSE 实现实时通知功能非常简单，同时也非常高效和可靠。通过 SSE，我们可以在 Web 应用程序中实现各种实时通知功能，例如新消息、通知和更新等。在本文中，我们介绍了 SSE 的基本概念和使用方法，并提供了一个示例来演示如何在 Web 应用程序中使用 SSE 实现实时通知功能。我们希望这篇文章对你有所帮助，并能够在你的 Web 开发工作中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67613f5103c3aa6a560bfe92