微信除了聊天竟然还可以控制灯泡

嵌入式系统   作者:ZLG致远电子 时间:2017-06-02来源:电子产品世界

 1.1.5服务器端的源码分析

 服务器端是用JAVA语言+spring库来实现的。在浏览器输入http://127.0.0.1:8080/api/a7/control?active=put&key=led&value=off来访问服务器时,实际上会调用APPAPIController类的 api(...)函数,函数原型如下:

 @RequestMapping(value = "/api/{productName}/{functionName}")      //  1. productName和functionName是http地址映射相关

 public void api(

    @PathVariable String productName,            // 2. http://127.0.0.1:8080/api/a7/control?,api会被赋值到productName

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

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

    HttpServletResponse response               // 5. response,可通过这个变量写入客户端数据。

 )

 从request获知字符串active=put&key=led&value=off,然后进行处理,把处理结果通过response返回Json数据给客户端。下面是完整的代码:

 @Controller

 public class APPAPIController{

 

  static HashMap<String, String> deviceStatus = new HashMap<>();

 

  @RequestMapping(value = "/api/{productName}/{functionName}")

  public void api(@PathVariable String productName,

      @PathVariable String functionName,

      HttpServletRequest request, HttpServletResponse response) throws IOException {

   System.out.println("http connect in "+new Date().toString());

   HashMap<String, Object> resultMap = new HashMap<>();

   try {

    // 获取参数信息

    Map<String, String> parameters = convertHttpParamMap(request.getParameterMap());

    String active = parameters.get("active");

    if (active.compareTo("put") == 0) {

     // http://127.0.0.1:9090/api/a7/control?active=put&key=led&value=no

     String key = parameters.get("key");

     String value = parameters.get("value");

     deviceStatus.put(key, value);

     resultMap.put("key", key);

     resultMap.put("value", value);

     resultMap.put("errorCode", "0");

    }else if(active.compareTo("get") == 0) {

     // http://127.0.0.1:9090/api/a7/control?active=get&key=led

     String key = parameters.get("key");

     String value = deviceStatus.get(key);

     resultMap.put("key", key);

     resultMap.put("value", value);

     resultMap.put("errorCode", "0");

    }else {

     resultMap.put("errorCode", "1001");

     resultMap.put("errorMsg", "active不正确");

    }

   }catch (Exception e) {

    resultMap.put("errorCode", "1002");

    resultMap.put("errorMsg", "参数不正确");

   }

 

   response.setCharacterEncoding("UTF-8");

   ServletOutputStream outputStream = response.getOutputStream();

 

   ObjectMapper mapper = new ObjectMapper();

   mapper.writeValue(outputStream, resultMap);

 

   outputStream.flush();

  }

 }

 从上面的代码可见:设置功能是把数据保存在一个Map数据结构内;查询功能是从Map内读出数据。服务器其实是个中转站。手机可以获取和设置灯泡,ARM开发板获取灯泡状态并给灯泡断电或上电。
 1.1.6客户端的源码分析

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

 页面有三个按钮和一张图片,代码如下所示:

 <img id='lightStatus' src="image/lamp_on.png"/>

 <input type="button" id="lightOn" value="设置LED亮">

 <input type="button" id="lightOff" value="设置LED灭">

 <input type="button" id="lightQuery" value="查询LED状态">

 为了解析服务器返回的json数据,采用了jquery库,如下所示:

 <script src="jquery-3.2.0.min.js"></script>

  <script type="text/javascript">

 按钮“设置LED亮”是button类型,ID是lightOn。lightOn对应的源码如下:

 var args = {

    url: 'http://127.0.0.1/api/a7/control?',

    cache: false,

    dataType: 'json'

    }

 $('#lightOn').on('click', function() {

    args.data    = 'active=put&key=led&value=on'

    args.success = function(data) {

    $('#lightStatus').attr('src', data.value === 'on' ? "image/lamp_on.png" : "image/lamp_off.png")

    }

    $.ajax(args)

 })

1 2 3

关键词: 微信 ARM

加入微信
获取电子行业最新资讯
搜索微信公众号:EEPW

或用微信扫描左侧二维码

相关文章


用户评论

请文明上网,做现代文明人
验证码:
查看电脑版