在很多 Web 应用程序中，需要展示实时数据，而实时数据的展示通常需要使用 WebSocket 或 Long Polling 技术来实现。然而，如果仅仅是需要展示一些简单的实时数据，使用 Server-Sent Events 技术是一个更加轻量和简单的方案。
Server-Sent Events (SSE) 是一种浏览器端向服务器请求数据的实时通信技术，它建立在 HTTP 基础之上，使用简单的文本协议来传输数据。与 WebSocket 相比，它有以下几个优点：
- 不需要另外的协议，使用 HTTP 协议即可。
- 服务器可以主动向客户端推送数据，而不需要客户端发起请求。
- SSE 支持自定义事件和数据，可以根据实际情况进行定制。
在本文中，我们将介绍如何使用 SSE 技术，实现一个股票行情数据的实时展示页面。我们假设有一家证券公司开放了一组 API 接口提供股票信息，我们将通过 SSE 技术不断向这些接口发送请求，获取最新的股票行情数据，并在 Web 页面中实时展示。
服务器端实现
在服务器端，我们可以使用 Node.js 来实现一个 SSE 的服务端。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- ----------- --- ------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
-------------- -- -
----- ---- - -
-------- ---------
---------- -------
------ ------------- - -- - --
--
----------------- ----------
---------------- ------------------------------
-- ------
---
------------------- -- -- -
---------------- ------ -- ------- -- ------------------------
---在上面的代码中，我们创建了一个 HTTP 服务器，并在其中使用 setInterval 定时向客户端推送数据。在每次推送数据时，我们都会设置 SSE 的事件类型 (event) 为 stock，并将数据直接以 JSON 格式发送给客户端。
需要注意的是，在 SSE 技术中，每条数据都需要以两个换行符结尾，作为数据的结束标志。
客户端实现
在客户端，我们可以使用 JavaScript 来订阅 SSE 数据，并将其实时展示在页面上。下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------------------
----- ----------------
-------
------
-------------------
-------
-------
----
-------------
-------------
-----------
-----
--------
------ ------------------------
--------
--------
----- --------- - --------------------------------------
----- ------ - --- ---------------------------
---------------- - ------- -- -
----- ---- - -----------------------
----- --- - -
----
------------------------
--------------------------
---------------------------------
-----
--
----------------------------------------- -----
--
---------
-------
-------在上面的代码中，我们创建了一个简单的 HTML 页面用于展示股票行情数据，并使用 JavaScript 代码向 /api/stocks 接口订阅 SSE 数据。在接收到每次推送数据时，我们都会将其展示在表格中。
需要注意的是，在订阅 SSE 数据时，我们需要使用 EventSource 对象，并将 SSE 服务端的地址 /api/stocks 传给它。
总结
本文介绍了如何使用 SSE 技术，在 Web 应用程序中实现实时股票行情数据的展示。相比于传统的 WebSocket 或 Long Polling 技术，SSE 技术更加轻量和简单，可以满足某些特定场景下的实时数据展示需求。
需要注意的是，SSE 技术同时也有一些局限性，例如它不能支持双向通信，也不能使用二进制数据。在实际应用中，我们需要根据具体情况来选择合适的实时通信技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b31755add4f0e0ffc28bb4