什么是 SSE
Server-Sent Event (SSE) 是 HTML5 标准中的一种新型 Web 技术，它允许客户端从服务器端获得实时的推送事件，而无需轮询。SSE 相较于其他前端技术，有许多优点，比如低延迟、更少的网络带宽占用以及更简单的 Web 页面设计等。
SSE 与其他技术相比，最为显著的优势在于：可以实现服务器端到客户端的推送功能，而且只需要使用 HTTP 协议就可以轻松实现。这比使用 WebSocket 或 WebRTC 等更佳简单，而且对于一些不支持 WebSocket 的老旧浏览器也有良好的兼容性。
如何使用 SSE 推送二进制数据
在 SSE 技术中，我们通常使用服务器端发送一个 EventType 为 "message" 的事件，从而触发客户端的事件监听器来接收当前的推送数据。此时，我们一般是使用纯文本数据格式的数据进行传输，但是当我们需要传输到一些二进制数据的时候，往往会遇到许多问题。
因此，在使用 SSE 技术时，推送二进制数据的正确姿势非常重要，如果做不好容易出现各种问题。比如：字节流被错误处理、字节流丢失、服务端和客户端编码不一致等等。为了解决这些问题，我们可以采用下面的方法来推送二进制数据。
服务端实现推送二进制数据
在服务端实现 SSE 服务时，我们需要保证在发送二进制数据时，正确设置相应的 Content-Type 字段。此时一般会将 Content-Type 设置为 "application/octet-stream"。此外，我们还需要在推送事件的数据部分中，使用 ArrayBuffer 类型的数据对象。
-- -------------------- ---- ------- ----- ---- - --- --------------- -- -- ---- ----- ----- - - ----- ---------- ----- ------------ -- ----- -------- - ---------------------- ----------------------- - --------------- -------------------- ---------------- ----------- ------------- ------------- --- ---------------------- - --------------------- ------------------ -- ------
客户端实现接收二进制数据
在客户端处理 SSE 服务时，我们需要在 event 对象的 data 字段下，将其转换为正确的二进制数据类型。并且，我们多数需要在 JavaScript 中使用 FileReader 来 转换 ArrayBuffer 为对应的二进制数据类型（比如 Image）。
-- -------------------- ---- -------
----- ------ - --- -----------------------
---------------- - --------------- -
----- ---- - --- -------------------------------
----- ---------- - --- -----------------
--- ---- - - -- - - ------------------ ---- -
------------- - ----------------------------
-
----- ------ - --- -------------
------------- - ----------- -
----- --- - --- --------
------- - ----------------
-- -- --- ----
--
---------------------------
--这样，我们就可以轻松实现 SSE 推送二进制数据，并且最大限度减少在数据传输过程中的错误和丢失情况。
总结
SSE 技术的应用已经非常广泛，与 Node.js、WebSocket 等技术相比，SSE 技术有更低的关注度和更广泛的应用领域。而对于前端开发者而言，SSE 技术的掌握，可以让我们更方便的实现数据的实时推送功能，同时也更好的解决了部分网络粘包和丢包的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464a3d1968c7c53b058542d