前言
Server-Sent Events （SSE）是一种 HTML5 提供的实时通信技术，它允许浏览器端通过一种持续的连接，接收来自服务器端的实时事件推送。
在 Web 应用程序中，SSE 技术通常被用于实现实时通知、实时数据更新等功能。
本文将详细介绍如何使用 SSE 技术实现实时火车到站提示功能。
功能介绍
为了方便说明，我们以一个简化的功能需求为例：
用户在网站上输入火车站的名称，系统需要实时获取该火车站的即将到站的火车信息，并将其实时显示在页面上。
通常，这个功能需要满足以下要求：
- 实时性：系统需要实时获取到站信息，并实时显示在页面上。
- 数据量：每个火车站可能会有数百、数千条到站信息，需要处理大量的数据。
- 可靠性：服务器端需要保证数据传输的可靠性，以免数据丢失或重复发送。
下面，我们将一步步地实现这个实时火车到站提示功能。
技术方案
本文选择了以下技术方案：
- 服务器端：Node.js + Express + MongoDB
- 前端：HTML5 + CSS3 + JavaScript
- 客户端通信：Server-Sent Events
服务器端实现
MongoDB 数据库
我们需要准备一个 MongoDB 数据库，用来存储火车到站信息。
具体实现过程略。
Express 路由
我们需要在 Express 中定义一个路由，用来接收客户端的请求，并返回 SSE 实时数据流。
代码示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
----- ----- - ---------------------------
----------------------------- ----- ---- -- -
----- ------- - -------------------
----- ------ - ---
------------
------
--------------- --------------------
---------------- ----------
--
---------------
----------
----- --------------- - -----------
- -------- ----------- - ----- --- ------ - -
-------- ----------- - ------------
-------------------------- ----- ----- -- -
----- ------- - ------- ------------ -
------ ----------------------------
----------------------
---
--------------------------- ----- -- -
-------------------
-------------
---
--------------------------- -- -- -
---------------------------- --- ---------- -- ----------
-------------
---
---
-------------- - -------上述代码中，我们定义了一个 GET /train/:station 的路由，用来接收客户端请求。
在这个路由中，我们首先获取客户端请求中指定的火车站名称 station。
然后，我们设置了 Content-Type 和 Cache-Control 等 HTTP 头部信息，并通过 res.stream() 方法返回一个 SSE 实时数据流。
接下来，我们使用 Train.find() 函数从 MongoDB 中查询到站数据并返回一个数据流，在返回的数据流上，我们注册了三个事件处理器：
data事件：当有新数据时，我们将该数据转换为 SSE 协议格式，并通过实时数据流向客户端推送数据。error事件：当查询发生错误时，我们关闭实时数据流并打印日志。close事件：当查询结束时，我们关闭实时数据流并打印日志。
整个过程中，我们使用了 Node.js 的 stream 模块来处理实时数据流。
后台服务
我们需要在 Node.js 中创建一个后台服务，用来监听客户端请求，并将请求转发到 Express 路由。
代码示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- -------- - -------------------- ----- ----------- - -------------------------- --------------------------------------------- - ---------------- ---- -- -------- -- -------------------- ------------ ------------ -- -------------------- ------------------------ ---------------------------- --------- ----- ---- --------------- ------------- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
上述代码中，我们先使用 mongoose.connect() 方法连接到 MongoDB 数据库。
然后，我们使用 app.use() 方法注册了一个 Express 路由。
最后，我们使用 app.listen() 方法启动了一个 HTTP 服务器。
前端实现
HTML5 页面
我们需要在 HTML5 页面中添加一个火车站输入框和一个实时到站信息列表。
代码示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
-- --- --
--------
-------
------
-----------------
------ -------------------------------
------ ----------- ------------ ---------------
--------
------ ----------------
-------
----
-----------
------------
------------
-------------
-----
--------
---------------
--------
------- ----------------------------
-------
-------上述代码中，我们在 HTML 代码中定义了一个文本框（ID 为 station）和一个数据列表（ID 为 trainTable）。
CSS3 样式
我们需要在 CSS3 中定义一些样式，美化 HTML 页面。
代码示例：
/* 样式略 */
略。
JavaScript 脚本
我们需要编写 JavaScript 脚本，用来向服务器端请求实时数据，并将实时数据显示在页面上。
代码示例：
-- -------------------- ---- -------
----- ---------- - --------------------------------------
----- ------------ - -----------------------------------
----- ------ - --- --------------------------------------------------------------------
------------------------------- ------- -- -
------------------------ ---------- ----------
---
-------------------------------- ------- -- -
-------------------------- ------ -----------
---
------------------------------------ ------- -- -
----- ----- - -----------------------
----- --- - -------------------------
----- ----- - ------------------
----- ----- - ------------------
----- ----- - ------------------
----- ----- - ------------------
--------------- - ------------------
--------------- - -------------------
--------------- - --------------------
--------------- - --- ----------------------------------------
---
--------------------------------------- ------- -- -
----- --------- - --- --------------------------------------------------------------------
---------------------------------- ------- -- -
------------------------ ---------- ----------
---
----------------------------------- ------- -- -
-------------------------- ------ -----------
---
--------------------------------------- ------- -- -
----- ----- - -----------------------
----- --- - -------------------------
----- ----- - ------------------
----- ----- - ------------------
----- ----- - ------------------
----- ----- - ------------------
--------------- - ------------------
--------------- - -------------------
--------------- - --------------------
--------------- - --- ----------------------------------------
---
---------------
------ - ----------
---上述代码中，我们通过 document.querySelector() 方法获取到文本框 stationInput 和数据列表 trainTable。
然后，我们使用 new EventSource() 方法创建了一个 SSE 连接，并向服务器端发起请求。
在 SSE 连接中，我们注册了三个事件处理器：
open事件：当连接成功时，我们在浏览器控制台中打印一条日志。error事件：当连接出错时，我们在浏览器控制台中打印一条错误日志。traindata事件：当有新数据到达时，我们将该数据添加到数据列表trainTable中。
同时，我们通过 addEventListener() 方法注册了一个 change 事件处理器，用于处理文本框内容变化时，重新发起 SSE 连接并获取数据。
总结
本文介绍了如何使用 SSE 技术实现实时火车到站提示功能。
在本文中，我们选择了 Express + MongoDB 技术栈作为后端，选择了 HTML5 + CSS3 + JavaScript 技术栈作为前端。
在实现过程中，我们使用了 Node.js 的 stream 模块来处理实时数据流，并使用了 EventSource 对象在客户端与服务器之间建立 SSE 连接。
上述技术方案既可以满足实时性的要求，又可以处理大量的数据，同时具有较高的可靠性。
希望本文可以对读者在深入学习 SSE 技术方面提供一些指导意义。
示例代码
本文的完整示例代码已上传至 Github，欢迎有兴趣的读者进行研究。
https://github.com/littlesqx/sse-train-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6548644a7d4982a6eb2aa17d