PyWebIO——免 HTML、JS 快速构建简单 Web 应用的 Python 库

[NeilWang]

和大家分享一下我过去一年投入主要精力写的一个 Python 库——PyWebIO 。

简单说下背景，我之前开发过一个小程序，后台经常有些管理性的操作(比如发布通知、回复反馈等)，最开始是通过 ssh 运行脚本来操作，但感觉不太方便，想做成 Web 页面但又觉得写前后端接口很麻烦。

于是就很希望有一个库，只需要调用一个函数，就可以在浏览器上显示表单，用户提交后函数同步返回表单数据；然后再提供一些函数，可以实时输出各种形式的数据，比如表格、图片、Markdown 等。

这样相当于把浏览器当成了一个富文本终端，编写 Web 服务就像编写控制台程序一样只需要调用输入输出函数就可以完成交互。找来找去，也没找到满意的工具可以实现这种需求，感觉此需求是普遍存在的，就自己开坑写了一个，于是就有了 PyWebIO 。

到现在，除了支持最初设想的输入、输出函数外，PyWebIO 还支持布局、事件绑定、并发、协程、与现有的 Web 应用集成等特性，文档也十分的完善。

总结来说，PyWebIO 能够让你用编写终端程序的逻辑来编写 Web 应用，不需要编写前端页面和后端接口，非常适合在短时间内快速构建对 UI 要求不高的应用（比如自用的 Web 后台、在线小工具等）。PyWebIO 既适合从来没有接触过 Web 开发的程序员来像编写终端程序一样编写 Web 应用，又适合有 Web 开发经验的程序员在自己的 Web 应用中快速实现某些小功能。

关于 PyWebIO 对传统 Web 的优势可以进一步阅读这篇文章：Why PyWebIO 。

GitHub 和文档放在下面了，欢迎大家体验和提出宝贵意见🙏。

Github： https://github.com/wang0618/PyWebIO
文档： https://pywebio.readthedocs.io/ （文档里的绝大部分代码示例都有在线演示的链接）

下面是一些使用 PyWebIO 编写的 Demo 和应用：

• 输入演示：演示 PyWebIO 输入模块的用法
• 输出演示：演示 PyWebIO 输出模块的用法
• 数据可视化：在 PyWebIO 中使用 bokeh 、plotly 、pyecharts 等库进行数据可视化
• 聊天室：不到 80 行代码实现的在线聊天室
• mtag_tool：使用 PyWebIO 编写的用于编辑 MP3 标签的应用

最后贴两个 PyWebIO 输入和输出函数调用效果的动图

类似功能的工具还有 dash 和 streamlit，它们和 PyWebIO 都各有特点。

https://github.com/plotly/dash ：可以用来编写全功能的 Web 页面，虽然不需要编写 html，需要先声明布局，且布局声明后无法动态改变。dash 采用“响应式”的程序模型，非常依赖回调。如果只是简单写一个小应用，dash 显得太重，需要的代码量也比 PyWebIO 更多。

https://github.com/streamlit/streamlit ：可以称得上神器，功能上和 PyWebIO 很相似，streamlit 更专注于机器学习和数据科学领域。不过 streamlit 应用的编写逻辑还是没有终端程序那么自然，但熟悉之后，编写 Web 服务需要的代码量比 PyWebIO 更少，另外，streamlit 不支持整合到现有的 Web 服务。

[zh584728]

再次回复，一个版本可以考虑将 echarts 加入进去吗，pyecharts 也可。

[Beebird]

楼主厉害！

[liqt91]

试了下，集成到 flask，用 gunicorn 启动时一直报错，只能用 app.run()，猜测是和进程绑定了

[NeilWang]

@liqt91 #103 我试了一下，没有发现 gunicorn 报错，可以的话请在 Github 上提一个 issue 。不过由于 PyWebIO 是将会话状态保存在 Server 的进程空间中的，而 PyWebIO 前端与 Flask 又是基于轮询通讯的，如果启用多个 worker，会导致状态错乱（表现就是，显示完内容后还没来得及交互会话就关闭了），目前针对这个问题还没有较好的解决方法。

[longchisihai]

我这启动时候发现了一个问题，ERROR:pywebio.platform.tornado:Open http://localhost:12578 failed. 请问如何解决呢。tornado 版本：6.1 pywebio 版本: 1.0.3 windows 环境

[NeilWang]

@longchisihai #105 这个应该是尝试自动在浏览器中打开地址失败了，可以手动在浏览器中打开这个地址

[M4rs]

厉害！看看介绍就非常想用

[liqt91]

@NeilWang 对，我更正下我的描述，是启动后访问页面报错。具体情况就是你说的显示完内容就失去交互功能了，点击任何交互组件都报错

[hahaha777]

666，mark 一下

[NeilWang]

@liqt91 #108 应该是会话自然关闭了，需要用 pywebio.session.hold() 来保持会话。参见 https://pywebio.readthedocs.io/zh_CN/latest/FAQ.html#put-buttons
下个版本会认真考虑一下是否要添加自动保持会话的支持, 目前需要使用 hold() 来手动保持会话的考量是保持 server 模式和 script 模式的逻辑一致性。

[longchisihai]

@NeilWang 是的 手动打开浏览器就可以了 为什么自动打开浏览器失败呢？ 能否代码层面上修复这个问题呀？我这边也设置了默认浏览器的

[NeilWang]

