如何使用 Server-Sent Events 推送新闻和设备数据
前言
Web 应用程序越来越复杂，需要从服务器实时获取数据。但是，客户端请求数据的频率太高，将增加服务器的负载，可能导致带宽浪费。 此时，使用推送技术可以避免这种浪费，并使服务器更有效的处理请求。
Server Sent Events （SSE）就是一种服务器推送技术。它是现代 AJAX 的替代品，可以通过单个 HTTP 连接从服务器向客户端发送数据流，避免了轮询，并实现了实时通信。
本文旨在介绍如何使用 SSE 技术推送新闻和设备数据。
- 基本 SSE 结构
在使用 Server-Sent Events 之前，需要对 SSE 进行一些基本的设置。
在 HTML 文件中，需要添加一个 SSE 的连线，如下所示：
<script>
var source = new EventSource("/yourServerPage");
source.onmessage = function(event) {
console.log(event.data);
};
</script>第一行创建了一个名为 source 的对象，该对象作为 SSE 的入口点，与服务器端建立连接，请求数据。
第二行设置了 SSE 受到消息时的事件处理程序。在本例中，事件处理程序打印收到的消息。
现在需要添加服务器端的代码。
在服务器端，需要延长连接时间，以允许 SSE 连接保持打开状态并接受数据。 在 PHP 中，可以通过以下代码来实现：
-- -------------------- ---- ------- ----- --------------------- -------------------- ---------------------- ----------- -- ------ ----------------------------- --- ----- ------ - -- --------- ------------ - -------------- ---- ------ --- ------ ---- --- -------------------- -------- --------- - --
其中，必须设置 Content-Type 为 text/event-stream，并通过 Cache-Control 关闭缓存。
- 用 SSE 推送新闻数据
现在，看一下使用 SSE 如何推送新闻数据。
首先，在服务器端，需要创建一个与数据库或 RSS 源链接的 API。 然后，定期从服务器端获取新闻，并将其发送给 SSE 连接。
以下是 PHP 代码：
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
----------------------------- ---
----- ------ -
----- - ----------------
------- ------ -- ------------ -
-------- - -
------- -- ---------------------
------ -- -------------------
--
-----------------------------------
-
---------- -- - -- -------
-
-------- --------------- -
-- - --- ----
-
-------- ------------------ -
---- ------ -------------
--------
-
--在此示例中，代码定期从 API 获取新闻并将其发送给客户端。 客户端将使用 EventSource 对象处理接收到的数据。
以下是客户端代码：
<script>
var source = new EventSource("/news");
source.onmessage = function(event) {
var data = JSON.parse(event.data);
var newsItem = '<a href="'+data.link+'">'+data.title+'</a><br>';
document.body.insertAdjacentHTML('beforeend', newsItem);
};
</script>在此示例中，将每个新闻作为 HTML 标记附加到页面的尾部。 可以修改代码以更好地满足您的需求。
- 用 SSE 推送设备数据
接下来，看一下如何使用 SSE 推送设备数据。
服务器上的应用程序可以定期发送设备数据。以下是 PHP 代码：
-- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
----------------------------- ---
----- ------ -
----------- - ----------------
--------------------------------------
---------
-
-------- --------------- -
----- - ---
--- --- - -- -- -- --- ----- -
----------------- -
------------ -- ------- -----
------ -- ----------- --------
------- -- ---------- ----
---
-
------ ------
-
-------- ------------------ -
---- ------ -------------
--------
-
--在此示例中，代码生成设备数据并将其发送到客户端。 客户端将使用 EventSource 对象处理接收到的数据。
以下是客户端代码：
-- -------------------- ---- -------
--------
--- ------ - --- ---------------------------
-------------------------------------- ----------- -
--- ---------- - -------------------
--------------------------------- -
--- ----------- - --------------------------------
--------------------- - ------------------- - ------------- - --------------
---
-- -------
---------在此示例中，将每个设备的最新数据附加到页面上的 HTML 列表项中。 您可以根据需要修改此代码。
结论
Server-Sent Events 是一种灵活，快速，可扩展的服务器 - 客户端通信机制。使用 SSE 提供新闻和设备数据的实时推送可以改善 Web 应用程序的用户体验。
总之，本文提供了一个 SSE 推送新闻和设备数据的完整示例，并详细介绍了相关代码。希望这篇文章可以帮助您更好地了解 SSE，并在您的 Web 应用程序中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef76dd6fbf9601972f63d2