SSE长连接 EventSource的实时输出
时间: 2023-07-02 21:08:10 浏览: 92
SSE (Server-Sent Events) 是一种用于实现服务器向客户端推送实时数据的技术,它基于HTTP协议,使用长连接来保持客户端和服务器之间的通信,并且服务器可以随时向客户端推送数据。
EventSource 是一个 JavaScript API,用于接收 SSE 服务器端推送的数据,并将其呈现给用户。使用 EventSource API,可以在客户端创建一个 SSE 连接,并监听服务器端推送的事件。当服务器端有新数据时,EventSource 会自动接收并触发相应的事件,从而实现实时输出。
以下是 SSE 和 EventSource 的使用示例:
1. 服务器端:
```python
from flask import Flask, Response
app = Flask(__name__)
@app.route('/stream')
def stream():
def event_stream():
for i in range(10):
yield 'data: %s\n\n' % i
return Response(event_stream(), mimetype="text/event-stream")
```
2. 客户端:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE Demo</title>
</head>
<body>
<ul id="msg-list">
</ul>
<script>
var source = new EventSource("/stream");
source.onmessage = function(event) {
var node = document.createElement("LI");
var textnode = document.createTextNode(event.data);
node.appendChild(textnode);
document.getElementById("msg-list").appendChild(node);
};
</script>
</body>
</html>
```
在上述示例中,服务器端使用 Flask 框架创建一个 SSE 连接,每隔一秒钟推送一个数据,客户端使用 EventSource API 创建一个 SSE 连接,并监听服务器端推送的数据,将数据添加到页面上的列表中。