@longchisihai #111 是因为等待 server 可连通的操作超时了，现在把这个超时时间调大了： https://github.com/wang0618/PyWebIO/commit/65f581de71b4ff2ba1b8c1022f4c76826f98b24e

下个版本就包含这个修复了，在此之前，可以使用 pip3 install -U --force-reinstall https://code.aliyun.com/wang0618/pywebio/repository/archive.zip 安装开发版

[NoUltimate]

好强，不知道 java 和 go 有没有类似的

[v2defy]

太帅了，正是我想要的！

[longchisihai]

@NeilWang #112 我这边定位到的原因是，当把 util.py 中的 wait_host_port 函数中的 try 去掉之后，会报错：
builtins.AttributeError: 'StreamWriter' object has no attribute 'wait_closed'
所以函数返回了 False 不会自动打开浏览器

[NeilWang]

@longchisihai #115 多谢，原来是因为 StreamWriter.wait_closed 是 py3.7 之后才引入的: https://docs.python.org/3/library/asyncio-stream.html#asyncio.StreamWriter.wait_closed

实测了一下，这个 wait_closed 调用看不出有什么影响，所以在 py3.7 之前就不调用了：
https://github.com/wang0618/PyWebIO/commit/9aa75e71e3e578d7e3d85bfe79b6d9588d41fee4

[mon6912640]

有个问题，怎么获取网页连接的状态，就是那个绿色点的状态，有些浏览器（比如 qq ）会反转标签页的颜色，导致绿色点是否灰色这个状态看不出来

[m0cha]

非常厉害！

[fanfpy]

厉害 star 下

[bbbb]

太棒了

[woniu127]

厉害

[lakechan96]

nice work，基于你的框架也写了个小玩意跟大家分享一下～
https://v2ex.com/t/753688

[coreki]

这个牛逼。

[RockShake]

这个想法太酷了，如果有办法原生实现数据修改功能就完美了

[asturias]

太方便了吧

[jinhb]

@liqt91 跟着教程学，到最后。集成。同样没有试试成功！失望，伤心

[jinhb]

请问有各位大佬，集成 Django 有没有成功的？
若有求 Django 版本号和 Python 版本号。

[NeilWang]

@jinhb django>=2.2 就可以，集成不成功具体有什么报错吗？

集成方式可以参考文档： https://pywebio.readthedocs.io/zh_CN/latest/guide.html#integration-with-web-framework

[liqt91]

@NeilWang 看到这个帖子想起来了，之前集成到 flask，希望写一个通过路径直接载入对应 pywebio 脚本的方式来实现：flask 判断不同的路径，再通过 python 的动态载入来载入路径对应的 pywebio 脚本。达到只需要服务端上传新 pywebio 脚本文件，不重启服务就能访问新 pywebio 应用的目的。后来发现应用是绑定 flask 主进程的，无法通过动态载入脚本的方式来访问。当然也可能是我 flask 用的不熟

[NeilWang]

@liqt91 #129 新版本的 pywebio 提供了一个 path-deploy 的功能，和你描述的需求是一致的，只不过后端 server 是 tornado，如果不是非得要用 flask 的话，这个可以满足你的需求。自己参照代码实现一个 flask 版本的也不麻烦

[NeilWang]

@liqt91 #129 这里是 path_deploy 的文档： https://pywebio.readthedocs.io/zh_CN/latest/platform.html#pywebio.platform.path_deploy

[liqt91]

@NeilWang 谢谢 没用过 tornado，不过这个功能挺需要的，后续看下。昨天看到这个帖子顶起来之后，想去用它实现个小应用：1 用户上传若干图片 2 对上传的图片手动调整顺序 3 合并为 pdf 并供用户下载。现在卡在第二步，因为第二步既是第一步的输出，也是第三步的输入。在 put_button 中回调并调整了图片的顺序，如何及时回显？

[NeilWang]

@liqt91 #132 可以使用 scope 机制来对输出做动态调整：将 3 个图片输出到一个 scope 中，然后在用户调整了顺序之后，清空这个 scope，并以新顺序输出图片到这个 scope 。

文档见： https://pywebio.readthedocs.io/zh_CN/latest/guide.html#output-scope

[liqt91]

@NeilWang 可以了，就是每次清空再回显很慢，有点影响使用体验，有局部或者快速刷新的方式吗？ 另外老哥是否方便加个微信？

[NeilWang]

@liqt91 #134 可以用 start_server() 的 static_dir 参数设置静态文件路径，然后上传图片后先把图片保存到 static_dir 文件夹下，这样就能获取到图片的 url，使用 url 来输出图片这样浏览器就可以缓存了（ put_image 支持传入图片 url 来显示图片）

我建了一个交流微信群，有问题需要即时沟通可以加群交流 https://github.com/wang0618/PyWebIO/discussions/63

[jinhb]

安装 DJ2.2 没有报错。view 页写 pywrbio 的代码就行啦。
没有安装例子方式集成

[huangxin888]

来晚了！工作需要，试了 streamlit ，反应太慢不跟手，大神的 pywebio 反应快很多！

[oakcdrom]

大哥，你为什么不建个群呢，我现在遇到个问题，我读取 txt 内容，截取了部分内容，添加到 list 里。。 在 put_table 里，没法多行输出，请问是为什么呢，能给个联系方式吗。。。

[jfds]

太酷了，写小工具超级好用