Killoser

  • 491 主题
  • 516 帖子
  • 4961 积分
  • 身份:版主
  • E币:1970

微信控制灯泡!(Step by step ,有源码有分析)

2019-5-28 16:52:35 显示全部楼层
微信能做的事情越来越多,今天介绍:微信控制灯泡!了解控制灯泡的原理后,就能继续添加控制空调、控制电视、获取温度等功能。微信并不自带此功能,是通过开源项目DeviceConnect来实现的,本文章主要介绍DeviceConnect。

微信控制灯泡的系统框图如下所示:

4.jpg

系统分为三部分:手机、云服务器、ARM工控板。云服务器把手机端发送过来的命令转送到ARM工控板,ARM工控板解析命令后控制灯泡的亮与灭。

DeviceConnect开源项目简介

DeviceConnect是手机控制ARM板子上的外设的最简单实例,目标是让使用者能更方便的扩张功能。DeviceConnect在手机端提供了三种方式:
微信订阅号点亮ARM板子上的LED灯;
Android App点亮ARM板子上的LED灯;
iOS App点亮ARM板子上的LED灯。

1、硬件环境

云服务器:腾讯云服务器,特点是免费1个月。
ARM开发板:致远电子的EPC-6G2C,特点是有8路串口。
手机:安卓、iPhone手机都可以。

2、源码下载
源码地址:https://github.com/yufangmin/DeviceInternet.git

3、源码结构
下载源码后,它的目录结构如下所示:
  1. DeviceInternet
  2. ├── android
  3. ├── apphtml
  4. ├── device
  5. ├── ios
  6. └── readme.md

源码目录的功能如下表:


apphtml目录是运行在服务器上面的源码和固件,它提供了两个功能,一是处理手机和硬件产品发过来的http请求(获取设备信息或控制设备的命令),二是提供了http页面,在微信订阅号后台把某个页面的“阅读原文”的地址指向这个http页面,http页面实现了控制灯泡的功能。

android目录、ios目录、device目录,它们是三个应用程序,分别运行在android手机、iPhone手机、AMR开发板上面,它们采取相同的协议和服务器进行通信。

4、手机和云服务器的通信规则
手机和云服务器采取htpp协议api接口来通信,返回的值是json数据。有两类接口:设置接口和查询接口。

(1)设置接口

手机访问云服务器,把灯泡熄灭的接口如下:
  1. http://127.0.0.1:8080/api/a7/control?active=put&key=led&value=off
可以在IE浏览器里面输入这段字符,它就能关闭灯泡。这里有三个关键字:active、key、value。
- active:可取两个值:put和get。put是设置的意思,get是查询的意思。
- key、value:服务器保存了一个字典,这个key、value的值就是服务器字典里面的key和value。
active=put&key=led&value=off的意思是:设置led的值为关闭。

返回值是json数据,如下:
  1. {errorCode:0,   errorMsg:配置LED成功}
  2. errorCode:返回0代表成功;返回其他值代表失败。
  3. errorMsg:返回errorCode编码对应的解释。
(2)查询接口
手机访问云服务器,获取灯泡状态的接口如下:
  1. http://127.0.0.1:8080/api/a7/control?active=get&key=led
  2. active=get&key=led的意思是:获取灯泡的状态。
返回值是json数据,如下:
  1. {errorCode:0, key:led, value:off,
  2. errorMsg:查询+key+成功}
意思是led的值为关闭。

5、服务器端的源码分析

服务器端是用JAVA语言+spring库来实现的。在浏览器输入http://127.0.0.1:8080/api/a7/control?active=put&key=led&value=off来访问服务器时,实际上会调用APPAPIController类的  api(...)函数,函数原型如下:
  1. @RequestMapping
  2. (value = "/api/{productName}/{functionName}")
  3. //  1. productName和functionName是http地址映射相关

  4. public void api(
  5.   @PathVariable String productName,
  6. // 2. http://127.0.0.1:8080/api/a7/control?,api会被赋值到productName


  7.   @PathVariable String functionName,
  8. // 3. http://127.0.0.1:8080/api/a7/control?,a7会被赋值到functionName

  9. HttpServletRequest request,
  10. // 4. request,可通过这个变量读取客户端数据。

  11.   HttpServletResponse response
  12. // 5. response,可通过这个变量写入客户端数据。
  13. )
