在前端开发中，HTML5 中的 Server-Sent Events（SSE）是一种用来发送即时更新的数据的技术。它是一个基于 HTTP 的持久连接，服务器可以发送任意数量和任意类型的数据到客户端，客户端会自动接收更新并将其展现在页面上。
默认情况下，SSE 仅支持文本格式的消息。但是在实际应用中，有时候我们需求发送包含 JSON 等复合类型格式的消息。那么，如何通过 HTML5 SSE 实现多种消息格式呢？本文将给出解决方案。
1. 服务端实现
服务端要发送不同类型格式数据的关键在于，在发送数据时指定不同类型。SSE 是通过 HTTP 推送数据到客户端，而 HTTP 协议本身就支持多种格式数据传输，如下所示：
--------------------- -------------------- ---------------------- ----------- ------------------------------------ ---- ---- ------ ------------------------------------
上述代码指定了返回的数据格式为 JSON，同时设置 HTTP 头部的 MIME 类型为 text/event-stream。服务端向客户端发送一个名为“message”的消息，并包含名为“data”的属性，该属性指定了需要发送的 JSON 格式数据。
2. 客户端实现
客户端通过 EventSource 对象订阅服务端的 SSE 消息，如下面代码所示：
--- ----------- - --- ----------------------- --------------------- - --------------- - ----- ---- - ----------------------- -- -------- --
当服务端推送消息时，客户端通过 onmessage 事件接收到消息，并使用 JSON.parse 将数据格式化为 JSON 对象。在实际使用中，可以根据需要对接收到的数据对象进行处理和展示。
3. 实现不同类型的消息格式
实现多种类型的消息格式，关键在于服务端和客户端的数据格式处理。下面以通过 HTML5 SSE 实现 JSON 数据格式和 XML 数据格式的推送为例：
(1) JSON 格式
服务端：
--------------------- --------------------
---------------------- -----------
------------------------------------ ----
----- - -
------ -- -------
----- -- ---
--
---- ------- - ------------------ - -------客户端：
--- ----------- - --- ----------------------- --------------------- - --------------- - ----- ---- - ----------------------- -- -------- --
(2) XML 格式
服务端：
---- - --- ---------------------------- ---------------------- -------- --------------------- ---- --------------------- -------------------- ---------------------- ----------- ------------------------------------ ---- ---- ------- - ------------- - -------
客户端：
--- ----------- - --- ----------------------- --------------------- - --------------- - ----- ------ - --- ------------ ----- ------ - ---------------------------------- ------------ ----- ---- - --------------------------------------------------------------- ----- --- - -------------------------------------------------------------- -- -------- --
服务端返回 XML 格式数据时，需要先使用 SimpleXMLElement 生成符合 XML 规范的数据，然后使用 asXML 方法将数据转换为字符串，作为 SSE 推送的数据。
客户端接收到 XML 格式数据时，首先需要将返回的字符串数据解析为 XML 对象，然后通过 XML 对象的 API 获取相应的数据进行处理。
4. 总结
通过 HTML5 SSE 实现多种类型消息格式需要服务端和客户端配合，根据实际需求返回对应格式的数据，并在客户端处理数据时，选择相应的解析方式。
本文两个示例演示了在服务端返回 JSON 和 XML 格式数据时，如何在客户端进行接收和处理。通过这两个示例，读者可以根据实际需求扩展实现其他数据格式的推送和接收，如图片、音频、视频等。
HTML5 SSE 技术在实时数据更新和显示方面有较高的实用性和灵活性，应用广泛，相信本文提供的解决方案将对您的项目开发有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650153b895b1f8cacdf107e7