首页请帮我实现一个功能，前端有一个按键，如果按下按键，后端会用sse流式向前端传输数据，并显示在p标签内，后端用flask框架

请帮我实现一个功能，前端有一个按键，如果按下按键，后端会用sse流式向前端传输数据，并显示在p标签内，后端用flask框架

时间: 2024-02-01 10:03:23 浏览: 139

好的，下面是一个使用 Flask 和 SSE 技术实现向前端传输数据的示例代码：后端代码： ```python from flask import Flask, Response app = Flask(__name__) # 生成SSE格式数据 def generate_sse(data): return f"data: {data}\n\n" # SSE接口 @app.route('/stream') def stream(): def generate(): for i in range(10): data = f"This is event {i}" yield generate_sse(data) return Response(generate(), mimetype='text/event-stream') if __name__ == '__main__': app.run(debug=True) ``` 在这个示例中，我们定义了一个 `/stream` 路由，它会返回一个 SSE 格式的数据流，数据流包含了 10 个事件，每个事件的数据都是一个字符串。在实际应用中，您可以根据自己的需求修改数据来源。前端代码： ```html <!DOCTYPE html> <html> <head> <title>SSE Example</title> </head> <body> <button onClick="startStream()">Start Stream</button> <p id="stream"></p> <script> function startStream() { const source = new EventSource('/stream'); source.onmessage = (event) => { const stream = document.getElementById('stream'); stream.innerText += `${event.data}\n`; } } </script> </body> </html> ``` 这个示例中，我们定义了一个按钮和一个 p 标签，当用户点击按钮时会调用 `startStream()` 函数，该函数会使用 EventSource 对象发起一个 SSE 请求，然后在接收到数据时将数据添加到 p 标签中。在实际应用中，您可以根据自己的需求修改数据的显示方式。

阅读全文