在现代 Web 应用程序中，实时数据变得越来越重要，特别是在金融领域。在这个领域中，股票市场数据的实时更新对于投资者来说是至关重要的。在这篇文章中，我们将介绍如何使用 Server-Sent Events 技术来实现一个实时股票数据应用程序。
Server-Sent Events 简介
Server-Sent Events（SSE）是一项 HTML5 技术，它允许服务器向客户端推送数据。相对于 WebSocket，SSE 更加简单，因为它使用了标准的 HTTP 协议。SSE 可以用于实现实时更新的 Web 应用程序，比如股票市场数据应用程序。
SSE 的核心是“事件流”，它是一个不断更新的数据流，客户端可以通过监听事件流来获取最新的数据。在事件流中，每个事件都是一个包含数据的文本块，每个文本块以“data:”开头。当服务器有新数据时，它会将新数据添加到事件流中，客户端会自动接收到最新的数据。
实现一个实时股票数据应用程序
在本文中，我们将使用 SSE 技术来实现一个简单的实时股票数据应用程序。该应用程序将从一个 JSON API 获取股票市场数据，并使用 SSE 将最新的数据推送到客户端。
服务端代码
首先，我们需要编写一个服务端代码，以获取股票市场数据并将其推送到客户端。我们将使用 Node.js 和 Express 库来实现服务端代码。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----- ------ - -----------------------
----- - ---- - - -----------------------
----- ------ - -
- ------- ------- ------ ------ --
- ------- -------- ------ ------- --
- ------- ------- ------ ------ --
- ------- ------- ------ ------- --
- ------- ----- ------ ------ --
--
----------------
------------------ ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ----- - ------------------------------- - ----------------
----- ---- - ------ ------------------------------
----------------
-- ------
---
------------------- -- -- -
------------------- ------- -- ---- -------
---在上面的代码中，我们定义了一个名为“/stocks”的路由，当客户端访问该路由时，服务器将发送一个事件流到客户端。事件流的 Content-Type 设置为“text/event-stream”，这是 SSE 的标准 MIME 类型。服务器还设置了一些响应头，以确保客户端保持连接并不断接收新数据。
在 setInterval 函数中，我们从 stocks 数组中随机选择一只股票，并将其作为 JSON 字符串发送到客户端。我们使用“\n\n”来分隔事件，这是 SSE 的标准分隔符。
客户端代码
现在，我们需要编写客户端代码，以从服务器获取事件流并更新 UI。以下是客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ----- ------ ------------
-------
------
------------- ----- ------ ---------
--- -----------------
--------
----- ------ - ----------------------------------
----- ----------- - --- -----------------------
--------------------------------------- ------- -- -
----- ----- - -----------------------
----- -- - -----------------------------
-------------- - ----------------- ----------------------------
-----------------------
---
---------
-------
-------在上面的代码中，我们创建了一个包含一个 ul 元素的 HTML 页面。我们使用 JavaScript 创建了一个名为“eventSource”的 EventSource 对象，该对象向服务器发出一个 HTTP 请求，并将事件流连接到客户端。我们在 eventSource 对象上添加了一个“message”事件监听器，该监听器将在服务器推送新数据时被触发。我们使用 JSON.parse 函数将 JSON 字符串转换为 JavaScript 对象，并将其添加到 HTML 页面中的 ul 元素中。
运行应用程序
现在，我们已经编写了服务端和客户端代码，可以通过以下命令启动应用程序：
node server.js
在浏览器中打开以下 URL：
http://localhost:3000/
您应该能够看到一个包含最新股票价格的实时更新列表。
总结
在本文中，我们介绍了如何使用 Server-Sent Events 技术来实现一个实时股票数据应用程序。我们编写了服务端和客户端代码，并解释了 SSE 的工作原理。SSE 是一种简单而有效的技术，可以用于实现实时更新的 Web 应用程序。如果您正在开发类似的应用程序，我们希望本文能帮助到您。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e37e0eb4cecbf2d40ad1f