ptyhon flask SSE 浏览器和服务器实时通信-例子实时推送随机数到前端画echart曲线图

已于 2022-08-04 18:10:52 修改
阅读量3.1k 收藏 12
点赞数 2
分类专栏： python随笔 文章标签： flask 前端
于 2022-08-04 18:03:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38463737/article/details/126163498
版权

ptyhon flask SSE 浏览器和服务器实时通信-例子实时推送随机数到前端画echart曲线图

注意 SSE 是单向传输通道，只能服务器向浏览器发送。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。

SSE连接只能由客户端浏览器关闭，后端停止发送数据会触发sse的error 事件。可以在前端设置sse的error事件触发时停止sse连接。

适用场景：向服务器请求一些连续数据，而且不用前端给出反馈，而且服务器只负责传输数据。

例子：实时推送随机数到前端画echart曲线图

例子实现图：

询问按钮是开启sse请求，停止按钮是停止sse请求。(目前停止后没有清除图表，可以自行添加)

在这里插入图片描述
app.py

import json
import random
import time
from datetime import datetime

from flask import Flask, Response, render_template, stream_with_context, jsonify

app = Flask(__name__)
random.seed()  # Initialize the random number generator

@app.route('/')
def index():
    return render_template('index2.html')

@app.route('/chart-data')
def chart_data():
    print('chart_data-' * 5)
    def generate_random_data():
        print('generate_random_data-' * 5)
        a = 0  # 设置如果前端不中止SSE连接，就在a=1000时完成数据传输
        while True:
            a += 1
            if a ==1000:
                break
            json_data = json.dumps(
                {'time': a, 'value': random.random() * 100})
            # 1 SSE 返回格式是json字符串，要使用yield返回，字符串后面一定要跟随 \n\n
            yield f"data:{json_data}\n\n"
            time.sleep(1)  # 1s 发送一次
	# 2 stream_with_context 设置SSE连接函数，mimetype="text/event-stream" 是设置SSE返回格式
    response = Response(stream_with_context(generate_random_data()), mimetype="text/event-stream")
    response.headers["Cache-Control"] = "no-cache"
    response.headers["X-Accel-Buffering"] = "no"
    return response

if __name__ == '__main__':
    # 需要开启多线程模式
    app.run(debug=True, port=5143)

前端文件
templates/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Creating Real-Time Charts with Flask</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!--suppress JSUnresolvedLibraryURL -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-5"></div>
            <div class="col-12">
                <div class="card">
