Content-Type:text/event-stream
时间: 2025-01-18 19:35:59 AIGC 浏览: 89
### 实现服务器发送事件(SSE)
为了实现服务器发送事件(Server-Sent Events, SSE),可以采用Node.js作为服务端技术栈,并利用`text/event-stream` MIME类型来传输数据。下面展示了一个简单的例子,说明如何创建一个支持SSE的应用程序。
#### 创建Node.js Server
首先,在Node.js环境中安装必要的依赖项:
```bash
npm init -y
npm install express
```
接着编写如下所示的服务端代码[^1]:
```javascript
const express = require('express');
const app = express();
const port = 3000;
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream'); // 设置响应头部为event stream格式[^2]
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
let i = 0;
const sendEvent = () => {
if (!res.headersSent && req.socket.writable) {
try {
res.write(`data: Event ${i}\n\n`);
i++;
} catch (err) {
console.error(err);
}
}
};
setInterval(sendEvent, 1000);
req.on('close', () => {
clearInterval(sendEvent);
console.log(`${req.url} Connection closed`);
});
});
app.listen(port, () => {
console.log(`Listening on http://localhost:${port}`);
});
```
这段脚本启动了一个Express Web服务器监听于指定端口上,并定义了一条路由处理来自客户端对于`/events`路径下的请求。每当接收到新的连接时,会每隔一秒向客户端推送一条消息直到连接被关闭为止。
#### 客户端接收事件
在浏览器中通过JavaScript可以直接访问上述API并实时获取更新的数据流。这里给出一段HTML页面中的JS片段用来订阅这些事件通知:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE Example</title>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined") {
var source=new EventSource("/events");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}else{
document.getElementById("result").innerHTML="Your browser does not support server-sent events.";
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
```
此网页会在加载完成后尝试建立到服务器的持久化链接以持续接受新产生的事件信息;一旦成功建立起这样的通信渠道,则每次有新的消息传入都会触发相应的回调函数从而动态刷新显示区域内的内容。
阅读全文
相关推荐




















