V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
XIVN1987
V2EX  ›  Python

编写运行在树莓派上的 webapp,,网页端 js 如何与后端 py 代码交互

  •  
  •   XIVN1987 · 2019-04-06 20:17:42 +08:00 · 4556 次点击
    这是一个创建于 2056 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想写一个运行在树莓派上的 app,界面打算用网页开发,这样树莓派就不需要接显示器了

    因为 python 比较熟,所以功能后端功能代码打算用 python 写,web 框架用 bottle 或者 Flask,,但网页端的动态界面(如下拉列表、Switch、按钮)肯定要用 js 编写,,这样就需要在 py 和 js 代码间进行通信,传递状态信息

    现在用的 Websocket 来做,,比如在网页上点下按钮,,js 就通过 websocket 给 py 发送一条消息,,py 接到消息后处理,,根据处理结果通过 websocket 给 js 发送不同的反馈,,js 再根据反馈更改界面(比如更改按钮上的文字)

    这样感觉非常繁琐,,而且很容易造成前端和后端状态不一致

    请问有其他更简洁的状态交互方法吗?

    30 条回复    2019-04-07 23:11:18 +08:00
    LucasLee92
        1
    LucasLee92  
       2019-04-06 20:28:33 +08:00
    写 java 后端的,感觉你的问题刚像是前端的问题,而且就前后端交互来讲,前端发起请求,后端处理返回,前端展示,不是一个很普通的交互吗
    {容易造成前端和后端状态不一致}这个让我很迷惑,状态不都是在后端的吗,前端展示就行了啊
    个人猜测:你可能需要去了解一些前端的框架会有更好的思路
    zwh2698
        2
    zwh2698  
       2019-04-06 20:34:28 +08:00 via Android
    和树莓派无关吧,你这个是要学习 python web 开发吧。找个 python 框架学学
    sunnyadamm
        3
    sunnyadamm  
       2019-04-06 20:35:45 +08:00 via Android
    楼上正解
    tomczhen
        4
    tomczhen  
       2019-04-06 20:38:03 +08:00 via Android
    刚好我有在写一个,虽然没写完,不过你可以参考一下
    https://github.com/TomCzHen/pyPiDashboard
    ayase252
        5
    ayase252  
       2019-04-06 20:38:04 +08:00
    AJAX ?前端发送一个请求给后端,后端处理完给一个响应给前端,前端 UI 根据响应变化。
    wzwwzw
        6
    wzwwzw  
       2019-04-06 20:42:33 +08:00
    肯定是 HTTP 啊。ws 也是可以的,只不过可能后端压力大一点咯。
    XIVN1987
        7
    XIVN1987  
    OP
       2019-04-06 20:43:18 +08:00
    @LucasLee92
    感谢回复,,那看来这种 webapp 做法确实是这个思路了

    你说的是,,状态应该都在后端,,状态和界面不一致肯定是状态同步没做充分,,感谢指点
    Maboroshii
        8
    Maboroshii  
       2019-04-06 20:43:32 +08:00 via Android
    可以参考 aria2 的 rpc 那一套吧
    XIVN1987
        9
    XIVN1987  
    OP
       2019-04-06 20:45:51 +08:00
    @ayase252
    感谢指点,,
    我的一个疑问就是这种情况用 Websocket 好还是用 AJAX 好?
    前端我不懂,所以希望后端多做些、前端尽量少做些,,
    XIVN1987
        10
    XIVN1987  
    OP
       2019-04-06 20:50:10 +08:00
    @tomczhen
    感谢,,学习下,,已 star
    XIVN1987
        11
    XIVN1987  
    OP
       2019-04-06 20:51:55 +08:00
    @zwh2698
    确实和树莓派无关,,不过光学 web 框架也解决不了我的问题吧,,web 框架又不讲前端怎么做,模板也做不出 js 那样的动态效果吧
    XIVN1987
        12
    XIVN1987  
    OP
       2019-04-06 20:53:39 +08:00
    @Maboroshii
    AJAX、Websocket、RPC,,好吧,,我去搜索、比较下哪个合适我,,
    tomczhen
        13
    tomczhen  
       2019-04-06 20:59:25 +08:00
    @XIVN1987 囧,我前端这块还是渣渣一个。

    我是选择了 sanic + websocket,连接 ws 之后后端可以主动推送到前端。采用 ajax 一般都需要前端主动轮询,rpc 那套没看。

    如果不是非要自己造轮子可以看看 cockpit - https://cockpit-project.org/ ,fedora server 默认自带这个。
    ayase252
        14
    ayase252  
       2019-04-06 21:08:37 +08:00
    @XIVN1987
    我不知道你的具体需求,websocket 比较适合像聊天室一样客户端和服务器双向通信的。AJAX 适合只需要客户端向服务器单向通信的。
    XIVN1987
        15
    XIVN1987  
    OP
       2019-04-06 21:16:04 +08:00
    @ayase252
    那看来我要继续用 websocket 了,,
    baojiweicn2
        16
    baojiweicn2  
       2019-04-06 22:00:40 +08:00 via Android
    我觉得 ws 比 ajax 请求更好,也更适合你的场景,当然你要是用 mosquito+ws 的方式做,就更 iot 了
    baojiweicn2
        17
    baojiweicn2  
       2019-04-06 22:01:45 +08:00 via Android
    mosquitto rabbitmq
    Tokin
        18
    Tokin  
       2019-04-06 23:19:25 +08:00
    一般是 py web 写个 rest api,网页调用 api 即可。
    如果是 websocket 的话控制起来更方便呀,为什么你是点击按钮之后再建立 ws 连接呢?
    你应该打开网页的时候就建立 ws 连接,然后点击按钮之后通过 ws 通知后端,后端处理完毕之后再通知前端。
    不需要重复建立 ws 连接,前后端也不会存在“状态不一致”的问题。
    alan0liang
        19
    alan0liang  
       2019-04-06 23:35:04 +08:00 via Android
    学一学 nodejs 吧(跑偏
    XIVN1987
        20
    XIVN1987  
    OP
       2019-04-07 00:12:04 +08:00
    @Tokin
    肯定是刚开始就建立 ws 连接啊,,我就是这么用的
    littlewey
        21
    littlewey  
       2019-04-07 09:45:42 +08:00 via iPhone
    我刚好在写 py 后端的 websocket server 的理由和你一样🤦‍♂️。 用的是 flask-socketio。
    我的做法是 webapp 里用 flask 的地址去 call flask,flask 只是 http RESTful/socketio api server

    https://note.siwei.info/project-resource-board-a-scalable-webapp-with-flask-socketio-and-vue-js/
    littlewey
        22
    littlewey  
       2019-04-07 09:47:50 +08:00 via iPhone
    lz 如果你想快速开始,可以参考我组织形式,我受到了 flack 的启发,不过我的是 side project。 上边 blog 里有 repo 地址。
    XIVN1987
        23
    XIVN1987  
    OP
       2019-04-07 10:17:40 +08:00
    @littlewey
    感谢,,学习下
    iRiven
        24
    iRiven  
       2019-04-07 10:41:11 +08:00 via Android
    我也有类似的区别 我用 grpc,vue.js 配合 ts 比较舒服,如果不是搞前端 一下子学这么多还是很麻烦的
    XIVN1987
        25
    XIVN1987  
    OP
       2019-04-07 10:47:49 +08:00
    @iRiven
    是啊,写起来比 PyQt 麻烦多了,,
    strpbrk
        26
    strpbrk  
       2019-04-07 12:09:33 +08:00
    阿贾克斯
    eyewater
        27
    eyewater  
       2019-04-07 14:31:45 +08:00 via Android
    推荐 Pusher
    https://pusher.com/
    tairan2006
        28
    tairan2006  
       2019-04-07 17:34:22 +08:00
    为啥要拆分前后端…你要是只是为了简洁,逻辑全写 js 里不是最简单么,node 生态不够你用么
    Tokin
        29
    Tokin  
       2019-04-07 21:21:01 +08:00
    @XIVN1987 那我暂时也想不出为什么前后端数据会不一致。。。
    wyc9296
        30
    wyc9296  
       2019-04-07 23:11:18 +08:00 via Android
    websocket 要一直双向通信吧; ajax 更简单好用,浏览器一有动作就可以调用后台的 Python,然后返回 json 之类的数据,支持同步或异步传输。
    话说楼主你的树莓派是插的 sd 卡么,还是硬盘? sd 卡一直读写坏得快吧?
    @XIVN1987
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5251 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 07:28 · PVG 15:28 · LAX 23:28 · JFK 02:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.