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

微信能做的事情越來(lái)越多，今天介紹“”微信控制燈泡“”了解控制燈泡的原理后，就能繼續(xù)添加控制空調(diào)、控制電視、獲取溫度等功能，微信并不自帶此功能，是通過(guò)開(kāi)源項(xiàng)目DeviceConnect來(lái)實(shí)現(xiàn)的，這里將詳細(xì)介紹DeviceConnect項(xiàng)目。

微信控制燈泡的系統(tǒng)框圖如下所示：

系統(tǒng)分為三部分：手機(jī)、云服務(wù)器、ARM工控板。云服務(wù)器把手機(jī)端發(fā)送過(guò)來(lái)的命令轉(zhuǎn)送到ARM工控板，ARM工控板解析命令后控制燈泡的亮與滅。

1.1 DeviceConnect開(kāi)源項(xiàng)目簡(jiǎn)介

DeviceConnect是手機(jī)控制ARM板子上的外設(shè)的最簡(jiǎn)單實(shí)例，目標(biāo)是讓使用者能更方便的擴(kuò)張功能。DeviceConnect在手機(jī)端提供了三種方式：

1. 微信訂閱號(hào)點(diǎn)亮ARM板子上的LED燈；

2. Android App點(diǎn)亮ARM板子上的LED燈；

3. iOS App點(diǎn)亮ARM板子上的LED燈。

1.1.1 硬件環(huán)境

云服務(wù)器：騰訊云服務(wù)器，特點(diǎn)是免費(fèi)1個(gè)月。

ARM工控板：廣州致遠(yuǎn)電子的EPC-6G2C，特點(diǎn)是有8路串口。

手機(jī)：安卓、iPhone手機(jī)都可以。

1.1.2 源碼下載

源碼地址：https://github.com/yufangmin/DeviceInternet.git

1.1.3 源碼結(jié)構(gòu)

下載源碼后，它的目錄結(jié)構(gòu)如下所示：

源碼目錄的功能如下表：

apphtml目錄內(nèi)是運(yùn)行在服務(wù)器上面的源碼和固件，它提供了兩個(gè)功能，一是處理手機(jī)和硬件產(chǎn)品發(fā)過(guò)來(lái)的http請(qǐng)求（獲取設(shè)備信息或控制設(shè)備的命令），二是提供了http頁(yè)面，在微信訂閱號(hào)后臺(tái)把某個(gè)頁(yè)面的“閱讀原文”的地址指向這個(gè)http頁(yè)面，http頁(yè)面實(shí)現(xiàn)了控制燈泡的功能。微信訂閱號(hào)的申請(qǐng)和介紹在官網(wǎng)有詳細(xì)文檔，這里不介紹。

android目錄、ios目錄、device目錄，它們是三個(gè)應(yīng)用程序，分別運(yùn)行在android手機(jī)、iPhone手機(jī)、AMR開(kāi)發(fā)板上面，它們采取相同的協(xié)議和服務(wù)器進(jìn)行通信。

1.1.4 手機(jī)和云服務(wù)器的通信規(guī)則

手機(jī)和云服務(wù)器采取htpp協(xié)議api接口來(lái)通信，返回的值是json數(shù)據(jù)。有兩類(lèi)接口：設(shè)置接口和查詢(xún)接口。

1. 設(shè)置接口

手機(jī)訪(fǎng)問(wèn)云服務(wù)器，把燈泡熄滅的接口如下：

http://127.0.0.1:8080/api/a7/control？acTIve=put&key=led&value=off

可以在IE瀏覽器里面輸入這段字符，它就能關(guān)閉燈泡。這里有三個(gè)關(guān)鍵字：acTIve、key、value。

· acTIve：可取兩個(gè)值：put和get。put是設(shè)置的意思，get是查詢(xún)的意思。

· key、value：服務(wù)器保存了一個(gè)字典，這個(gè)key、value的值就是服務(wù)器字典里面的key和value。

acTIve=put&key=led&value=off的意思是：設(shè)置led的值為關(guān)閉。

返回值是json數(shù)據(jù)，如下：

{errorCode:0， errorMsg：配置LED成功}

errorCode：返回0代表成功；返回其他值代表失敗。

errorMsg：返回errorCode編碼對(duì)應(yīng)的解釋。

2. 查詢(xún)接口

手機(jī)訪(fǎng)問(wèn)云服務(wù)器，獲取燈泡狀態(tài)的接口如下：

http://127.0.0.1:8080/api/a7/control？active=get&key=led

active=get&key=led的意思是：獲取燈泡的狀態(tài)。

返回值是json數(shù)據(jù)，如下：

{errorCode:0， key:led， value:off， errorMsg：查詢(xún)+key+成功}

意思是led的值為關(guān)閉。

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

服務(wù)器端是用JAVA語(yǔ)言+spring庫(kù)來(lái)實(shí)現(xiàn)的。在瀏覽器輸入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ì)調(diào)用APPAPIController類(lèi)的 api（。。。）函數(shù)，函數(shù)原型如下：

@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ù)端數(shù)據(jù)。

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

）

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

@Controller

public class APPAPIController{

static 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

try {

// 獲取參數(shù)信息

Map

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”， “參數(shù)不正確”）;

}

response.setCharacterEncoding（“UTF-8”）;

ServletOutputStream outputStream = response.getOutputStream（）;

ObjectMapper mapper = new ObjectMapper（）;

mapper.writeValue（outputStream， resultMap）;

outputStream.flush（）;

}

}

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

1.1.1 客戶(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=“l(fā)ightOn” value=“設(shè)置LED亮”>

<input type=“button” id=“l(fā)ightOff” value=“設(shè)置LED滅”>

<input type=“button” id=“l(fā)ightQuery” value=“查詢(xún)LED狀態(tài)”>

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

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

<script type=“text/javascript”>

按鈕“設(shè)置LED亮”是button類(lèi)型，ID是lightOn。lightOn對(duì)應(yīng)的源碼如下：

var args = {

url： ‘http://127.0.0.1/api/a7/control？’，

cache： false，

dataType： ‘json’

}

$（‘#lightOn’）.on（‘click’， function（） {

args.data = ‘a(chǎn)ctive=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）

}）

在函數(shù)lightOn內(nèi)訪(fǎng)問(wèn)http://127.0.0.1/api/a7/control？ active=put&key=led&value=on后對(duì)返回結(jié)果的內(nèi)的value值和on比較，如果成功則設(shè)置lamp_on.png，如果失敗則設(shè)置lamp_off.png。按鈕“設(shè)置LED滅”和“查詢(xún)LED狀態(tài)”的源碼是類(lèi)似的，這里不展示。

1. 結(jié)果展示

1） 微信訂閱號(hào)的展示如下：

注：微信訂閱號(hào)是用戶(hù)自己申請(qǐng)的，本文作者申請(qǐng)了一個(gè)物通網(wǎng)互通的訂閱號(hào)，你完全可以申請(qǐng)另外一個(gè)訂閱號(hào)。上圖的總共4個(gè)窗口，前2個(gè)窗口是通過(guò)微信公眾號(hào)后臺(tái)編輯實(shí)現(xiàn)，后2個(gè)窗口是由服務(wù)器源碼HTML提供。

2. Android APP的展示如下：

3. iPhone APP的展示如下：

4. ARM核心板（M6G2C Cortex-A7）的展示如下：