随着 Web 技术的快速发展，HTTP 协议逐渐成为传输数据的主流协议之一。但是，在传统的 HTTP 协议中，服务器只能在请求成功后响应一次数据，即传统的 Request-Response 模式，导致开发者难以实现实时信息的推送。
为了解决这个问题，我们可以使用 Server-Sent Event（即 SSE）技术，它可以实时的从服务器向客户端推送数据。本篇文章将为您介绍如何使用 Node.js 和 Redis 实现 SSE 服务器。
SSE 简介
Server-Sent Event，也称 EventSource，是HTML5中引入的一种新机制，它允许一个浏览器页面通过 HTTP 连接自动接收来自服务器的更新，从而实现服务器推送。
SSE 连接由一个经过特殊格式的 HTTP 响应头与一系列消息组成。在客户端上，SSE 连接通常用 EventSource API 绑定。在支持 SSE 的浏览器上，使用 SSE 更加简单，只需要监听消息即可。并且 SSE支持服务端自动重连，确保了服务器推送的及时到达。
准备工作
在开始使用 SSE 技术之前，我们需要做一些准备工作，如下所示：
- 安装 Node.js 和 Redis
其中 Node.js 用于编写 SSE 服务器端的代码， Redis 则用于存储推送的消息队列。
- 初始化项目
在运行以下代码之前，请确保您已经在本地计算机上安装了 Node.js 和 Redis。
-- -------------------- ---- ------- -- --------- ----- ---------- -- --- ---------- ---- -- ---------- -- --- --- ----- ------------ -- --- ---- -- -- -- ------- --- ------- ------- ------ -- -- ----- --- ------- ----- ------
在初始化项目后，我们需要在 sse-server 文件夹内创建两个文件： app.js 和 redis.js ，分别用于编写 SSE 服务器的代码以及用 Redis 存储数据。
编写 SSE 服务器代码
在 app.js 中编写 SSE 服务器的代码。我们需要使用 Express 框架，并创建两个路由，一个用于创建 SSE 连接，另一个用于向 Redis 存储信息并发布信息。以下是完整的 app.js 代码：
-- -------------------- ---- -------
-- -----
----- ------- - ------------------
----- ----- - ----------------
-- -- ------- --
----- --- - ---------
-- -- ----- ---
----- ----------- - --------------------
-- -- ----- --
----------------------- ----- -- -
------------------ ----- -- ----
--
-- --------
----- -------- - --
-- -- --- ----------
-------- ------------------- -
----------------------- --------
-- -----
------------------ -
------------- -------------
--------------- --------------------
---------------- ----------
--
-- ------
----- ----- - -------------- -- -
------------------
-- ------
-- --------
-------------------- ------- -- --- ------------
-- --------------
---------------------------------- - ---
-- ---- --- ------
--------------- -- -- -
--------------------
----------------------- --------
--
-
-- ----- --- ------
--------------- ----- ---- -- -
-------------------
--
-- ----------
--------------------------------- ----- ---- -- -
----- ------- - ------------------
-- --------
-------------------- ----------------
-- ----- -----
----------------------------- -------- ----- -- -
-- ----- -
------------------ ---- ------- -------- ----
-
-- ------------ --- ------
----- ------------- - ------ ---------------
-------------------
------------------------------ -------------- ----- -- -
-- ----- -
------------------ ------- ------- -------- ----
-
--
--
--
-- -- ------- ---
----- ------ - ---------------- -- -- -
------------------- ------- -- ---- ------------------------ ----
--在代码中，我们创建了两个路由：
/sse 路由：用于建立 SSE 连接；当客户端访问该路由时，我们将在
onStreamOpened方法中设置响应头，并初始化 SSE 连接。/add-message/:message 路由：用于将客户端提交的消息添加到 Redis 和消息队列，并通过
redis publish方法将消息及时推送到所有监听 SSE 连接的客户端。
在 onStreamOpened 方法中，我们进行了以下操作：
创建一个连接成功时的回调函数，用于设置响应头，创建并插入初始消息，并将消息队列中的最后一条数据写入到响应中返回给客户端，以保证连接成功后及时推送最新消息。
创建一个循环定时器，用于向客户端发送心跳包。心跳包旨在确保 SSE 连接保持打开状态，防止因长时间无数据传输而被关闭。
监听 SSE 连接关闭的事件，确保在客户端关闭或断开连接时正确清除定时器和关闭服务器。
Redis 存储数据
接下来，需要编写用于 Redis 存储数据的 redis.js 文件，其中包括用于创建 Redis 客户端的方法、用于获取数据的方法以及用于发布数据的方法。以下是完整的 redis.js 代码：
-- -------------------- ---- -------
-- -----
----- ----- - ----------------
-- -- ----- ---
----- ------------ - -- -- -
----- ------ - --------------------
------------------ ----- -- -
------------------ ----- -- ----
--
------ ------
-
-- -------
----- ----------- - -------- --- -- -
------------------------- -- --- ----- --------- -- -
-- ----- -
------------------ --- -------- -------- ----
------ -- -- -------
-
------ -- -- -------- ---------
--
-
-- - ----- ----
----- -------------- - -------- -------- --- -- -
------------------------- -------- ----- -- -
-- ----- -
------------------ ------- ------- -------- ----
------ -- -- -------
-
------ -- -- -------- -----
--
-
-------------- - -
-------------
------------
--------------
-在代码中，我们编写了用于创建 Redis 客户端、获取保存的消息和用 Redis 发布消息的方法。
程序启动
在编写了 app.js 和 redis.js 之后，我们需要在命令行启动 Node.js 服务器和 Redis 服务。以下是启动命令：
// 按顺序分别开启 Redis 和 Node.js 服务器 redis-server node app.js
测试
启动 Redis 和 Node.js 服务器后，我们可以在任何支持 SSE 连接的浏览器上运行测试程序。以下是一个简单的测试程序：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
------
------- ---------
------------ ---- ------------
--- -------------------
----- -----------------
------ ---------------------- - ----------------
------ ----------- ------------------- ------------------
------- --------------------------
-------
--------
----- ---------- - -----------------------------------
----- ------------ - ---------------------------------------
----- ----------- - --------------------------------------
-------- -------------------- -
----- -- - ----------------------------
-------------- - ----
--------------------------
-
----- ------ - --- -------------------
---------------- - ------- -- -
--------------------------
-
-------------------------------------- ------- -- -
----------------------
----- ------- - -------------------------
-- ---------------- -
-------------------------------- - ------- ------ --
------------------ - --
-
--
---------
-------
-------用浏览器打开 index.html 文件，填写需要发送的消息并提交后，将能够在测试页面上接收到服务端推送的消息。
总结
本篇文章介绍了如何使用 Node.js 和 Redis 实现 SSE 服务器，并通过一个简单的测试程序进行展示。该技术不仅易于实现，还具有广泛的应用场景，如在线聊天、实时通知等。请尽情探索，发挥创意，构建属于自己的实时推送服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646710ac968c7c53b07785db