随着前端技术的不断发展，实现实时的双向数据传输成为了前端开发的重要需求。虽然 WebSocket 提供了很好的解决方案，但是在某些场景下，Server-Sent Events (SSE)，即服务器推送事件，也是一种非常优秀的选择。本文将会为大家介绍如何使用 SSE 实现推送图片数据，从而使得前端页面能够实时获取到后端更新的图片数据。
简介
SSE 是一种基于 HTTP/1.1 的服务器推送事件技术。它提供了一种从服务器向客户端推送实时事件的方式。SSE 基于 HTTP，因此无需使用额外的协议或端口来实现双向通信。SSE 推送的数据是与客户端建立的一个持久连接上的数据流，可支持事件流格式的消息推送。SSE 的应用场景非常广泛，比如实时消息推送、股票行情实时推送等等。
SSE 原理
SSE 的工作原理非常简单，它使用 HTTP 的长连接机制，在服务器和客户端之间保持一个持久的连接，然后服务器就可以把消息不断地推送给客户端。在客户端接收到新的消息时，会触发浏览器的 onmessage 事件，开发者可以通过这个事件来处理新到来的数据，从而实现实时更新数据的功能。
实现步骤
下面我们将从后端和前端两个方面来介绍如何实现 SSE。我们选用 Node.js 和 Express 作为后端开发技术栈，浏览器客户端则使用 JavaScript 进行开发。
后端实现
后端需要使用 Node.js 和 Express 来实现 SSE。在 Express 中，SSE 被称为“服务器发送事件流”，即 text/event-stream，需要设置响应头的 MIME 类型。
首先，我们需要在服务器端建立一个 SSE 的路由，在这个路由中，我们将会向客户端推送一张图片的数据流。下面是实现代码：
----- ------- - -------------------
----- -- - --------------
----- ------ - -----------------
-------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
----------- ------------
---
----- -------- - -------------
----- ------ - ------------------------------
----------------- ------- -- -
---------------- ----------------------------------
---
---------------- -- -- -
----------
---
---
-------------- - -------代码解释：
- 首先，我们使用
res.writeHead来设置响应头的 MIME 类型，以及其他一些参数，表示我们即将向其推送事件流数据。 - 然后，我们读取一张图片，使用 Node.js 中的
createReadStream读取图片的数据流，使用chunk.toString('base64')将图片的数据流转换为 base64 编码格式，之后通过响应流向客户端发送消息，格式为data: xxxxxxxx\n\n，其中的xxxxxxxx表示的就是图片数据流的 base64 编码格式。 - 最后，当我们向客户端发送完毕数据流之后，必须使用
res.end()来结束响应，否则客户端将会一直处在等待状态。
前端实现
在前端，我们需要使用 JavaScript 来实现 SSE 的相关逻辑代码。我们需要通过 EventSource 对象来建立一个 SSE 的连接，并通过 onmessage 事件来处理服务器发送过来的事件流数据。
下面是前端实现 SSE 的示例代码：
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- ---------
--------
----- ------ - --- ----------------------
----- --- - -------------------------------
---------------- - ------- -- -
----- ---- - -----------
------- - --------------------------------
--
---------
-------
-------代码解释：
- 首先，我们使用
EventSource对象建立一个 SSE 的连接，其中的参数为服务器上的 SSE 路由。 - 然后，我们使用
img标签来显示图片，设置src属性为我们得到的图片数据流的 base64 编码格式。 - 最后，我们使用
source.onmessage事件来监听服务器推送过来的消息，当有消息到达时，我们使用data:image/png;base64,${data}来为图片img标签设置新的src属性，从而实现实时更新图片的效果。
总结
本文通过介绍 SSE 的原理以及实现步骤，详细地讲解了如何使用 SSE 实现推送图片数据。希望本文对大家学习前端实时双向数据传输有所帮助，同时也希望读者能够在自己的项目中发挥 SSE 的优势，为用户提供更好的实时更新体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a66a3948841e9894305d5d