在现代 Web 应用中，我们经常需要构建实时更新的功能，比如在线聊天室、实时通知和在线书城等。为了实现这些功能，我们可以使用不同的技术，比如 Websockets、AJAX 长轮询和 Server-Sent Events（SSE）。在本文中，我们将重点介绍如何使用 SSE 技术构建实时在线书城应用。
什么是 Server-Sent Events
SSE 是一种 HTML5 技术，它允许服务器向客户端推送实时数据流。与 Websockets 不同，SSE 使用了标准的 HTTP 协议，客户端通过建立持久化的 HTTP 连接来接收服务器推送的事件。SSE 通常用于推送实时数据、服务器发送的通知和更新以及在线聊天等应用场景。
在线书城应用架构
为了演示如何使用 SSE 构建实时在线书城应用，我们需要先了解一下应用的基本架构。
在线书城应用通常包含以下几个组件：
服务器：负责处理用户请求和推送事件到客户端，通常使用 Node.js 或其他服务器端技术实现。
数据库：存储书籍和其他相关信息，通常使用 MySQL、MongoDB 或其他数据库。
客户端：展示书籍列表和书籍详情，以及接收实时推送的书籍更新事件。通常使用 HTML、CSS 和 JavaScript 实现。
在本文中，我们将使用 Node.js 和 MongoDB 实现服务器端和数据库，并使用 SSE 技术实现客户端和服务器端之间的实时通信。
服务器端实现
在服务器端，我们需要使用 Node.js 和 Express 框架实现 HTTP API 和 SSE 服务。以下是服务器端的基本实现：
-- -------------------- ---- -------
----- ------- - ------------------
----- -------- - -------------------
----- ---- - ------------------------
----- --- - ---------
----- ---- - ----
-- -- ------- ---
------------------------------------------------- -
---------------- -----
------------------- ----
--
-- ---- --- ------
----------------- ----- ----- ---- -- -
----- ----- - ----- -----------
---------------
--
-- --- ----------
------------------------ ----- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
--
----- ------ - ------------
------------------- -------- -- -
----- ---- - -------------------
----------------- ------------- -----------------------------
--
--
---------------- -- -- -
------------------- --------- -- ---- ---------
--上述代码中，我们定义了两个路由 /books 和 /books/events，分别用于 HTTP API 和 SSE 服务。
/books 路由使用 MongoDB 的 find 方法查询书籍列表，并返回 JSON 格式的数据。
/books/events 路由使用 MongoDB 的 watch 方法监听书籍集合的变化，并通过 SSE 服务向客户端推送书籍更新事件。在每次变化时，我们将书籍更新数据作为 JSON 格式的数据传递给客户端，其中 event: update 表示事件类型为更新事件。
客户端实现
在客户端，我们需要使用 JavaScript 实现 SSE 接收和处理书籍更新事件。以下是客户端的基本实现：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
-------------
-------------
------ ---------------
-------
----
-----------
-----------
-----------
-----------
-----
--------
-------
----
--- -----------------------
-----
--------
--------
-------------
---- -----------------------
--------
----- -------- - ------------------------------------
----- ---------- - --------------------------------------
-- --- --------
----- ------ - --- ----------------------------
--------------------------------- ----- -- -
----- ---- - ----------------------
-- ------
----- --- - ---------------------------------------------------
-- ----- -
------------- - -
--------------------
----------------------
-----------------------
----------------------
-
- ---- -
----- ------ - ----------------------------
----------------- - --------
---------------- - -
--------------------
----------------------
-----------------------
----------------------
-
---------------------------------------------------
-
-- ------
-- ---------------------- --- --------- -
-------------------- - -
----------------------
---------------------
--------------------
-
-
--
-- ---- -----------
---------------
-------------- -- ----------------
----------- -- -
----------------------------------------- - --
------------------ -- -
----- --- - ----------------------------
-------------- - --------
------------- - -
--------------------
----------------------
-----------------------
----------------------
-
------------------------------------------------
--
----- --------- - --------
-- ----------- -
--------------------- - -------------
-------------------- - -
---------------------------
--------------------------
-------------------------
-
-
--
---------
-------
-------上述代码中，我们使用 HTML 和 CSS 构建了一个简单的书城页面，并使用 JavaScript 实现了 SSE 接收和处理书籍更新事件。
在客户端通过 new EventSource('/books/events') 创建 SSE 连接，并指定事件类型为 update。在 update 事件被触发时，我们通过解析事件的数据，更新书籍列表和书籍详情。如果书籍列表中已存在被更新的书籍，则更新其数据行，否则创建一行数据行。如果当前书籍详情为被更新的书籍，则更新书籍详情显示的数据。
同时，我们通过 HTTP 请求获取书籍列表和书籍详情，并在页面加载完成时显示默认的书籍详情。
总结
本文中，我们介绍了如何使用 SSE 技术构建实时在线书城应用。通过使用 Node.js 和 Express 实现服务器端和 MongoDB 实现数据库，以及使用 HTML、CSS 和 JavaScript 实现客户端，我们成功地实现了一个简单的在线书城应用，并演示了如何使用 SSE 技术进行实时通信和响应。使用 SSE 技术可以极大地提升 Web 应用的实时性和交互性，适用于许多不同的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654a27317d4982a6eb44e792