在前端开发中，很多时候需要实时更新数据，而传统的轮询方式会带来很多不必要的网络请求和资源浪费。Server-Sent Events（SSE）和 JSON 是一种新型的数据通信方式，可以在服务器端有新数据时自动将数据推送到客户端，而无需额外的请求。但这种技术也存在一些坑和需要特别注意的地方。
SSE（Server-Sent Events）
SSE 是一种 HTML5 提供的新型技术，简单来说，它是一种服务器向客户端发送自动更新事件的技术，类似于 WebSocket，但相对于 WebSocket，SSE 更加轻量级且易于实现。在 SSE 中，服务器不间断地向客户端推送数据，而客户端只需在事件监听器中处理数据即可。
下面是一个 SSE 的示例代码：
服务端代码
-- -------------------- ---- -------
----- ------- - ------------------
----- ---- - ---------------
----- --- - ---------
----- ------ - ----------------------
--------------- ----- ---- -- -
----------------------------- --------------------
------------------------------ -----------
--------------------------- -------------
------------------
-------------- -- -
----- ---- - -
----- --- ----------------------------
-
---------------- -----------------------------
-- -----
--
-------------------这里的 /sse 路径相当于一个 SSE 服务，每 1 秒钟会向客户端推送一个时间戳的数据。在代码中，我们设置了一些响应头，确保客户端可以正确接收 SSE 数据。内容如下：
- Content-Type: 设置为 text/event-stream
- Cache-Control: 设置为 no-cache，确保客户端不会将数据缓存
- Connection: 设置为 keep-alive，确保连接不被断开
客户端代码
const eventSource = new EventSource('/sse')
eventSource.onmessage = (event) => {
console.log(JSON.parse(event.data))
}这里是客户端的代码，通过 new EventSource('/sse') 建立与 SSE 服务的连接，同时添加了一个事件监听器，每当服务端发送新数据时，会触发 onmessage 事件，并在控制台上输出数据。
JSON（JavaScript Object Notation）
JSON 是一种轻量级的数据格式，既能用于数据的存储和交换，也能用于代码的表示。在前端中，JSON 通常被用于客户端与服务端之间的数据交换。相较于 XML，JSON 更加小巧轻便，易于读写，并且在一些应用场景中，JSON 比 XML 轻快了远远更多，数据交换起来更加高效。
下面是一个 JSON 的示例代码：
客户端向服务端发送 JSON 数据
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-
----- --- - --- ----------------
---------------------- - -- -- -
-- --------------- --- - -- ---------- --- ---- -
-----------------------------
-
-
---------------- --------
------------------------------------ ---------------------------------
------------------------------这里是客户端向服务端发送 JSON 数据的例子，通过 XMLHttpRequest 实现数据的发送，并且设置请求头为 Content-Type: application/json;charset=UTF-8，确保服务端可以正确解析 JSON 数据。
服务端接收 JSON 数据
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ----------------------- ----------------- ----- ---- -- - ----- ---- - -------- ----------------- -------------- -- ----------------
这里是服务端接收 JSON 数据的代码，通过 express 框架的 express.json() 中间件，可以将请求的 JSON 数据解析为 JavaScript 对象，并存储在 req.body 中，此处直接将数据原样返回给客户端。
坑与解决方案
在使用 SSE 和 JSON 进行数据通信时，还存在一些需要注意的地方，下面列举了一些可能会遇到的坑，并提供了解决方案。
坑1：浏览器兼容性问题
虽然 SSE 和 JSON 都是 HTML5 提供的技术，但是在不同浏览器中的兼容性有所差异，需要特别注意。目前，大部分主流浏览器已经完全支持 SSE 和 JSON，但是如果需要兼容更老的浏览器，比如 IE10，就需要使用特殊的解决方案，比如引入 Polyfill 库等。
坑2：编码问题
当服务端返回 UTF-8 编码的文本时，需要确保客户端正确解析。在使用 SSE 时，响应头应该包含 charset=utf-8。在使用 JSON 时，请求头应该包含 charset=utf-8，同时服务端返回的数据也应该是 UTF-8 编码的。
坑3：跨域问题
使用 SSE 和 JSON 进行数据通信时，可能会遇到跨域问题，需要特别处理。在使用 SSE 时，需要确保服务端返回的响应头中包含 Access-Control-Allow-Origin，允许跨域访问。在使用 JSON 时，同样需要设置 Access-Control-Allow-Origin 响应头，同时客户端也需要发送 Origin 请求头。
解决方案
- 浏览器兼容性问题：需要引入 Polyfill 库，对不同浏览器进行兼容性处理。
- 编码问题：响应头中应包括
charset=utf-8，确保客户端正确解析 UTF-8 编码的数据。 - 跨域问题：响应头中应该包含
Access-Control-Allow-Origin，允许跨域访问，客户端应该发送Origin请求头。
总结
SSE 和 JSON 是一种新型的数据通信方式，在前端开发中具有很大的实用价值。但是，在实际开发中也存在着一些坑和需要注意的地方，比如兼容性问题、编码问题和跨域问题等。需要在开发过程中特别注意这些问题，并及时采取解决措施，确保数据通信的顺利进行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7fa6348841e989449b5d4