微信除了聊天竟然還可以控制燈泡

 1.1.5服務(wù)器端的源碼分析

 服務(wù)器端是用JAVA語(yǔ)言+spring庫來(lái)實(shí)現的。在瀏覽器輸入http://127.0.0.1:8080/api/a7/control?active=put&key=led&value=off來(lái)訪(fǎng)問(wèn)服務(wù)器時(shí)，實(shí)際上會(huì )調用APPAPIController類(lèi)的 api(...)函數，函數原型如下：

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

 public void api(

    @PathVariable String productName,            // 2. http://127.0.0.1:8080/api/a7/control?，api會(huì )被賦值到productName

    @PathVariable String functionName,         // 3. http://127.0.0.1:8080/api/a7/control?，a7會(huì )被賦值到functionName

    HttpServletRequest request,               // 4. request，可通過(guò)這個(gè)變量讀取客戶(hù)端數據。

    HttpServletResponse response               // 5. response，可通過(guò)這個(gè)變量寫(xiě)入客戶(hù)端數據。

 )

 從request獲知字符串a(chǎn)ctive=put&key=led&value=off，然后進(jìn)行處理，把處理結果通過(guò)response返回Json數據給客戶(hù)端。下面是完整的代碼：

 @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();

  }

 }

 從上面的代碼可見(jiàn)：設置功能是把數據保存在一個(gè)Map數據結構內；查詢(xún)功能是從Map內讀出數據。服務(wù)器其實(shí)是個(gè)中轉站。手機可以獲取和設置燈泡，ARM開(kāi)發(fā)板獲取燈泡狀態(tài)并給燈泡斷電或上電。
 1.1.6客戶(hù)端的源碼分析

 微信HTTP頁(yè)面、iOS APP、安卓APP、ARM開(kāi)發(fā)板程序，都是客戶(hù)端，它們的功能本質(zhì)一樣，只是編程語(yǔ)言不同，所以這里僅介紹HTTP頁(yè)面源碼。

 頁(yè)面有三個(gè)按鈕和一張圖片，代碼如下所示：

 <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="查詢(xún)LED狀態(tài)">

 為了解析服務(wù)器返回的json數據，采用了jquery庫，如下所示：

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

  <script type="text/javascript">

 按鈕“設置LED亮”是button類(lèi)型，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)

 })