HTTP协议中的SSE(Server-Sent Events)是一种允许服务器主动向客户端发送消息的技术。与传统的HTTP请求-响应模式不同,SSE允许服务器在客户端请求之后,继续向客户端推送消息,而无需客户端再次发起请求。
SSE的主要特点包括:
单向通信:SSE主要用于服务器向客户端推送消息,而不是客户端向服务器发送消息。
持久连接:一旦客户端与服务器建立了SSE连接,这个连接就会保持打开状态,直到客户端或服务器决定关闭它。
基于标准HTTP协议:SSE使用标准的HTTP协议,因此它可以很容易地集成到现有的Web应用中。
事件驱动:SSE允许服务器发送事件消息,客户端可以监听这些事件并相应地做出反应。
易于实现:大多数现代浏览器都支持SSE,因此开发者可以很容易地在Web应用中实现这一功能。
SSE的使用场景包括:
实时通知:例如,股票价格更新、新闻订阅等。
聊天应用:实时消息传递。
进度条更新:例如,文件上传进度。
SSE的基本用法是,客户端通过HTTP请求订阅服务器上的某个事件源,服务器响应这个请求并保持连接打开,然后可以在任何时候发送消息到客户端。客户端接收到消息后,可以解析这些消息并更新页面内容。
这里是一个简单的SSE示例:
服务器端(Node.js):
JavaScript复制
const http = require('http');http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); const intervalId = setInterval(() => { res.write(`data: ${new Date().toLocaleTimeString()}\n\n`); }, 1000); req.on('close', () => { clearInterval(intervalId); });}).listen(8080);
客户端(HTML):
HTML复制
<!DOCTYPE html><html><head> <title>SSE Example</title></head><body> <h1>Server-Sent Events</h1> <div id="events"></div> <script> const eventSource = new EventSource('/sse'); eventSource.onmessage = function(event) { const newElement = document.createElement('div'); newElement.textContent = 'Message: ' + event.data; document.getElementById('events').appendChild(newElement); }; </script></body></html>
在这个例子中,服务器每隔一秒向客户端发送当前的时间,客户端接收到消息后将其显示在页面上。