从request获知字符串active=put&key=led&value=off,然后进行处理,把处理结果通过response返回Json数据给客户端。下面是完整的代码:
  1. @Controller
  2. public class APPAPIController{
  3. static HashMap<String, String> deviceStatus = new HashMap<>();
  4. @RequestMapping(value = "/api/{productName}/{functionName}")
  5.    public void api(@PathVariable String productName,
  6. @PathVariable String functionName,
  7. HttpServletRequest request, HttpServletResponse response) throws IOException {
  8.        System.out.println("http connect in "+new Date().toString());
  9.        HashMap<String, Object> resultMap = new HashMap<>();
  10.        try {
  11. // 获取参数信息
  12. Map<String, String> parameters =
  13. convertHttpParamMap(request.getParameterMap());
  14. String active = parameters.get("active");
  15. if (active.compareTo("put") == 0) {
  16. // http://127.0.0.1:9090/api/a7/control?active=put&key=led&value=no

  17. String key = parameters.get("key");
  18.                String value = parameters.get("value");
  19.                deviceStatus.put(key, value);
  20.                resultMap.put("key", key);
  21.                resultMap.put("value", value);
  22.                resultMap.put("errorCode", "0");
  23.            }else if(active.compareTo("get") == 0) {
  24.                // http://127.0.0.1:9090/api/a7/control?active=get&key=led
  25.                String key = parameters.get("key");
  26.                String value = deviceStatus.get(key);
  27.                resultMap.put("key", key);
  28.                resultMap.put("value", value);
  29.                resultMap.put("errorCode", "0");
  30.            }else {
  31.                resultMap.put("errorCode", "1001");
  32.                resultMap.put("errorMsg", "active不正确");
  33.            }
  34.        }catch (Exception e) {
  35.            resultMap.put("errorCode", "1002");
  36.            resultMap.put("errorMsg", "参数不正确");
  37.        }

  38.        response.setCharacterEncoding("UTF-8");
  39.        ServletOutputStream outputStream = response.getOutputStream();

  40.        ObjectMapper mapper = new ObjectMapper();
  41.        mapper.writeValue(outputStream, resultMap);

  42.        outputStream.flush();
  43.    }
  44. }
从上面的代码可见:设置功能是把数据保存在一个Map数据结构内;查询功能是从Map内读出数据。服务器其实是个中转站。手机可以获取和设置灯泡,ARM开发板获取灯泡状态并给灯泡断电或上电。

6、客户端的源码分析

微信HTTP页面、iOS APP、安卓APP、ARM开发板程序,都是客户端,它们的功能本质一样,只是编程语言不同,所以这里仅介绍HTTP页面源码。

页面有三个按钮和一张图片,代码如下所示:
  1. <img id='lightStatus' src="image/lamp_on.png"/>
  2. <input type="button" id="lightOn" value="设置LED亮">
  3. <input type="button" id="lightOff" value="设置LED灭">
  4. <input type="button" id="lightQuery" value="查询LED状态">
为了解析服务器返回的json数据,采用了jquery库,如下所示:

  1. <script src="jquery-3.2.0.min.js"></script>
  2.    <script type="text/javascript">
按钮“设置LED亮”是button类型,ID是lightOn。lightOn对应的源码如下:
  1. var args = {
  2. url: 'http://127.0.0.1/api/a7/control?',
  3. cache: false,
  4. dataType: 'json'
  5. }
  6. $('#lightOn').on('click', function() {
  7. args.data    = 'active=put&key=led&value=on'
  8. args.success = function(data) {
  9. $('#lightStatus').attr('src', data.value === 'on' ? "image/lamp_on.png" : "image/lamp_off.png")
  10. }
  11. $.ajax(args)
  12. })
在函数lightOn内访问。按钮“设置LED灭”和“查询LED状态”的源码是类似的,这里不展示。

7、结果展示

(1)微信订阅号的展示如下:




注:微信订阅号是用户自己申请的,本文作者申请了一个物通网互通的订阅号,你完全可以申请另外一个订阅号。上图的总共4个窗口,前2个窗口是通过微信公众号后台编辑实现,后2个窗口是由服务器源码HTML提供。

(2)Android APP的展示如下:




(3)iPhone APP的展示如下:



(4)ARM核心板(M6G2C Cortex-A7)的展示如下:



至此全部讲完,想要进一步了解,请下载源码,并阅读里面的readme.md文件。

来源:ZLG致远电子

最新评论

楼层直达:

测量无处不在

  • 35 主题
  • 202 帖子
  • 1067 积分
  • 身份:版主
  • E币:4096
按这个流程控制,有点复杂。
路由器带地址,直接访问控制有可能吗?
我要评论
1
17
广告
关闭 热点推荐上一条 /3 下一条
快速回复 返回列表