里程碑式更新！Dash 4.2新版本新增websocket型回调

更多Dash应用开发干货知识、案例，欢迎关注"玩转Dash"微信公众号👇

1 简介

大家好我是费老师 。Dash作为流行的Python全栈应用开发 框架，于近日刚发布了其4.2.0正式版本，在本次新版本中，新增了颇具里程碑✨意义的websocket型回调函数机制，使得我们可以在Dash应用回调函数逻辑的编写过程中，通过相关方法在服务端回调函数计算过程中，随时随地 对客户端进行数据传输&控制更新，极大程度上提升了在Dash中开发各种应用功能的能力上限🚀🚀🚀。

今天的文章中，我们就对4.2新版本中最重要的新特性------websocket型回调函数进行简要介绍😉。

2 新版Dash中的websocket型回调

2.1 升级Dash

终端执行下列命令完成新版本Dash的安装升级，这里我们指定额外安装fastapi后端相关依赖，以完美支持新型websocket回调：

pip install dash[fastapi] -U

2.2 在Dash应用中使用websocket型回调

首先，我们需要在应用实例化对应的dash.Dash()中设置参数backend="fastapi"，这是令Dash应用底层完美开启websocket通信的必要前提。

app = dash.Dash(__name__, backend="fastapi")

在此基础上，只需要在对应常规服务端回调函数的callback()中设置websocket=True，该服务端回调函数底层网络通信就会从默认的http传输，切换为高性能websocket传输，下面是一个简单的例子：

import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style
from dash.dependencies import Input, Output

app = dash.Dash(__name__, backend="fastapi")

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdInput(id="input", placeholder="请输入内容"),
                fac.AntdText(id="output"),
            ]
        )
    ],
    style=style(padding=50),
)


@app.callback(Output("output", "children"), Input("input", "value"), websocket=True)
def basic_demo(input_text):

    return input_text


if __name__ == "__main__":
    app.run(debug=True)

切换为websocket通信模式后，除了响应延时 上的显著提升⚡以外，更重要的是，借助websocket双向通信的特点，新版本Dash中，可以实现在回调函数里随时随地 与前端界面进行数据获取&更新，下面我们简单举几个例子：

2.2.1 在websocket回调中实时更新应用

基于新型websocket回调，我们可以在回调函数中配合set_props()，实时更新相关组件属性，譬如下面的实时进度条更新示例：

import dash
import time
from dash import html, set_props
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style
from dash.dependencies import Input

app = dash.Dash(__name__, backend="fastapi")

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdButton(
                    "执行任务",
                    id="execute",
                    loadingChildren="执行中",
                    type="primary",
                    autoSpin=True,
                ),
                fac.AntdProgress(id="progress", percent=0, style=style(width=200)),
            ]
        )
    ],
    style=style(padding=50),
)


@app.callback(Input("execute", "nClicks"), websocket=True, prevent_initial_call=True)
def update_progress(nClicks):

    for i in range(10):
        time.sleep(0.25)  # 模拟计算耗时
        set_props("progress", {"percent": (i + 1) * 10})

    set_props("execute", {"loading": False})


if __name__ == "__main__":
    app.run(debug=True)

2.2.2 在websocket回调中实时获取组件属性

更高级的是，基于新型websocket回调函数，我们还可以在回调函数中，实时获取 任意指定id组件对应的任意属性值（在异步回调函数中使用），譬如下面的例子，我们没有事先在回调函数编排中声明两个输入框角色，但基于get_prop()就可以在回调函数运行的过程中，即时获取想要的属性值：

import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style
from dash.dependencies import Input

app = dash.Dash(__name__, backend="fastapi")

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdButton("触发回调", id="trigger", type="primary"),
                fac.AntdInput(id="input1"),
                fac.AntdInput(id="input2"),
            ]
        )
    ],
    style=style(padding=50),
)


@app.callback(Input("trigger", "nClicks"), websocket=True, prevent_initial_call=True)
async def get_prop_demo(nClicks):

    ws = dash.ctx.websocket

    value1 = await ws.get_prop("input1", "value")
    value2 = await ws.get_prop("input2", "value")

    print(value1, value2)


if __name__ == "__main__":
    app.run(debug=True)

凭借这一新特性，我们可以在Dash应用中更加灵活自由地实现各种高级功能逻辑，特别是对实时更新 要求高的功能场景，譬如当下火热的各种AI智能体 实时输出功能等，接下来我们会通过「玩转Dash」公众号&知识社区，分享更多新版Dash+AI的典型场景案例，敬请期待😎。

---

更多有关Dash应用开发的干货内容，欢迎持续关注我们❤️