什么是 SSE？
SSE（Server-Sent Events），即服务器端发送事件，是一种服务端向客户端实时推送数据的技术。SSE 相比于其他实现实时数据推送的技术，如 Websocket 和 AJAX 特别适合用于传输少量的实时数据。
股票实时行情展示与 SSE
股票的实时行情展示需要客户端实时获取股票行情数据，并将其以最新的状态展示在页面上。这样的需求需要客户端与服务器端实时通信，而 SSE 作为一种实时数据推送技术，正好符合这样的需求。
前置条件
在使用 SSE 实现股票实时行情展示之前，需要确保以下条件已满足：
- Web 服务器支持 SSE
- 确定实时数据来源，如第三方股票 API
代码实现
接下来，我们将通过一个简单的实例来介绍如何使用 SSE 实现股票实时行情展示。
服务端代码
首先，创建一个服务端文件，用于向客户端发送实时数据。以下是服务端代码示例，其中 generateRandomStockPrice 用于生成随机的股票价格：
-- -------------------- ---- -------
----- ---- - ----------------
-------- -------------------------- -
------ ------------------------ - ----- - --
-
----------------------- ---- -- -
---------------- --- ----------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ --------- ------------------------------------
----------------
-- ------
----------------以上代码会监听 3000 端口，并不断向客户端发送实时数据。
客户端代码
现在，我们可以创建一个客户端 HTML 文件来实现股票实时行情展示。
首先，我们需要在 HTML 文件中引入以下代码，用于与服务端建立 SSE 连接：
<script>
const source = new EventSource('http://localhost:3000');
source.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log(`New stock price: ${data.price}`);
}
</script>以上代码创建了一个名为 source 的 EventSource，用于建立到服务端的 SSE 连接。之后，我们可以通过 source 的 onmessage 事件获取服务端发送的实时数据，并将其展示在页面中。
在本例中，我们仅使用 console.log 将实时数据输出到控制台。
总结
SSE 是一种实现实时数据推送的技术，适合用于传输少量的实时数据。在股票实时行情展示方面，SSE 可以与第三方股票 API 结合使用，使得客户端能够实时获取股票行情并展示在页面上。
通过以上实例，我们了解了如何使用 SSE 实现股票实时行情展示，并对于 SSE 技术有更全面的认识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a793dbadd4f0e0ff0b7e78