引言
Server-Sent Events (SSE) 是一种轻量级的服务器推送技术，它可以允许服务端向浏览器客户端发送单向的数据流。
在前端应用程序中，我们经常需要通过多层数据传递来展示实时数据或实时通知。例如电子商务网站的在线购物，在用户提交订单后，服务端会推送通知给用户，展示订单状态等信息。
SSE 可以很好地解决这类场景下的数据传递问题，本文将介绍如何使用 SSE 实现多层数据传递。
SSE 如何工作
SSE 是一种基于 HTTP/1.1 的协议，可以使用 XMLHttpRequest 或 Fetch API 从服务端获取事件流。
SSE 的核心是事件流，服务端通过设置响应头 Content-Type 为 text/event-stream，将数据分成多个事件，每个事件用一行分隔，然后在每个事件之间设置一个空行。
浏览器通过 EventSource API 使用 SSE，只需要给 EventSource 对象传递服务端地址，就可以自动接收服务器端推送的事件流，并将事件解析为 JavaScript 事件对象。
使用 SSE 实现多层数据传递
在实现多层数据传递的场景下，SSE 可以将数据分为两类：
服务端产生的事件，包含需要传递给前端的数据。
前端产生的事件，用于向服务端发送需要修改的数据。
服务端代码
我们先来看一下服务端实现多层数据传递的示例代码：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 发送初始数据，用于初始化页面
response.write('event: init\n');
response.write(`data: ${JSON.stringify(getInitialData())}\n\n`);
// 监听前端发送的事件
request.on('data', function (data) {
const eventData = JSON.parse(data);
switch (eventData.type) {
case 'updateUserInfo':
// 处理更新用户信息的事件
const updatedUserInfo = updateUserInfo(eventData.data);
response.write('event: updateUserInfo\n');
response.write(`data: ${JSON.stringify(updatedUserInfo)}\n\n`);
break;
case 'submitOrder':
// 处理提交订单的事件
const orderStatus = submitOrder(eventData.data);
response.write('event: submitOrder\n');
response.write(`data: ${JSON.stringify(orderStatus)}\n\n`);
break;
}
});
}).listen(8080);在服务端代码中，我们首先设置响应头，让浏览器知道我们要发送一个事件流。
然后，在服务端发送初始事件，用于初始化页面。
最后，我们监听浏览器发送的事件，并根据事件的类型处理不同的业务逻辑。当服务端需要给浏览器传递数据时，使用 response.write() 方法发送一个事件。浏览器通过 EventSource API 接收服务端传来的事件。
前端代码
接下来我们看一下前端代码，如何使用 SSE 接收事件，以及如何发送事件：
// javascriptcn.com 代码示例
const eventSource = new EventSource('/sse');
// 处理服务端推送的事件
eventSource.onmessage = function (event) {
const eventData = JSON.parse(event.data);
switch (eventData.type) {
case 'init':
// 初始化页面
initView(eventData.data);
break;
case 'updateUserInfo':
// 处理更新用户信息的事件
updateUserInfo(eventData.data);
break;
case 'submitOrder':
// 处理提交订单的事件
submitOrder(eventData.data);
break;
}
};
// 向服务端发送事件
function sendEvent(type, data) {
const event = { type, data };
const xhr = new XMLHttpRequest();
xhr.open('POST', '/sse');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(event));
}在前端代码中，我们通过 EventSource('/sse') 创建了一个 SSE 连接，并监听 onmessage 事件来处理服务端推送的事件。
在 sendEvent() 方法中，我们创建了一个 XMLHttpRequest 对象，向服务端发送了一个事件。在发送事件时，我们需要设置请求方法为 POST，并将事件数据以 JSON 字符串的形式传递。
总结
本文介绍了如何使用 Server-Sent Events 实现多层数据传递。
通过使用 SSE，我们能够实现服务端向浏览器客户端发送单向的数据流，实现实时数据传递或实时通知等功能。
在实际应用中，需要根据业务需求和实际情况来设计数据传递的方式，以及对事件进行分类和处理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653a39007d4982a6eb41746e