<!--                    放置图表的元素-->
                    <div class="card-body" id="mychart" style="width: 900px;height: 400px">
                    </div>
                </div>
                <br>
                <div>
                    <button id="btn1" type="button" class="btn btn-primary">询问</button>
                    <button id="btn2" type="button" class="btn btn-primary">停止</button>
                </div>
            </div>
            <div class="col-5"></div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            var dom = document.getElementById('mychart');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var option;  // 图表参数

            option = {
                title: {
                    text: 'Stacked Line',
                    zlevel: 0,  //默认值
                    z: 6,  //默认值
                },
                // 滚动条配置
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,    //初始化时，滑动条宽度开始标度
                        end: 100,
                        bottom: '3%',
                        height: 10, //组件高度
                        fillerColor: '#3E86FF',
                        borderColor: "transparent",
                        backgroundColor: 'white',//两边未选中的滑动条区域的颜色
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                    },
                    //下面这个属性是里面拖动配置
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        start: 0,//默认为1
                        end: 100,//默认为100
                    }
                ],
                // 显示鼠标接触位置曲线数据
                tooltip: {
                    trigger: 'axis'
                },
                // 曲线图例
                legend: {
                    data: ['Random Dataset', 'Random Dataset2']   //1
                },
                // 曲线框距离图表框的距离
                grid: {
                    top: '15%',
                    left: '5%',
                    right: '140',
                    bottom: '8%',
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                        dataView: {}, // 是否显示出原始数据
                    }
                },
                xAxis: {
                    // x轴配置，两条曲线共用一个x轴
                    type: 'category',
                    boundaryGap: false,
                    data: []  // 2
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    // 两条曲线y轴配置
                    {
                        name: 'Random Dataset',
                        data: [],
                        type: 'line',
                        showSymbol: false,
                        // 配置曲线尾端显示数据格式
                        endLabel: {
                            show: true,
                            formatter: function (params) {
                                return params.seriesName + ': ' + params.data;
                            }
                        },
                        labelLayout: {
                            moveOverlap: 'shiftY'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                    },
                    {
                        name: 'Random Dataset2',
                        data: [],
                        type: 'line',
                        showSymbol: false,
                        endLabel: {
                            show: true,
                            formatter: function (params) {
                                return params.seriesName + ': ' + params.data;
                            }
                        },
                        labelLayout: {
                            moveOverlap: 'shiftY'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                    }
                ] //3

            }
			// 初始化图表
            if (option && typeof option === 'object') {
                // 设置为true的话，就是notMerge，不合并,false的话，就Merge，之前的东西还保留~
                myChart.setOption(option, true);
            }
            //实现了图表跟随窗口大小自适应的需求
            window.addEventListener('resize', myChart.resize);

            // SSE接收
            var source = null;
            $("#btn1").click(function () {
                source = new EventSource("/chart-data");
                // readyState一个 unsigned short 值，代表连接状态。可能值是 CONNECTING (0), OPEN (1), 或者 CLOSED (2)。
                console.log('EventSource.readyState ' + source.readyState);

                // sse 连接开启时回调函数
                source.onopen = function (event) {
                    console.log("onopen");
                    console.log('EventSource.readyState ' + source.readyState);
                }
                // 消息监听，event 是后端返回的数据,相当于python字典
                source.onmessage = function (event) {
                    update_data(event);
                }
                // 监听 error 事件，后端超时没有传输数据时触发
                source.onerror = function (event) {
                    console.log("error happened");
                    source.close();
                    console.log('EventSource.readyState ' + source.readyState);
                }
            })

            // 绑定停止按钮事件
            $("#btn2").click(function () {
                if (source !== null) {
                    source.close();
                    // delete_data();
                }
            })

            // 更新图表数据
            function update_data(event) {
                const data = JSON.parse(event.data);
                console.log(data)
                option.xAxis.data.push(data.time);
                option.series[0].data.push(data.value);
                option.series[1].data.push(data.value + 20);
                myChart.setOption(option, true)
            }

            // 删除图表数据
            function delete_data() {
                option.xAxis.data = [];
                option.series[0].data = [];
                option.series[1].data = [];
                myChart.setOption(option, true);
            }
        });

    </script>
</body>

</html>

参考

使用服务器发送事件 - Web API 接口参考 | MDN (mozilla.org)
Creating Real-Time Charts with Flask (ron.sh)
后端主动向前端推送消息–SSE_故友dd的博客-CSDN博客_后端主动推送数据给前端

