SSE流式EventSourceResponse
时间: 2025-06-03 08:40:40 浏览: 38
### SSE (Server-Sent Events) 流式 `EventSourceResponse` 的实现
#### 创建服务器端逻辑
为了创建一个支持流式的 `EventSourceResponse`,服务器端需要持续不断地向客户端发送消息。这可以通过设置特定的内容类型并保持连接开放来完成。
对于 Python Flask 应用程序来说,可以这样编写:
```python
from flask import Response, stream_with_context
import time
@app.route('/stream')
def stream():
def generate():
while True:
yield f"data: The current server time is {time.time()} \n\n"
time.sleep(1)
return Response(stream_with_context(generate()), mimetype='text/event-stream')
```
这段代码定义了一个 `/stream` 路由,它返回的是一个无限循环生成器函数的结果作为响应体,并指定了 MIME 类型为 `text/event-stream`[^1]。
#### 客户端 JavaScript 配置
在客户端,则需使用 `EventSource` API 来监听来自服务端的数据更新。这里给出一段简单的 HTML 和 JS 例子说明如何操作:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE Example</title>
<script type="application/javascript">
if(typeof(EventSource)!=="undefined") {
var source=new EventSource("/stream");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data + "<br>";
};
source.onerror=function(){
console.error('Error occurred');
source.close();
};
} else {
document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events.";
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
```
上述脚本会在接收到新消息时将其追加到页面上的指定区域;如果发生错误则关闭连接并记录日志[^3]。
#### 处理不同类型的事件
除了默认的消息处理外,还可以针对不同的自定义事件名称注册相应的回调处理器。例如,在服务器端发送带有 `event:` 字段的消息头之后,可以在前端通过 `.addEventListener()` 方法绑定特定事件名的监听器。
```javascript
source.addEventListener('custom-event', function(e) {
// Handle custom event here...
});
```
这种机制允许更加灵活地管理多种类型的通知或状态变化通知[^2]。
阅读全文
相关推荐
















