什么是 Server-Sent Events
Server-Sent Events（简称 SSE）是一种浏览器和服务器之间实时通信的技术。它允许服务器发送事件流（event stream）到客户端，客户端通过 EventSource API 接收这些事件流并处理它们。SSE 的优点在于它使用 HTTP 协议，因此不需要像 WebSocket 一样建立一个全双工的连接，而且 SSE 可以使用服务端推送技术，即服务器可以在没有客户端请求的情况下发送事件流。
SSE 与 WebSocket 类似，但是相比 WebSocket，SSE 更加轻量级，且不需要额外的协议握手过程，因此更容易实现。
如何使用 SSE 实现格子聚合应用
在本文中，我们将使用 SSE 实现一个格子聚合应用。这个应用会将一些格子的状态显示在网页上，并且当有格子状态发生变化时，网页会实时更新。
1. 服务端代码
首先，我们需要编写一个服务端代码来发送事件流。在这个例子中，我们使用 Node.js + Express 来实现。我们先创建一个 Express 应用，并启用 SSE：
----- ------- - -------------------
----- --- - ----------
----------------------------------
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------------
-- ----- ---- ------
---在上面的代码中，我们创建了一个 /events 路由，并设置了响应头，使其成为 SSE 响应。然后我们要在这个路由中发送事件流，下面我们将详细介绍如何发送事件流。
在实际情况中，我们需要从数据库或者其他数据源中获取格子的状态，并将这些状态转换为事件流发送给客户端。以下是一个简单的示例代码，它每隔 1 秒发送一个事件，事件的数据是一个随机的数字：
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------------
-------------- -- -
----- ---- - ------------------------ - -----
---------------- --------------
-- ------
---在上面的代码中，我们使用了 setInterval 函数每隔 1 秒发送一个事件。事件的数据是一个随机的数字，我们使用 res.write 函数将事件发送给客户端。
2. 客户端代码
接下来，我们需要编写客户端代码来接收事件流，并将事件流中的数据显示在网页上。我们可以使用 EventSource API 来接收事件流，以下是一个简单的示例代码：
----- ----------- - --- ----------------------- --------------------- - ------- -- - ----- ---- - ----------- -- ----- ------ -- ---- ---- --
在上面的代码中，我们使用 new EventSource 函数创建了一个 EventSource 对象，并指定了事件流的 URL。然后我们可以使用 eventSource.onmessage 函数来处理收到的事件。在这个例子中，我们简单地将事件的数据保存到变量 data 中，然后我们可以使用这个数据更新网页上的 UI。
3. 完整示例代码
下面是一个完整的示例代码，它会将一个 10x10 的格子矩阵显示在网页上，并且每隔 1 秒更新一次格子的状态：
--------- -----
------
------
----- ----------------
----------- ------------------
-------
----- -
-------- -----
---------------------- ---------- -----
------------------- ---------- -----
---- ----
-
---------- -
----------------- -----
-
--------
-------
------
---- -------------------
--------
----- ----------- - --- -----------------------
--------------------- - ------- -- -
----- ---- - ---------------------
----- --------- - ----------------------------------------
------------------------ ------ -- -
-- ----- - -- -- ------- -
-------------------------- - --------
- ---- -
-------------------------- - -------
-
---
--
----- ---- - --------------------------------
--- ---- - - -- - - ---- ---- -
----- ---- - ------------------------------
-------------- - ------------
-----------------------
-
---------
-------
-------在上面的代码中，我们使用了 CSS Grid 来创建了一个 10x10 的格子矩阵，并使用 document.createElement 函数动态创建了这些格子元素。然后我们使用 EventSource API 接收事件流，并在收到事件后更新格子的状态。
总结
本文介绍了如何使用 SSE 实现格子聚合应用。我们首先介绍了 SSE 的基本原理和优点，然后详细介绍了如何使用 Node.js + Express 实现 SSE 服务端，以及如何使用 EventSource API 接收事件流并更新网页上的 UI。最后，我们给出了一个完整的示例代码，帮助读者更好地理解 SSE 的使用方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658b9bebeb4cecbf2d0d8eb9