集电极
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
flask-sse:Flask 的服务器发送事件
05-29
烧瓶上证所 支持 HTML5Flask 扩展，由提供支持。 发送事件示例： from flask import Flask from flask_sse import sse app = Flask ( __name__ ) app . config [ "REDIS_URL" ] = "redis://localhost" app . register_blueprint ( sse , url_prefix = '/stream' ) @ app . route ( '/send' ) def send_message (): sse . publish ({ "message" : "Hello!" }, type = 'greeting' ) return "Message sent!" 要在网页上接收事件，请使用 Javascript 连接到事件流，如下
数据可视化：基于 Echarts + Python Flask 动态实时大屏-银行监管系统
05-08
利用了python的flask框架和Echarts框架 使用前请仔细阅读Reademe.md 打开后可右击鼠标切换主题 查看页面时地注意事项： <!-- 启动server命令 --> python main.py <!-- 浏览器中输入网址查看大屏（端口为 main.py ...
flask流式输出-SSE服务
weixin_40777649的博客
02-27 797
流式输出
Python实现半双工的实时通信SSE（Server-Sent Events）
make_progress的博客
06-08 520
实现实时通信一般有WebSocket、Socket.IO和SSE（Server-Sent Events）三种方法。WebSocket和Socket.IO是全双工的实时双向通信技术，适合用于聊天和会话等，但相对于SSE比较笨重，SSE适合用于服务器主动向客户端实时推送数据，例如：用于大模型实时对话。WebSocket是一种HTML5提供的全双工通信协议，它基于TCP在客户端和服务器之间建立持久性的连接，实现两者之间实时双向数据通信。
Flask框架里面sse的使用
zwjapple的专栏
04-04 3005
在这个例子中，我们创建了两个 Blueprint，分别对应 `/sse1` 和 `/sse2` 接口。每个 Blueprint 中的函数都返回一个 SSE 数据流，使用 `Response` 类型的响应对象封装。最后在 Flask 应用中注册这两个 Blueprint，即可同时开启两个 SSE 接口。可以在一个 Flask 应用中注册多个 Blueprint，每个 Blueprint 可以对应一个 SSE 接口。
Python Flask 后端向前端推送信息——轮询、SSE、WebSocket
XerCis的博客
10-12 5887
后端向前端推送信息，实现方案有轮询、SSE、WebSocket。本文提供前后端运行代码。
Python flaks-sse 库的简单测试
Spaceack的专栏
12-08 3073
介绍 服务器推送事件： Server-Sent Events, SSE 特点 仅从服务器向客户端实现单向实时通信。 实现简单，基于HTTP协议。 浏览器端有断线重连功能。 支持用户自定义消息类型。 用来传送文本， 二进制需要编码。 flask-sse 实现 flask-sse文档 前置条件 本地Redis服务器 gunicorn gevent, sse是无限事件流，flask处理HTTP请求一次只能响应一个，要需要配合异步服务器使用。 实现 使用官方例子 服务端 sse.py from flask
用Python的flask、tornado和fastapi探索SSE推送服务
江湖人称王某人的程序员
06-18 4433
用Python探索推送服务一、引言二、SSE 实现1、Tornado 框架2、Flask 框架三、WebSocket 实现 一、引言 最近在学习Python服务器框架，考虑到未来可能会用到推送服务，就在此记录一下学习过程。实现推送目前有两种方案比较好，一种是基于HTTP协议的SSE，另外一种是不同于HTTP协议的WebSocket协议，纯理论的我也不太明白，不做说明，网上资料很多。 二、SSE 实现 SSE是基于HTTP协议之上的，因此就得有支持HTTP协议的web框架，这里我对Tornado和Flask都
Web端算法部署+流媒体服务器算法部署+Flask+AI健身+Python-web实时检测效果显示
06-01
python flask实时播放算法处理后的实时视频流。详情：https://blog.csdn.net/qq_34717531/article/details/125079685?spm=1001.2014.3001.5502。 本代码实现python，flask部署web端，可输入图片，视频，RTSP数据流。...
基于Python+Flask websocket 和 vue 的实时聊天项目-毕业设计源码+使用文档（高分优秀项目）
04-14
基于Python+Flask websocket 和 vue 的实时聊天项目-毕业设计源码+使用文档（高分优秀项目） 该项目是个人高分毕业设计项目源码，已获导师指导认可通过，答辩评审分达到97分，在window10/11测试环境严格调试，下载即...
Python 项目开发实战 - Python flask 项目 - 甜橙音乐网源码 - 毕业设计
02-16
通过这个项目，我们可以学习到如何运用Python和Flask来实现Web服务端的功能，并结合前端技术，构建一个完整的交互式音乐网站。 首先，Python的选择是因为其丰富的库支持和清晰的语法结构，使得开发过程更加高效。...
sse_chait:通过flask_sse实现SSE（服务器发送事件）
05-04
此项目通过flask_see实现了SSE功能 SSE:服务器发送事件，传统http请求中，服务方都是被动的接受请求，然后发送数据。但是无法做到服务端主动发送请求给客户端，然而有些时候需要此功能。因此有了SSE或者Websocket技术来实现。SSE实现方式的是半双工，只能在连接建立后服务端发送数据给客户端，相反不行。（Websocket可以） flask_sse官方文档: 博客网址: 开启服务方法： 第一种方法：通过gevent+uWSGI服务器 运行 start_project.sh 脚本 第二种方法: 通过gevent+gunicorn服务器 进入到sse.py目录,输入 gunicorn sse:app --worker-class gevent --workers 4 --bind 127.0.0.1:5000 运行 项目使用方法： 打开 127.0.0.1:5000/ 跳
sseclient:纯Python服务器端事件（SSE）客户端
05-24
适用于Python的服务器端事件（SSE）客户端 SSE事件源的Python客户端与urllib3和requests无缝集成。 安装 $ pip install sseclient-py 用法 import json import pprint import sseclient def with_urllib3 ( url , headers ): """Get a streaming response for the given event feed using urllib3.""" import urllib3 http = urllib3 . PoolManager () return http . request ( 'GET' , url , preload_content = False , headers = headers ) def w
Flask SSE协议接口简单范例
Jinnizz的博客
08-08 1652
这个示例代码使用了Flask框架，并创建了一个/stream路由，当向该路由发送HTTP GET请求时（浏览器中访问http://127.0.0.1:5000/stream），就会返回一个SSE事件流。在事件流中，每次间隔一段时间后会发送一条消息。其中data字段代表消息内容，\n\n表示该条消息结束。
Python-基于fastapi实现SSE流式返回（类似GPT）
weixin_43976964的博客
12-20 5316
最近在做大模型对话相关功能，需要将对话内容流式返回给前端页面（类似GPT的效果）。
python --实现sse推送(nginx配置)、redis
weixin_44634704的博客
07-20 1409
【代码】python --实现sse推送。
python 搭建sse服务
weixin_45592677的博客
03-06 640
【代码】python 搭建sse服务。
Python中使用 WebSocket 和 SSE 实现 HTTP 服务器消息推送
weixin_44777680的博客
03-12 8449
很多时候我们需要实时获取最新数据，但是传统意义上的HTTP请求，必须由客户端向服务端发起请求，服务端再返回相应的数据。那如果我们需要获取实时数据，就要通过HTTP轮询，客户端不间断的向服务器发起请求。这样不断的的请求不但严重加大服务器的压力，还可能因为网络延迟而影响数据的时效性。下面介绍两种方法能够很好的满足业务的需求。 一、WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 链接上进行全双工通信的协议。 优点：双工通信 缺点：需专门定义数据协议，解析数据流，且部分服务器支持不完
推荐开源项目：Flask-SSE — 实现HTML5 Server-Sent Events的Flask扩展
最新发布
gitblog_00055的博客
06-24 451
推荐开源项目：Flask-SSE — 实现HTML5 Server-Sent Events的Flask扩展 项目地址:https://gitcode.com/DazWorrall/flask-sse 项目介绍 Flask-SSE是一个基于Flask的轻量级扩展，用于支持HTML5的服务器推送事件（Server-Sent Events）。借助强大的Redis数据库，它提供了一种简单有效的方式，实现在...
flask-python-前端实时显示后端处理进度
08-01
在Flask中实现前端实时显示后端处理进度可以通过使用WebSocket技术来实现。WebSocket是一种基于TCP的协议，可以实现双向通信，使得前后端能够在同一个连接上进行实时的数据交换。 首先，我们需要在Flask中使用WebSocket，可以使用Flask-SocketIO来方便地实现WebSocket功能。安装Flask-SocketIO后，我们可以在Flask应用中使用socketio对象来实现WebSocket的功能。 在后端代码中，我们可以通过在任务处理函数中发送进度信息给前端。例如，我们可以在任务处理函数的循环中，使用socketio的emit函数发送当前任务的进度信息。前端页面将通过监听WebSocket消息的方式接收进度信息。 在前端代码中，我们需要在页面中引入SocketIO的JavaScript库，并创建一个SocketIO对象。然后，我们可以使用socket.on()函数来监听后端发送的进度信息，并根据接收到的进度信息来更新前端页面上的进度显示。 需要注意的是，为了防止过多的WebSocket连接导致性能问题，我们可以考虑使用Flask-SocketIO提供的命名空间和房间功能。通过使用命名空间和房间，我们可以将客户端分组，只向特定的客户端发送进度信息。 总结起来，实现Flask和前端实时显示后端处理进度的关键步骤是：在Flask应用中使用Flask-SocketIO实现WebSocket功能，后端任务处理函数中使用socketio对象发送进度信息，前端页面中使用SocketIO对象监听进度信息并更新页面显示。这样就能够实现前端实时显示后端处理进度的功能了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值