首页Server-Sent Events (SSE)方式流式传输

Server-Sent Events (SSE)方式流式传输

时间: 2025-04-24 13:14:56 浏览: 32

### 使用 Server-Sent Events (SSE) 实现流式传输 #### SSE 基本概念 Server-Sent Events (SSE) 是一种允许服务器向浏览器推送更新的技术。与 WebSocket 不同的是，SSE 只支持单向通信——即仅由服务器发送给客户端的数据流动[^1]。 #### 客户端实现在 HTML 页面中可以通过 `EventSource` 对象来创建到服务器的连接并监听事件： ```javascript if(typeof(EventSource)!=="undefined") { var source=new EventSource("/stream"); source.onmessage=function(event){ document.getElementById("result").innerHTML+=event.data + "<br>"; }; } else { console.log("您的浏览器不支持 Server-sent events..."); } ``` 上述代码片段展示了如何建立一个简单的 SSE 连接，并将收到的消息显示在一个指定 ID 的 DOM 元素里。 #### 服务端实现对于 Python 开发者来说，在 Flask 或 Django 中设置 SSE 非常简便。下面是一个基于 Flask 的例子: ```python from flask import Flask, Response import time app = Flask(__name__) @app.route('/stream') def stream(): def generate(): while True: yield f"data: {time.strftime('%Y-%m-%d %H:%M:%S')}\n\n" time.sleep(1) return Response(generate(), mimetype='text/event-stream') if __name__ == "__main__": app.run(debug=True) ``` 这段脚本会每秒向已订阅此路径 `/stream` 的所有客户端广播当前时间戳[^2]。 #### 应用实例：文件下载进度条当涉及到大型文件下载时，利用 SSE 技术可以让用户体验更加友好。比如可以在 Spring Boot 后台配合前端框架如 Vue.js 来构建这样的应用案例。每当有新的下载状态变化发生时就触发一次 HTTP 请求返回最新的百分比数值给用户界面展示出来[^3]。

阅读全文