Server-sent Events (SSE) 是一种通过 HTTP 协议向客户端发送服务器端数据的技术，它支持在不刷新页面的情况下实时推送数据。相比于其他实时通信技术，如 Websocket，SSE 更加简单易用，并且可以很方便地与浏览器原生的 EventSource API 配合使用。
在 SSE 中，服务器端通过将数据按照一定的格式序列化为纯文本，然后发送给客户端。但是，在实际应用中，不同的应用场景和数据类型可能对序列化和反序列化的方式有不同的要求。
本文将介绍 SSE 消息序列化与反序列化的基本原理以及一些常见的应用场景和解决方案。
SSE 消息序列化与反序列化的基本原理
在 SSE 中，服务器端发送的消息以一定的格式（通常是纯文本）进行序列化编码，格式如下：
event: {event-name}
id: {event-id}
data: {event-data}
其中，event、id、data 分别代表事件的名称、事件的 ID 和事件的数据。
在客户端接收到这些消息后，需要进行反序列化解码，并将解码后的数据交给处理程序进行处理。
需要注意的是，由于 SSE 的数据都是文本格式，因此在数据类型转换时需要进行一些特殊处理。
SSE 消息序列化与反序列化的应用场景和解决方案
应用场景1：传输大量文本
在很多应用场景中，需要传输大量文本数据，如聊天记录、日志等等。对于这种情况，可以采用 JSON 格式进行数据序列化和反序列化。
示例代码：
// 服务器端序列化
var data = {
username: "John",
message: "Hello SSE!"
};
var encodedData = "data: " + JSON.stringify(data) + "\n\n";
// 客户端反序列化
var source = new EventSource('server.php');
source.onmessage = function(event) {
var data = JSON.parse(event.data);
console.log(data.username + ": " + data.message);
};应用场景2：传输二进制数据
在一些应用场景中，需要传输二进制数据，如图片、音频、视频等等。对于这种情况，可以采用 Blob 格式进行数据序列化和反序列化。
示例代码：
// 服务器端序列化
var data = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]);
var blob = new Blob([data.buffer], {type: "application/octet-stream"});
var encodedData = "data: " + URL.createObjectURL(blob) + "\n\n";
// 客户端反序列化
var source = new EventSource('server.php');
source.onmessage = function(event) {
var url = event.data;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
var data = new Uint8Array(xhr.response);
console.log(String.fromCharCode.apply(null, data));
};
xhr.send();
};应用场景3：传输嵌套数组
在一些应用场景中，需要传输嵌套数组，如实时股票行情等等。对于这种情况，可以采用 XML 格式进行数据序列化和反序列化。
示例代码：
// 服务器端序列化
var data = [
{symbol: "AAPL", price: 137.10},
{symbol: "GOOG", price: 2112.30},
{symbol: "TSLA", price: 652.25}
];
var xml = "<data>";
for (var i = 0; i < data.length; i++) {
xml += "<item>";
xml += "<symbol>" + data[i].symbol + "</symbol>";
xml += "<price>" + data[i].price + "</price>";
xml += "</item>";
}
xml += "</data>";
var encodedData = "data: " + xml + "\n\n";
// 客户端反序列化
var source = new EventSource('server.php');
source.onmessage = function(event) {
var parser = new DOMParser();
var doc = parser.parseFromString(event.data, "application/xml");
var items = doc.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var symbolNode = items[i].getElementsByTagName("symbol")[0];
var priceNode = items[i].getElementsByTagName("price")[0];
var symbol = symbolNode.firstChild.nodeValue;
var price = parseFloat(priceNode.firstChild.nodeValue);
console.log(symbol + ": " + price);
}
};总结
在 SSE 中，消息序列化和反序列化是非常重要的一环。根据不同的应用场景和数据类型，选择合适的序列化和反序列化方式可以大幅提高代码的可维护性和扩展性，也可以减少数据传输的网络流量，提升页面加载速度和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65acb823add4f0e0ff64daa7