在 web 应用中，有一种常见的场景是需要向客户端推送实时信息，比如股票行情、货币汇率等。对于这种实时信息推送需求，我们可以使用 Server-sent Events(SSE) 技术来实现。
在本文中，我们将通过一个实际的案例来介绍 SSE 技术的应用。我们将编写一个实时股票行情推送的示例程序，通过该程序，用户可以实时地查看股票的最新价格、涨跌幅等信息。
Server-sent Events(SSE) 简介
SSE 是一种将服务器推送数据到客户端的技术。与 WebSockets 不同的是，SSE 不需要建立全双工通信通道，而是采用单向通信，将服务器端的事件推送到客户端。SSE 采用基于 HTTP 的长连接，客户端通过发起一个 HTTP 请求，服务器端保持连接不断开，并在有新数据时将数据通过该连接推送给客户端。
使用 SSE 技术，我们无需考虑网络传输、浏览器兼容性等问题，可以轻松地实现实时信息的推送。
实现实时股票行情推送
前端代码实现
首先，我们需要在前端页面中创建一个 EventSource 对象，用于接收服务器端推送的事件。代码如下：
var eventSource = new EventSource("http://localhost:8080/stock");上述代码创建了一个 EventSource 对象，用于接收服务器端推送的事件，URL 参数指定了服务器端推送的地址为 http://localhost:8080/stock。
接下来，我们需要在该对象上绑定事件处理程序，将接收到的事件内容渲染到前端页面中。代码如下：
eventSource.onmessage = function(event) {
var data = JSON.parse(event.data);
render(data);
}上述代码对 EventSource 对象绑定了 onmessage 事件，当服务器端推送消息时，该事件被触发，我们解析消息内容并调用渲染函数 render() 来更新页面。
后端代码实现
为了模拟股票行情数据的推送，我们编写了一个 Node.js 服务器程序，通过 Express 框架来实现 SSE 推送功能。代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
----------------- ------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
--- ---- - --------------------
---------------- - - -------------------- - --------
-- ------
---
-------- ------------------- -
--- ----- - ------------- - -----
--- ------ - ------------- - -- - --
--- ------------- - ------- - ------ - ----
------ -
------- -------
------ -----------------
------- ------------------
-------------- ------------------------ - ---
--
-
---------------- ---------- -
------------------- ------- -- ------------------------
---上述代码中，我们创建了一个 Express 应用程序，当客户端发起 /stock 的 HTTP 请求时，返回一个数据流，用于向客户端推送实时股票行情数据。通过 setInterval 函数，我们每两秒钟向客户端推送一次数据，利用 Math.random() 来生成随机的股票行情数据。
要注意的是，返回的数据流需要指定 Content-Type 为 text/event-stream，以及 Connection 为 keep-alive，这样浏览器才会保持长连接并持续接收推送消息。
总结
本文介绍了 SSE 技术的应用实例，通过实现一个实时股票行情推送的示例程序，展示了 SSE 在实际应用中的优秀表现。本文希望能够为 Web 开发者提供一定的参考和指导，帮助大家更好地实现实时信息推送的功能。
示例代码
前端代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
--- ---------------
--------
--- ----------- - --- -------------------------------------------
--------------------- - --------------- -
--- ---- - -----------------------
-------------
--
-------- ------------ -
--- -- - -----------------------------
------------ - ----------- - -- - - ---------- - - -- - ----------- - -- - - ------------------ - ----
------------------------------------------------
-
---------
-------
-------后端代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
----------------- ------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
--- ---- - --------------------
---------------- - - -------------------- - --------
-- ------
---
-------- ------------------- -
--- ----- - ------------- - -----
--- ------ - ------------- - -- - --
--- ------------- - ------- - ------ - ----
------ -
------- -------
------ -----------------
------- ------------------
-------------- ------------------------ - ---
--
-
---------------- ---------- -
------------------- ------- -- ------------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659d90f8add4f0e0ff6d008a