在 Web 应用中，实时通知推送功能已经成为了必不可少的一部分。而 SSE（Server-Sent Events）则是一种能够实现 Web 应用通知推送的技术方案。本文将介绍 SSE 的基本原理和使用方法，帮助读者快速实现 Web 应用的通知推送功能。
SSE 的基本原理
SSE 是一种浏览器与服务器之间实现服务器主动向浏览器推送消息的技术。与传统的 Ajax 请求不同，SSE 的通信是基于 HTTP 的长连接，也就是说，一旦建立了连接，服务器就可以随时向浏览器推送消息，而不需要浏览器发起请求。
SSE 的基本原理是，浏览器通过创建一个 EventSource 对象与服务器建立连接，服务器通过发送一系列的事件消息给浏览器，浏览器通过监听这些事件消息来获取服务器推送的数据。
使用 SSE 实现通知推送功能
下面我们通过一个简单的示例来演示如何使用 SSE 实现通知推送功能。
服务端代码
首先，我们需要在服务端实现 SSE 的功能。代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- -----------------------------------
-- ------
---
------------------- -- -- -
------------------- -- ------- -- ------------------------
---上面的代码中，我们创建了一个 HTTP 服务器，并在每秒钟向客户端发送一个包含当前时间的 SSE 事件消息。
客户端代码
接下来，我们需要在客户端实现 SSE 的功能。代码如下：
const source = new EventSource('http://localhost:3000');
source.addEventListener('message', (event) => {
console.log(event.data);
});上面的代码中，我们通过创建一个 EventSource 对象与服务端建立连接，并在接收到消息时打印出消息内容。
运行示例
现在，我们可以通过运行上面的服务端代码和客户端代码来查看示例的效果了。在终端中运行以下命令：
node server.js
然后，在浏览器中打开以下 URL：
http://localhost:3000
如果一切正常，你应该能够看到浏览器控制台中输出当前时间的消息。
总结
通过上面的示例，我们可以看到，使用 SSE 实现 Web 应用的通知推送功能非常简单。只需要在服务端发送 SSE 事件消息，然后在客户端监听这些事件消息即可。SSE 技术的优点是，与传统的 Ajax 请求相比，它能够更快地向浏览器推送数据，同时也能够更有效地减轻服务器的负载。因此，对于需要实现实时通知推送功能的 Web 应用来说，SSE 技术是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cddf7badd4f0e0ff705ab5