随着 Web 应用的不断发展，实时通信已经成为了现代 Web 应用的重要特性之一。在传统的 Web 应用中，客户端需要不断地向服务器发起请求来获取最新的数据，而这种轮询方式会增加服务器的负担和网络的延迟。为了解决这个问题，Server-Sent Events（SSE）应运而生，它可以让服务器向客户端推送实时数据，从而实现实时通信。
本文将介绍如何使用 Node.js 和 SSE 实现实时消息推送。我们将首先讲解 SSE 的基本原理和用法，然后使用一个简单的示例来演示如何在 Node.js 中使用 SSE 实现实时消息推送。
SSE 基本原理和用法
SSE 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端推送实时数据。SSE 的基本原理是客户端向服务器发送一个 HTTP 请求，服务器在响应中使用特殊的 MIME 类型 text/event-stream 来推送数据。客户端通过监听 onmessage 事件来接收服务器推送的数据。
SSE 支持以下三种类型的消息：
- 注释消息：以
:开头的消息，用于在连接建立后向客户端发送注释，可以用来验证连接是否正常。 - 事件消息：以
event:开头的消息，用于指定事件的名称。 - 数据消息：以
data:开头的消息，用于指定要推送的数据。
以下是一个简单的 SSE 示例：
-- -------------------- ---- -------
--------- -----
------
------
---------- ----------
-------
------
---- --------------------
--------
----- ----------- - --- --------------------
--------------------- - --------------- -
----- -------- - ------------------------------------
----- ---- - -----------------------
----- ------- - ------------------------------
----------------- - -------------
------------------------------
--
---------
-------
-------在上面的示例中，我们创建了一个 EventSource 对象，并指定了服务器的 SSE 接口 /sse。然后我们监听 onmessage 事件，在事件处理函数中将服务器推送的数据添加到页面上。
在服务器端，我们需要使用特殊的 MIME 类型 text/event-stream 来向客户端推送数据。以下是一个使用 Node.js 和 Express 框架实现 SSE 的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- -------- - --------- -------- ------- ----------
--- -- - --
----- ---------- - -------------- -- -
-- ---------------- --- -- -
--------------------------
----------
-------
-
----- ------- - -----------------
-------------- ----------
----------------- ------------
---------------- ------------------ ------- ----------
-----
-- ------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在上面的示例中，我们创建了一个 SSE 接口 /sse，并在响应中使用了特殊的 MIME 类型 text/event-stream。然后我们使用 setInterval 函数定时向客户端推送数据。在每次推送数据时，我们使用 id 来标识每个消息，使用 event 来指定事件的名称，使用 data 来指定要推送的数据。
在 Node.js 中使用 SSE 实现实时消息推送
现在我们已经了解了 SSE 的基本原理和用法，下面我们将使用 Node.js 和 SSE 实现一个实时消息推送的示例。
首先，我们需要创建一个 Express 应用程序，并在应用程序中创建一个 SSE 接口 /sse。在 SSE 接口中，我们使用 setInterval 函数定时向客户端推送数据。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- -- - --
----- ---------- - -------------- -- -
----- ------- - -------- -------
-------------- ----------
----------------- ------------
---------------- ------------------ ------- ----------
-----
-- ------
--------------- -- -- -
--------------------------
----------
---
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在上面的示例中，我们使用 setInterval 函数定时向客户端推送数据。在每次推送数据时，我们使用 id 来标识每个消息，使用 event 来指定事件的名称，使用 data 来指定要推送的数据。我们还监听了客户端的关闭事件 close，在客户端关闭连接时清除定时器并结束响应。
然后，我们在客户端中创建一个 SSE 对象，并指定服务器的 SSE 接口 /sse。在 SSE 对象的 onmessage 事件处理函数中，我们将服务器推送的数据添加到页面上。
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
------
--- -------------------
--------
----- ----------- - --- --------------------
--------------------- - --------------- -
----- -------- - ------------------------------------
----- ---- - -----------------------
----- ------- - -----------------------------
----------------- - -------------
------------------------------
--
---------
-------
-------在上面的示例中，我们创建了一个 EventSource 对象，并指定了服务器的 SSE 接口 /sse。然后我们监听 onmessage 事件，在事件处理函数中将服务器推送的数据添加到页面上。
现在，我们运行 Node.js 应用程序，打开浏览器访问客户端页面，就可以看到实时消息推送的效果了。
总结
本文介绍了如何使用 Node.js 和 SSE 实现实时消息推送。我们首先讲解了 SSE 的基本原理和用法，然后使用一个简单的示例演示了如何在 Node.js 中使用 SSE 实现实时消息推送。通过本文的学习，读者可以了解 SSE 的基本原理和用法，并掌握使用 Node.js 和 SSE 实现实时消息推送的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650ad00e95b1f8cacd52a05a