当我们在前端页面请求服务器数据时，常常会遇到 HTTP/1.1 206 的错误。这个错误提示表示服务器会按照部分内容的方式传输数据，但是客户端发出的请求范围超出了服务器的响应范围。这种情况通常出现在我们使用 SSE（Server-Sent Events）流式传输数据的时候。
SSE 是一种基于 HTTP 协议的服务器向客户端推送数据的技术。SSE 的优点是数据能够实时推送到客户端，而且传输量较小，能够节省网络带宽。然而，如果我们没有按照正确姿势来使用 SSE，就很容易出现 HTTP/1.1 206 的错误，从而导致数据无法正常传输。
接下来，我们将详细介绍如何使用 SSE 实现流式传输数据，并解决出现 HTTP/1.1 206 错误的问题。
1. 建立 SSE 连接
使用 SSE 实现流式传输数据的第一步是建立 SSE 连接。在客户端，我们可以使用 JavaScript 的 EventSource API 来建立 SSE 连接：
----- ----------- - --- --------------------
在这个例子中，我们使用 EventSource 创建一个 SSE 连接，并将发送请求到 /sse URL。
在服务端，我们需要设置正确的响应头信息，使得浏览器能够正确地解析 SSE 返回的数据：
----- ------- - - --------------- -------------------- ---------------- ----------- ------------- ------------ -- ----------------------- ---------
在响应头中，我们设置 Content-Type 为 text/event-stream，表示这是一个 SSE 数据流，Cache-Control 为 no-cache，表示不缓存响应数据，Connection 为 keep-alive，表示连接保持持久性。
2. 传输数据
建立 SSE 连接后，服务端可以使用 res.write() 方法向客户端发送数据：
--------------------- - - ---------------- -------- ------ ------- -- - --------
在上面的例子中，我们使用 res.write() 方法向客户端发送一个 JSON 格式的数据。
需要注意的是，每次发送数据都必须使用 data: 开头，且每个字段必须通过 \n\n（两个换行符）分割，否则客户端将无法正确解析数据，出现 HTTP/1.1 206 错误。
客户端接收到的数据格式如下：
----- - ---------- ------ ------- -
3. 处理 SSE 数据
在客户端，我们可以使用 EventSource 实例的 onmessage 事件来处理 SSE 数据。当服务器发送数据时，onmessage 事件将被触发。我们可以在事件处理程序中解析 JSON 数据：
--------------------- - --------------- - ----- ---- - ----------------------- -------------------------- --
在上面的例子中，当 SSE 服务器发送数据时，将会在控制台中输出 "Hello World!"。
4. 完整示例
下面是一个完整的 SSE 服务器示例代码：
服务端代码：
----- ---- - ----------------
----------------------------------- --------- -
----- ------- - -
--------------- --------------------
---------------- -----------
------------- ------------
--
----------------------- ---------
---------------------- -
----- ---- - ---------------- -------- ------- ----- - - --- -------------------- ---
----------------------- ------
--------------------- - - ---- - --------
-- ------
----------------客户端代码：
----- ----------- - --- -------------------- --------------------- - --------------- - ----- ---- - ----------------------- -------------------------- --
总结
SSE 是一种很好的服务器向客户端实时传输数据的技术。在使用 SSE 进行数据流传输时，我们需要注意发送数据的格式，确保每个字段之间使用两个换行符分割。通过上面的例子，相信大家已经了解了 SSE 数据流传输的使用方法，希望本文可以对前端开发的同学们有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a618af48841e989429dc89