什么是 SSE？
SSE（Server-Sent Events）是一种服务端向客户端推送事件的技术，它允许服务端实时向客户端发送数据，客户端通过监听事件流的方式获取数据。SSE 是一种轻量级的通信协议，与 WebSocket 不同，它只需要使用 HTTP 协议就可以实现实时通信。
为什么要使用 SSE？
SSE 适用于需要实现实时通信的场景，比如实时聊天、实时数据展示等。相比于轮询和长轮询，SSE 更加高效和实时。在使用 SSE 的过程中，客户端只需要向服务端发送一次请求，服务端就可以一直向客户端推送事件流，不需要客户端不断发送请求，减少了网络负担。
如何实现实时影院排片系统？
实时影院排片系统需要实时向客户端推送当前的排片信息。下面我们通过一个简单的示例来演示如何使用 SSE 实现实时影院排片系统。
服务端
首先，我们需要在服务端创建一个 SSE 事件流。在 Node.js 中，可以使用 EventSource 模块来实现：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----- ----------- - -----------------------
----- ------ - ----------------------- ---- -- -
----- -------- - -------------------- --------------
-- -------- --- ---- -
--------------------- ----- ----- -- -
-- ----- -
-------------------
-------------- ------- -------------
-------
-
------------------ -
--------------- ------------
---------------- ----------
---
--------------
---
- ---- -- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- ----------- - --- -----------------------
------------------------- ------- -- -
---------------- ---------------
---
--------------- -- -- -
--------------------
---
-
---
------------------- -- -- -
------------------- ------- -- ---- -------
---在上面的代码中，我们创建了一个 HTTP 服务器，并监听了两个路由：/ 和 /events。当客户端访问 / 路由时，返回一个 HTML 页面，用于显示当前的排片信息。当客户端访问 /events 路由时，创建一个 SSE 事件流，并将事件流发送给客户端。
客户端
接下来，我们需要在客户端监听 SSE 事件流，获取服务端发送的排片信息。在 HTML 页面中，可以使用 EventSource 对象来监听事件流：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
------
---------------
--- -----------------
--------
----- ---------- - ----------------------------------
----- ----------- - --- -----------------------
--------------------- - ------- -- -
----- ----- - -----------------------
----- --------- - -----------------------------
--------------------- - -------------- - ---------------
----------------------------------
--
---------
-------
-------在上面的代码中，我们创建了一个 ul 元素，用于显示当前的排片信息。当服务端发送一个事件时，客户端会通过 eventSource.onmessage 回调函数来接收事件，并将事件的数据添加到 ul 元素中。
数据库
最后，我们需要在数据库中存储排片信息，并在服务端定时向客户端发送最新的排片信息。在本示例中，我们使用 MongoDB 数据库来存储排片信息：
-- -------------------- ---- -------
----- -------- - --------------------
----- ----------- - --- -----------------
----- -------
----- ------
---
----- ----- - ----------------------- -------------
---------------------------------------------- - ---------------- ---- --
-------- -- -
-------------------- ------------
--
-------------- -- -
---------------------
---
-------------- -- -
--------------
-------------- -- -
---------------------- -- -
----- ----- - ----------------------
--------------------------- -------
---
--
-------------- -- -
---------------------
---
-- ------在上面的代码中，我们定义了一个 Movie 模型，并连接到 MongoDB 数据库。然后，我们使用 setInterval 定时查询数据库中的排片信息，并通过 eventSource.emit 方法向客户端发送最新的排片信息。
总结
SSE 是一种实现实时通信的轻量级技术，可以用于实现实时聊天、实时数据展示等场景。在本教程中，我们通过一个简单的示例演示了如何使用 SSE 实现实时影院排片系统。通过本教程，你可以学习到如何使用 SSE，以及如何将 SSE 应用于实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65600826d2f5e1655da34d28