会飞的猪_2020 发表于 2024-4-23 17:28:46

ESP实现webserver的例程,感觉很有意思。

创业1年做生产力工具,6合1触屏版串口调试助手iUART K1,6种串口转换方式
https://www.armbbs.cn/forum.php?mod=viewthread&tid=122565&fromuid=32469
(出处: 硬汉嵌入式论坛)


看到了论坛老哥的这个东西,里面有说可以用网页去实现。

然后我就翻了一下esp32的demo,有个很好玩的例程--》restful_server

它里面是用vue写的前端生成的网页,然后在esp32上面跑。

感觉它这个是可以实现把这个串口助手页面做到网页上去的。


static/image/hrline/4.gif
我感觉esp32 demo的界面做的很漂亮。。感觉可以去翻翻vue怎么写的教程,去看看咋实现一个。

eric2013 发表于 2024-4-23 19:01:42

这个也是基于ESP32的,非常不错的设计。

Web版开源示波器
https://www.armbbs.cn/forum.php? ... d=123139&fromuid=58
(出处: 硬汉嵌入式论坛)

会飞的猪_2020 发表于 2024-4-29 10:55:33

我实际去尝试做这个的时候,遇到了点问题...
Q1.发现单纯的webserver后端没办法主动给前端发消息,那么网页如何实时获取到串口数据。
1.客户端定时刷新。每隔一段时间去GET
2.使用websocket。

我这里尝试了一下websocket

static/image/hrline/4.gif
这个时候还有一个多个设备 同时存在的问题。
如果有多个设备同时存在,那么每个设备都需要一个自己的url。

前端要怎么知道自己对应后端的url呢?



static/image/hrline/4.gif




会飞的猪_2020 发表于 7 天前

试了一下websocket,搞了一个测试的demo。

前后端分离,后端可以跑在ESP32上用ws_echo_server这个例程。
这个例程是一个websocket回环,你发什么,它会回复什么。(当然我们很简单就把它改成和串口相互连接)

然后前端用vue写。测试了一下类似这样子。



vue是这几天下班后临时看的。发现这个东西没我想的那么简单。想要搞的漂亮的话,还是要花很多时间去看的。
因为到最后发现我不会JavaScript的语法,vue.js还是基于Js的。要搞好的话,得去系统学一下js,最后就放弃了。


static/image/hrline/4.gif


页: [1]
查看完整版本: ESP实现webserver的例程,感觉很有意思。