什么是 Server-sent Events？
Server-sent Events（SSE）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送实时事件流。SSE 不需要客户端发起请求，服务器可以随时向客户端发送数据。SSE 基于纯文本协议，使用简单，适用于实时通信和数据推送场景。
SSE 的优点
实时性
SSE 可以实现实时推送数据，不需要客户端轮询服务器，大大减少了网络延迟和带宽使用。
简单易用
SSE 基于纯文本协议，使用简单，客户端只需要使用 JavaScript 监听事件流即可。
可靠性
SSE 支持自动重连机制，当网络中断或服务器关闭连接时，客户端会自动重连，确保数据的可靠性。
兼容性
SSE 是基于 HTTP 协议的，可以与现有的 HTTP 协议兼容，不需要额外的插件或软件。
SSE 的应用实例
实时聊天
SSE 可以实现实时聊天，服务器将消息推送给客户端，客户端即时显示消息。以下是一个简单的实现示例：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>实时聊天</title>
</head>
<body>
<h1>实时聊天</h1>
<div id="messages"></div>
<form>
<input type="text" id="message" placeholder="输入消息">
<button type="submit">发送</button>
</form>
<script>
const messages = document.querySelector('#messages');
const messageInput = document.querySelector('#message');
const eventSource = new EventSource('/chat');
eventSource.onmessage = function(event) {
const message = JSON.parse(event.data);
messages.innerHTML += `<p>${message.username}: ${message.message}</p>`;
};
form.addEventListener('submit', function(event) {
event.preventDefault();
const message = messageInput.value;
messageInput.value = '';
fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message })
});
});
</script>
</body>
</html>服务端代码：
// javascriptcn.com 代码示例
const http = require('http');
const fs = require('fs');
const server = http.createServer(function(req, res) {
if (req.url === '/chat') {
if (req.method === 'GET') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
fs.createReadStream('./messages.txt').pipe(res);
} else if (req.method === 'POST') {
let body = '';
req.on('data', function(chunk) {
body += chunk;
});
req.on('end', function() {
const message = JSON.parse(body).message;
const username = 'User'; // 假设用户名为 User
const data = `data: ${JSON.stringify({ username, message })}\n\n`;
fs.appendFile('./messages.txt', data, function() {});
res.end();
});
}
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
fs.createReadStream('./index.html').pipe(res);
}
});
server.listen(3000);实时监控
SSE 可以实现实时监控，服务器将监控数据推送给客户端，客户端即时显示监控数据。以下是一个简单的实现示例：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>实时监控</title>
</head>
<body>
<h1>实时监控</h1>
<div id="monitor"></div>
<script>
const monitor = document.querySelector('#monitor');
const eventSource = new EventSource('/monitor');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
monitor.innerHTML = `CPU 占用率：${data.cpu}%<br>内存占用率：${data.memory}%`;
};
</script>
</body>
</html>服务端代码：
// javascriptcn.com 代码示例
const http = require('http');
const os = require('os');
const server = http.createServer(function(req, res) {
if (req.url === '/monitor') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(function() {
const cpu = os.loadavg()[0];
const memory = Math.round((1 - os.freemem() / os.totalmem()) * 100);
const data = `data: ${JSON.stringify({ cpu, memory })}\n\n`;
res.write(data);
}, 1000);
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<h1>Hello World!</h1>');
}
});
server.listen(3000);总结
SSE 是一种基于 HTTP 的服务器推送技术，它可以实现实时推送数据，使用简单，可靠性高，兼容性好。SSE 可以应用于实时聊天、实时监控等场景。使用 SSE 可以提高应用程序的实时性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c6cf1d2f5e1655d689255