在前端开发中，我们经常需要将服务器端的数据及时通知到客户端，实现实时的推送效果。传统的 Web 客户端通常使用轮询或长连接等方式实现这个目的，但这些方案都有一些问题，比如轮询会增加服务器负担，长连接容易断开等。
这里介绍一种基于 Server-sent Events（简称为 SSE）的推送通知方案，它可以实现服务器主动向客户端推送数据，同时不占用过多的网络资源和服务器负担。
SSE 原理介绍
SSE 是 HTML5 中引入的一种针对即时通讯的浏览器与服务器间的通讯机制，它基于 HTTP 协议，利用服务器发送消息给客户端的方式实现实时推送。
当一个 SSE 连接建立后，服务器可以向该连接发送一系列的事件消息，浏览器通过监听这些事件消息，来实现实时更新数据的效果，这些事件消息可以携带不同的数据类型和数据格式，比如文本格式、JSON 格式等。
SSE 建立连接的过程类似于常规的 AJAX 调用 :
const eventSource = new EventSource('/sse');其中，/sse 是 SSE 连接的端点，服务器在该端点处理 SSE 连接的请求，返回的数据需要遵循特定的格式。
在客户端建立 SSE 连接后，我们需要监听 message 事件来处理服务器发送的消息：
eventSource.addEventListener('message', function(event) {
console.log(event.data);
}, false);在服务器端返回数据的时候，需要遵守特定的规范，比如：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('data:This is a message\n\n');其中，Content-Type 表示返回的数据类型，Cache-Control 表示不缓存该数据，Connection 表示使用 keep-alive 连接。在每个消息的末尾要加上两个换行符来表示消息的结束。
基于 SSE 的推送通知方案
基于 SSE 实现推送通知的方案，可以应用于多种业务场景，比如在线聊天、股票行情、实时报警等。这里以在线聊天为例，介绍如何使用 SSE 来实现实时推送消息的效果。
服务器端代码
首先，我们需要在服务器端实现 SSE 的连接和消息推送的逻辑，可以使用 Node.js 来实现这个功能，代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
---------------------
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- --- - --- ----------------------
---------------- -------------
-- ------
- ---- -
------------------ -
--------------- ------------
---
-----------
------
------
---------- ------------
-------
------
------- ---- ------------
---- ----------------
--------
----- ----------- - --- --------------------
--------------------------------------- --------------- -
----- ---- - --------------------------------
-------------- -- --------------------------
-- -------
---------
-------
-------
---
-
--------------- -- -- -
---------------------- -- ---- -------
---在该代码中，我们创建了一个 HTTP 服务，监听 3000 端口的请求。当客户端请求 /sse 时，我们在建立 SSE 连接后，每隔 1 秒向客户端推送一个当前时间的消息。当客户端请求其他路径时，我们返回一个简单的聊天页面。该页面监听 /sse 连接的消息事件，并在接收到消息时，将消息内容显示在聊天界面上。
客户端代码
在客户端实现推送通知的功能，我们只需要使用常规的 AJAX 调用即可：
-- -------------------- ---- -------
--------
----- -------
---- ----------------
----- ----- ----- ----------
-------- -------------- -
------------------
--
------ ------------- ------- ---- -
--------------------- ----------------
-
---当服务器更新了新的数据时，SSE 会自动向客户端发送推送消息，通过事件监听就可以在客户端显示实时更新的数据。
总结
本文介绍了基于 SSE 实现实时推送通知的方案，通过这种方案可以实现不占用过多网络资源的实时更新数据。它可以应用于多种业务场景中，比如在线聊天、股票行情、实时报警等。希望本文能够对您在实现实时推送时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e900348841e9894b156e6