基于HTTP的IoT用户终端

为了解放IoT芯片的资源,使用iframe的嵌入的方式,将耗费资源的工作交给用户端,服务端仅需处理提交的指令,可以扩展,方便维护。

MarvelMaker

喜欢

449
浏览
0
喜欢

> 更多图片

项目状态:已完成
开放度:公开
所属分类:电子
发布时间:2020-07-02
最近更新:2020-07-02

标签

描述

HTTP协议的控制终端成本最低,然而为了精美的页面动画,将庞大的网页资源烧入芯片,实在是对资源的廊坊。这个项目尝试了通过在服务端嵌入静态网站的方式,实现远程通信。


详细说明

ESP8266的出现使物联网终端变得易如反掌,如今在家部署些无线设备早已不是什么新鲜事,但是要想开发出界面优美的图形控制程序,还是很伤脑筋。为桌面电脑,安卓和IOS设备分别打造一个图像界面显然划不来。基于HTTP协议的控制程序似乎是不错的选择,可是将庞大的html模板文件连同资源和程序一起烧入芯片,需要不小的空间。我的esp-12片载4MB的flash虽然勉强够用,烧录起来仍然极其繁琐。

当然,有人会说解决办法有的是,换一个大容量的芯片,或者租一个云服务器作中介,又或者内网穿透一下。话虽不错,问题在于如果这样干我还要物联网芯片做什么???我干嘛不直接把我的二手笔记本电脑接在路由器上,128G的硬盘+4G内存,网盘+服务器都有了,还能加载个网页小游戏呢。

要想成为一名合格的技术宅,必须足够任性,我偏要在8266上加载出网页的动画效果。一番思索过后,我想起了GitHub Pages。这个能托管静态网页的开放服务,可以被用来代替储存耗费资源的图形动画,剩下的就是通信的问题了,由于本地网页和远程网页不在一个域名下,所以使用了postMessage方法实现跨域访问,这样就实现了子页面与父页面的通信。

链接表


文件库

esp8266_GUI.zip
[202700 Bytes at 2020-07-02, 2 次下载]



教程

组件清单
  • ESP8266开发板 × 1
  • IDE或其它开发环境和烧写工具 × 1

写在前面

这个实现其实不难,但是叙述起来还蛮繁琐,以后再录个视频好了 ; )
重点只有一个,那就是数据的处理完全交给用户端的浏览器,ESP8266只负责接收POST请求提交的指令并控制相应的硬件设备。

需要的知识储备

HTML+js/jquery+css+C+arduino IDE

抽象原理

  1. 在GitHub Pages部署带有图形界面和跨域请求的静态网页。

  2. 在ESP8266上部署带有控制程序的本地的HTTP服务器

  3. 在本地服务器的网页中使用iframe嵌入GitHub Pages托管的图形界面,并收听子页面的跨域请求

  4. 用户端打开本地网页,浏览器将自动加载嵌入的图形界面,其中的操作会被跨域转发到父窗口,也就是本地的网页

  5. 本地网页最终接收请求,处理,并驱动硬件

程序设计

完整代码已打包供下载,这里只说一些需要注意的地方

远程

远程的HTML界面可以随意设计,采用你喜欢的风格样式,只要用postMessage向父页面提交请求就行了。
-第一个参数是要提交的字符串
-第二个参数用来限定允许的域名,*表示没有限制

window.parent.postMessage('parameter=value','*') 

本地

本地的html文件随意设计 只需包含一下内容,这段js代码告诉用户端接收子页面postMessage发来的信息并用POST请求转发给服务器。
-xmlHttpRequest实现ajax异步请求,因为这样不用刷新页面,减少资源消耗
-onmessage接收 | 因为是跨域访问,会涉及安全问题,推荐详细了解一下,可以看MDN的说明

<script type="text/javascript">
    var httpRequest = new XMLHttpRequest();
    window.onmessage = function(e) {
    if (e.origin !== "https://x.x.x:x"){
        console.log('illegal origin')
        return
    }
        httpRequest.open('POST', '', true);
        httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        httpRequest.send(e.data);
    }
</script>

然后通过iframe嵌入远程HTML网页

<iframe src="https://x.x.x" class="frame" ></iframe>

ESP程序控制

Arduino开发ESP8266需要配置环境,详情参考配置可参照 https://www.jianshu.com/p/cb0274d612b5
Arduino支持C++, 将本地HTML文件以String烧入芯片即可

const String html = "<!DOCTYPE html><html>......</html>";