引言
在单页应用程序（SPA）中，我们通常面临以下两个问题：
- 如何实时交互和更新数据？
- 如何实现事件驱动的异步更新？
Server-sent 事件（SSE）是一项用于实现服务器端推送的技术，可以有效解决上述问题。本文将深入探讨 SSE 的优势以及在前端单页应用程序中的使用技巧。
Server-sent 事件的优势
实时性
SSE 是一项实时向浏览器推送数据的技术。相比于传统的轮询方式，SSE 可以大幅降低客户端和服务器的通信延迟，从而实现更快速、更实时的数据更新。
自定义事件
SSE 允许开发者自定义事件类型和事件数据。这意味着我们可以按需推送特定的数据和事件，从而实现更细粒度的交互和更新。
容错性
SSE 支持自动重连和自动重新接收丢失的数据流。这样，即使网络状况不佳，我们的应用程序也能够保持稳定的数据更新效果。
在前端单页应用程序中使用 SSE 的技巧
基本使用
要在前端单页应用程序中使用 SSE，我们需要做以下几个步骤：
- 创建一个 EventSource 实例。
const source = new EventSource('/sse');- 监听事件类型和事件数据。
source.addEventListener('message', event => {
console.log('Received:', event.data);
});- 在服务器端推送事件数据。
res.write('data: Hello world\n\n');这样，我们就可以在浏览器中接收到服务器端推送的数据，并进行相应的操作和更新。
自定义事件
SSE 允许我们自定义事件类型和事件数据。例如，我们可以推送一个叫做 "update" 的事件，携带特定的数据：
res.write('event: update\n');
res.write('data: {"type": "message", "content": "Hello world"}\n\n');在客户端，我们可以监听该事件类型并进行处理：
source.addEventListener('update', event => {
const data = JSON.parse(event.data);
if (data.type === 'message') {
console.log('Received:', data.content);
}
});这样，我们就可以实现更灵活、更细粒度的交互和更新。
错误处理
SSE 在网络出现异常或超时时，会自动重连或重新接收丢失的数据流。但有时候我们仍然需要在客户端进行错误处理。
例如，如果服务器端在推送数据时出现了错误，可以发送一个带有错误码和错误消息的事件：
res.write('event: error\n');
res.write('id: 1\n');
res.write('data: {"code": 500, "message": "Internal Server Error"}\n\n');在客户端，我们可以监听该事件类型并进行错误处理：
source.addEventListener('error', event => {
const data = JSON.parse(event.data);
console.error(`Error ${data.code}: ${data.message}`);
});这样，我们就可以对错误进行更好的追踪和反馈。
总结
Server-sent 事件是一项强大的技术，可以帮助我们在前端单页应用程序中实现更实时、更灵活、更稳定的数据交互和事件驱动。在实际开发中，我们应该灵活掌握 SSE 的优势和使用技巧，从而实现更高效、更优秀的应用程序。
示例代码
以下是一个基于 Express.js 的 SSE 示例代码。该示例演示了如何实现服务器端推送数据、自定义事件和错误处理：
服务器端：
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.get('/sse', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
let id = 0;
setInterval(() => {
res.write(`id: ${id}\n`);
res.write('event: update\n');
res.write(`data: {"type": "message", "content": "Hello world ${id}"}\n\n`);
id++;
}, 1000);
res.write('event: error\n');
res.write(`id: ${id}\n`);
res.write('data: {"code": 500, "message": "Internal Server Error"}\n\n');
});
app.listen(3000, () => {
console.log('Server listening on http://localhost:3000');
});客户端：
<!DOCTYPE html>
<html>
<head>
<title>Server-sent Events Example</title>
</head>
<body>
<h1>Server-sent Events Example</h1>
<ul id="messages"></ul>
<script>
const source = new EventSource('/sse');
source.addEventListener('update', event => {
const data = JSON.parse(event.data);
if (data.type === 'message') {
const message = document.createElement('li');
message.innerText = data.content;
document.getElementById('messages').appendChild(message);
}
});
source.addEventListener('error', event => {
const data = JSON.parse(event.data);
console.error(`Error ${data.code}: ${data.message}`);
});
</script>
</body>
</html>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a11b54add4f0e0ff93e95a