在现代 Web 应用程序中，实时通信已成为了必不可少的功能。其中，Server-Sent Events（SSE）是一种非常有用的实时通信技术，它允许服务器向客户端推送实时事件。SSE 不需要像 WebSocket 那样建立一个全双工的连接，而是使用 HTTP 长连接来保持连接的打开状态，从而实现实时推送。
本文将介绍如何使用 SSE 推送实时自定义事件，并提供示例代码和指导意义。
SSE 基础概念
SSE 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端推送实时事件。SSE 的基本工作原理是：客户端通过一个 HTTP 连接向服务器发出请求，服务器保持连接的打开状态，并向客户端推送事件。客户端通过 JavaScript 事件监听器来处理推送的事件。
SSE 使用了一个名为 EventSource 的 JavaScript API，通过该 API 可以建立一个 SSE 连接，并监听服务器推送的事件。当服务器推送事件时，EventSource API 会触发一个 message 事件，开发人员可以通过监听该事件来处理推送的事件。
SSE 的优点是它不需要像 WebSocket 那样建立一个全双工的连接，因此它比 WebSocket 更容易实现和维护。同时，SSE 支持跨域请求，因此它可以用于实现跨域的实时通信。
SSE 实现实时自定义事件
SSE 支持自定义事件，因此可以使用 SSE 来推送自定义事件。下面是一个使用 SSE 推送自定义事件的示例代码：
// www.javascriptcn.com code example
// 创建 SSE 连接
const eventSource = new EventSource('/events');
// 监听自定义事件
eventSource.addEventListener('customEvent', event => {
console.log('Received custom event:', event.data);
});
// 监听错误事件
eventSource.onerror = error => {
console.error('EventSource error:', error);
};在上面的示例代码中，我们首先创建了一个 SSE 连接，并指定了服务器端的事件源 URL。然后，我们监听了一个自定义事件，当服务器推送该事件时，就会触发监听器，并输出事件数据。最后，我们还监听了错误事件，以处理 SSE 连接错误。
在服务器端，我们需要生成 SSE 事件并将其推送到客户端。下面是一个使用 Node.js 和 Express 框架实现 SSE 推送自定义事件的示例代码：
// www.javascriptcn.com code example
const express = require('express');
const app = express();
// 设置静态文件目录
app.use(express.static('public'));
// SSE 事件源
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
// 推送自定义事件
setInterval(() => {
const data = JSON.stringify({ message: 'Hello, world!' });
res.write(`event: customEvent\n`);
res.write(`data: ${data}\n\n`);
}, 1000);
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的示例代码中，我们首先设置了静态文件目录，并指定了 SSE 事件源的路由为 /events。然后，我们在该路由处理程序中设置了响应头，以指定响应的内容类型为 text/event-stream，并禁用缓存。最后，我们使用 setInterval 函数定时推送自定义事件，并将事件数据以 JSON 格式发送到客户端。
指导意义
使用 SSE 推送实时自定义事件可以实现实时通信，从而提升 Web 应用程序的用户体验。SSE 不需要建立全双工的连接，因此更容易实现和维护。同时，SSE 支持跨域请求，可以用于实现跨域的实时通信。
在使用 SSE 时，需要注意以下几点：
- SSE 使用 HTTP 长连接来保持连接的打开状态，因此需要注意服务器的资源占用情况。
- SSE 不支持断线重连，因此需要在客户端实现断线重连机制。
- SSE 支持自定义事件，因此需要在服务器端生成自定义事件，并在客户端监听该事件。
- SSE 支持跨域请求，因此需要在服务器端设置 CORS 头以允许跨域请求。
综上所述，SSE 是一种非常有用的实时通信技术，它可以用于实现实时通信，提升 Web 应用程序的用户体验。在使用 SSE 时，需要注意一些细节，以确保应用程序的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0df31a941bf71341d10d9