基于SSE的实时消息推送系统
随着现代Web应用的不断发展，实时消息推送成为了用户体验的重要一部分。SSE（Server-Sent Events）是一种以单向方式从服务器向浏览器推送事件的技术，适用于实时数据更新场景。本文将探讨如何使用SSE实现简单的消息实时推送，并通过代码示例进行说明。
1. SSE概述
SSE允许服务器主动向客户端推送消息，而不需要在客户端频繁地发送请求。这使得应用程序能够在接收到新消息时即时更新界面，用户体验更为流畅。
2. 后端实现
在后端，我们可以使用Node.js和Express框架来实现SSE。以下是一个简单的Node.js应用示例，设置了一个SSE端点来推送消息。
// server.js
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;
app.use(cors());
// 存储消息的数组
let messages = [];
// 设置SSE端点
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 每当有新的消息推送时，向客户端发送事件
const sendEvent = () => {
if (messages.length > 0) {
const message = messages.shift(); // 获取并移除第一个消息
res.write(`data: ${JSON.stringify(message)}\n\n`);
}
};
const intervalId = setInterval(sendEvent, 1000);
// 处理客户端断开连接
req.on('close', () => {
clearInterval(intervalId);
});
});
// 模拟消息生成
setInterval(() => {
const newMessage = { text: `新消息：${Math.random()}` };
messages.push(newMessage);
}, 3000);
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
在上面的代码中，我们创建了一个Express服务器，并设置了一个SSE端点/events。每当有新的消息生成时，服务器会将消息推送给连接的客户端。
3. 前端实现
接下来，我们在前端使用JavaScript来连接这个SSE端点并处理消息。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE实时消息推送</title>
</head>
<body>
<h1>实时消息推送</h1>
<ul id="messages"></ul>
<script>
const messageList = document.getElementById('messages');
// 创建SSE连接
const eventSource = new EventSource('http://localhost:3000/events');
// 监听消息
eventSource.onmessage = function(event) {
const newMessage = JSON.parse(event.data);
const listItem = document.createElement('li');
listItem.textContent = newMessage.text;
messageList.appendChild(listItem);
};
// 处理错误
eventSource.onerror = function() {
console.error('EventSource failed.');
eventSource.close();
};
</script>
</body>
</html>
在这个简单的HTML页面中，我们使用EventSource对象来连接SSE服务端。每当服务器推送新的消息时，onmessage事件会被触发，新的消息会被添加到页面中。
4. 总结
通过以上示例，我们可以看到，使用SSE进行消息实时推送非常简单有效。它减少了客户端的请求频率，使得实时更新变得更加流畅。虽然SSE不支持双向通信，但对于大多数只需从服务器推送消息的应用场景（如聊天应用、通知系统等）来说，SSE都是一个很好的选择。
如果希望对实时推送进行更多的探索或实现更复杂的功能，建议同时考虑WebSocket等技术，以满足不同的需求。
![[前端]单点登录 SSO](http://img.makehui.com/231.jpg)
