当前位置: 首页> 文旅> 文化 > Server-Sent Events 服务器发送事件(SSH)

Server-Sent Events 服务器发送事件(SSH)

时间:2025/7/11 0:17:15来源:https://blog.csdn.net/IT_Holmes/article/details/142167499 浏览次数:0次

原文地址:xupengboo

服务器发送事件(Server-Sent Events)

服务器发送事件(SSE) 是 HTML5 中引入的一种技术,允许服务器推送实时更新到客户端,客户端通过一个单向的持久连接接收来自服务器的事件数据。SSE 是基于 HTTP 协议的一种简单的、轻量的实时通信机制,适合需要服务器频繁向客户端发送更新的场景,例如新闻推送、股票价格、比赛比分更新等

工作原理:

  1. 客户端发起请求:客户端通过 EventSource 对象向服务器发起连接。
  2. 服务器保持连接并发送数据:服务器维持这个 HTTP 连接,并以文本流的方式将事件和数据推送到客户端。
  3. 客户端接收事件:客户端监听来自服务器的事件,并根据事件类型进行相应的处理。

SSE是单向通信(服务器主动向客户端推送数据)、SSE使用的是HTTP协议

与 WebSocket 的区别

  • SSE 是单向通信,服务器主动向客户端推送数据,但客户端只能接收,不能向服务器发送数据。
  • WebSocket 是双向通信,客户端和服务器都可以彼此发送消息。
  • SSE 使用标准的 HTTP 协议,而 WebSocket 使用自己的协议(独立于 HTTP 连接)。

案例,index.html

<!DOCTYPE html>
<html>
<body><h1>服务器发送事件示例</h1>
<div id="result"></div><script>// 创建一个 EventSource 对象,连接到服务器const source = new EventSource("http://127.0.0.1:8080/sse");// 监听从服务器接收到的数据事件source.onmessage = function(event) {document.getElementById("result").innerHTML += event.data + "<br>";};// 处理特定类型的事件source.addEventListener("custom-event", function(event) {console.log("收到自定义事件:", event.data);});// 处理错误source.onerror = function() {console.log("连接错误或服务器中断");};
</script></body>
</html>

server.js ,如下:

  • 通过 node server.js 命令 ,启动 服务。
const http = require('http');const server = http.createServer((req, res) => {// 设置 CORS 头,允许所有来源访问 (解决跨域问题)res.setHeader('Access-Control-Allow-Origin', '*');// 允许特定的请求方法(GET, POST, PUT, DELETE)res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');// 允许客户端发送特定的请求头res.setHeader('Access-Control-Allow-Headers', 'Content-Type');// 检查请求的路径是否为 SSE 连接路径if (req.url === '/sse') {// 设置正确的响应头 Content-Type 为 'text/event-stream'res.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache','Connection': 'keep-alive',});// 发送一个事件到客户端res.write('data: Hello, this is a server-sent event!\n\n');// 每隔2秒发送一个时间戳setInterval(() => {res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);}, 2000);} else {// 处理其他请求res.writeHead(404, { 'Content-Type': 'text/html' });res.end('<h1>404 - 页面未找到</h1>');}
});// 服务器监听的端口号
const PORT = 8080;server.listen(PORT, () => {console.log(`服务器已启动,访问地址为 http://localhost:${PORT}`);
});
关键字:Server-Sent Events 服务器发送事件(SSH)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: