前端通信-服务端发送事件: SSE（Server-Sent Events）

作者：System 时间：2024年08月13日分类：所有,ajax 字数：1462

以下是一个使用Python Flask框架创建简单的SSE服务端的示例代码：




from flask import Flask, render_template, Response
import time
import random
 
app = Flask(__name__)
 
def event_stream():
    while True:
        # 生成随机数据用于演示
        data = str(random.randint(0, 100))
        # 发送数据
        yield 'data: {}\n\n'.format(data)
        # 等待一段时间再发送下一个事件
        time.sleep(5)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/stream')
def stream():
    # 设置响应类型为服务端发送事件
    return Response(event_stream(), mimetype="text/event-stream")
 
if __name__ == '__main__':
    app.run(debug=True)

HTML 文件 (index.html):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSE Demo</title>
    <script type="text/javascript">
        if(typeof(EventSource) !== "undefined") {
            var source = new EventSource("/stream");
            source.onmessage = function(event) {
                document.getElementById("result").innerHTML += event.data + "<br>";
            };
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
        }
    </script>
</head>
<body>
    <h1>Server-Sent Events Demo</h1>
    <div id="result">Waiting for messages...</div>
</body>
</html>

在这个例子中，我们创建了一个简单的服务端发送事件服务。服务端每隔5秒钟发送一个随机数据，前端通过 JavaScript 的 EventSource 对象接收这些事件，并更新页面上的显示内容。这个例子演示了如何使用SSE进行服务端主动推送数据到客户端。

前端通信-服务端发送事件: SSE（Server-Sent Events）

评论已关闭

推荐阅读