HTML5 Server-Sent Events 如何实现多种消息格式？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，HTML5 中的 Server-Sent Events（SSE）是一种用来发送即时更新的数据的技术。它是一个基于 HTTP 的持久连接，服务器可以发送任意数量和任意类型的数据到客户端，客户端会自动接收更新并将其展现在页面上。

默认情况下，SSE 仅支持文本格式的消息。但是在实际应用中，有时候我们需求发送包含 JSON 等复合类型格式的消息。那么，如何通过 HTML5 SSE 实现多种消息格式呢？本文将给出解决方案。

1. 服务端实现

服务端要发送不同类型格式数据的关键在于，在发送数据时指定不同类型。SSE 是通过 HTTP 推送数据到客户端，而 HTTP 协议本身就支持多种格式数据传输，如下所示：

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Access-Control-Allow-Origin: *');

echo "data: {\"name\":\"John\",\"age\":30}\n\n";

上述代码指定了返回的数据格式为 JSON，同时设置 HTTP 头部的 MIME 类型为 text/event-stream。服务端向客户端发送一个名为“message”的消息，并包含名为“data”的属性，该属性指定了需要发送的 JSON 格式数据。

2. 客户端实现

客户端通过 EventSource 对象订阅服务端的 SSE 消息，如下面代码所示：

var eventSource = new EventSource('/stream');

eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  // 处理接收到的消息 
};

当服务端推送消息时，客户端通过 onmessage 事件接收到消息，并使用 JSON.parse 将数据格式化为 JSON 对象。在实际使用中，可以根据需要对接收到的数据对象进行处理和展示。

3. 实现不同类型的消息格式

实现多种类型的消息格式，关键在于服务端和客户端的数据格式处理。下面以通过 HTML5 SSE 实现 JSON 数据格式和 XML 数据格式的推送为例：

(1) JSON 格式

服务端：

// javascriptcn.com 代码示例
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Access-Control-Allow-Origin: *');

$data = [
    'name' => 'John',
    'age' => 30,
];
echo "data:" . json_encode($data) . "\n\n";

客户端：

var eventSource = new EventSource('/stream');

eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  // 处理接收到的消息 
};

(2) XML 格式

服务端：

// javascriptcn.com 代码示例
$xml = new SimpleXMLElement('<user/>');
$xml->addChild('name', 'John');
$xml->addChild('age', 30);

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Access-Control-Allow-Origin: *');

echo "data:" . $xml->asXML() . "\n\n";

客户端：

// javascriptcn.com 代码示例
var eventSource = new EventSource('/stream');

eventSource.onmessage = function(event) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(event.data, "text/xml");
  const name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
  const age = xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
  // 处理接收到的消息 
};

服务端返回 XML 格式数据时，需要先使用 SimpleXMLElement 生成符合 XML 规范的数据，然后使用 asXML 方法将数据转换为字符串，作为 SSE 推送的数据。

客户端接收到 XML 格式数据时，首先需要将返回的字符串数据解析为 XML 对象，然后通过 XML 对象的 API 获取相应的数据进行处理。

4. 总结

通过 HTML5 SSE 实现多种类型消息格式需要服务端和客户端配合，根据实际需求返回对应格式的数据，并在客户端处理数据时，选择相应的解析方式。

本文两个示例演示了在服务端返回 JSON 和 XML 格式数据时，如何在客户端进行接收和处理。通过这两个示例，读者可以根据实际需求扩展实现其他数据格式的推送和接收，如图片、音频、视频等。

HTML5 SSE 技术在实时数据更新和显示方面有较高的实用性和灵活性，应用广泛，相信本文提供的解决方案将对您的项目开发有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650153b895b1f8cacdf107e7