Server-Sent Events（SSE）是一种可用于向 Web 应用程序发送事件的技术。 它提供了服务器向客户端发送消息的一种简单的方式。 在这篇文章中，我们将使用 SSE 构建一个实时的 Twitter 过滤器，以演示 SSE 的使用。
简介
SSE 允许服务器将消息推送到客户端，而无需客户端发起请求。 在 SSE 中，一个持续的连接被建立，服务器可以通过该连接向客户端发送事件。 这使得 SSE 成为处理实时数据的好方法。
在我们的示例中，我们将构建一个 Twitter 过滤器，以便从 Twitter 实时流中过滤出我们感兴趣的内容，并将这些内容通过 SSE 推送到前端。 这将使我们可以实时地获取来自 Twitter 的新内容，而不需要刷新页面。 以下是演示示例的代码。
代码实现
1. 服务端
让我们从服务端开始。 我们将使用 Node.js 和 Twitter API 来获取实时的 Twitter 数据。 首先，我们需要安装必要的依赖项：
--- ------- ------- ------- ------ ----
然后，我们可以编写服务器代码：
----- ------- - ------------------
----- --- - ---------
----- ---- - ---------------
----- ------ - ----------------------
----- -- - ----------------------------
----- ------- - ------------------
----- ------ - -----------------
---------------
---------------------------------
---------------
----- ------------- - --- ---------
------------- ---------------------------------
---------------- ------------------------------------
----------------- -------------------------------------
-------------------- ---------------------------------------
--
------------------ ------------- ---- -
----- ------ - --------------------------------------- ------- --------------
----------------- --------------- -
----- ---- - -
----- -----------
----------- -----------------
----- -
----- ----------------
------------ -----------------------
------------------ ----------------------------------
-
-
---------------- -----
--
--
------------------------------ -- ----- -- -- -
---------------------- -- ---- ------
--上述代码中，我们首先导入必要的依赖项。 之后，我们创建了一个 Express 应用程序，并为其创建了一个 HTTP 服务器。
然后，我们创建了 Twitter 客户端，使用 atatus/filter 跟踪 "javascript" 关键字。 在 data 事件中，我们将事件数据转换为我们期望的格式，并使用 Socket.io 将其推送到客户端。
最后，我们为应用程序设置了一个监听器来侦听来自客户端的连接，并在连接建立后，通过上述 /stream 端点启动 Twitter 数据流。
2. 客户端
现在，让我们编写前端代码，以接收服务端推送的 Twitter 数据。 我们将使用 EventSource API 来实现 SSE。 我们在 HTML 中创建一个简单的页面，使用 Bootstrap 和 jQuery：
--------- -----
------
------
----- ----------------
---------------- ------- --------------
----- ---------------- -----------------------------------------------------------------------------
-------
------
---- ------------------
------------- ------- -----------
---- ---------------------
------
------- -----------------------------------------------------------
------- ---------------------------------------
--------
----- ------ - --- ----------------------
----- --------------- - ------------
---------------- - --------------- -
----- ---- - ----------------------
----- ---- - -
---- --------------
---- --------------------- -------------------------------------
---- ----------------
---- -------------
------------------------
----- ----------------------------------------------------
----- --------------------------------------------
------
---- -------------
------------
------
------
------
-
-----------------------------
-
---------
-------
-------上述代码中，我们首先导入必要的依赖项，使用 jQuery 和 Bootstrap 创建了一个简单的页面。
然后，我们使用 /socket.io/socket.io.js 路由加载 Socket.io 库，并使用 EventSource 对象创建了一个 SSE 连接。 我们使用 onmessage 事件监听器来处理来自服务器的推送消息。 在接收到数据之后，我们将其转换为 HTML，并将其添加到页面中。
现在，我们只需要运行我们的服务端和客户端代码。 运行以下命令启动服务端：
---- --------
在浏览器中访问 http://localhost:3000，您将在此过滤 Twitter 数据的基础上得到一个实时更新的 Twitter 流。
指导意义
使用 SSE 可以轻松地向前端推送实时数据。 特别是对于具有实时数据需求的应用程序，例如聊天应用程序或实时地图，SSE 是一个非常好的选择。
在本示例中，我们演示了如何使用 SSE 构建实时 Twitter 过滤器。 您可以通过修改服务端代码，使用不同的关键字过滤 Twitter 流，或使用其他实时数据源来玩耍。
结论
提供实时数据的应用程序越来越重要。 借助 SSE 技术，我们可以轻松地向前端推送实时数据。 在本文中，我们通过构建实时 Twitter 过滤器演示了 SSE 的用法。 我们希望这个示例可以帮助您更好地了解 SSE，以及如何在自己的应用程序中使用它来提供实时数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673706d2317fbffedf078434