微信除了聊天，竟然還可以控制燈泡？
微信能做的事情越來越多，今天介紹：微信控制燈泡!了解控制燈泡的原理后，就能繼續(xù)添加控制空調(diào)、控制電視、獲取溫度等功能。微信并不自帶此功能，是通過開源項(xiàng)目DeviceConnect來實(shí)現(xiàn)的，本文章主要介紹DeviceConnect。
微信控制燈泡的系統(tǒng)框圖如下所示：
系統(tǒng)分為三部分：手機(jī)、云服務(wù)器、ARM工控板。云服務(wù)器把手機(jī)端發(fā)送過來的命令轉(zhuǎn)送到ARM工控板，ARM工控板解析命令后控制燈泡的亮與滅。
DeviceConnect開源項(xiàng)目簡介
DeviceConnect是手機(jī)控制ARM板子上的外設(shè)的最簡單實(shí)例，目標(biāo)是讓使用者能更方便的擴(kuò)張功能。DeviceConnect在手機(jī)端提供了三種方式：
微信訂閱號點(diǎn)亮ARM板子上的LED燈;
Android App點(diǎn)亮ARM板子上的LED燈;
iOS App點(diǎn)亮ARM板子上的LED燈。
1、硬件環(huán)境
云服務(wù)器：騰訊云服務(wù)器，特點(diǎn)是免費(fèi)1個(gè)月。
ARM開發(fā)板：致遠(yuǎn)電子的EPC-6G2C，特點(diǎn)是有8路串口。
手機(jī)：安卓、iPhone手機(jī)都可以。
2、源碼下載
源碼地址：https://github.com/yufangmin/DeviceInternet.git
3、源碼結(jié)構(gòu)
下載源碼后，它的目錄結(jié)構(gòu)如下所示：
DeviceInternet
├── android
├── apphtml
├── device
├── ios
└── readme.md
源碼目錄的功能如下表：
apphtml目錄是運(yùn)行在服務(wù)器上面的源碼和固件，它提供了兩個(gè)功能，一是處理手機(jī)和硬件產(chǎn)品發(fā)過來的http請求(獲取設(shè)備信息或控制設(shè)備的命令)，二是提供了http頁面，在微信訂閱號后臺把某個(gè)頁面的“閱讀原文”的地址指向這個(gè)http頁面，http頁面實(shí)現(xiàn)了控制燈泡的功能。
android目錄、ios目錄、device目錄，它們是三個(gè)應(yīng)用程序，分別運(yùn)行在android手機(jī)、iPhone手機(jī)、AMR開發(fā)板上面，它們采取相同的協(xié)議和服務(wù)器進(jìn)行通信。
4、手機(jī)和云服務(wù)器的通信規(guī)則
手機(jī)和云服務(wù)器采取htpp協(xié)議api接口來通信，返回的值是json數(shù)據(jù)。有兩類接口：設(shè)置接口和查詢接口。
(1)設(shè)置接口
手機(jī)訪問云服務(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是查詢的意思。
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編碼對應(yīng)的解釋。
(2)查詢接口
手機(jī)訪問云服務(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:查詢+key+成功}
意思是led的值為關(guān)閉。
5、服務(wù)器端的源碼分析
服務(wù)器端是用JAVA語言+spring庫來實(shí)現(xiàn)的。在瀏覽器輸入http://127.0.0.1:8080/api/a7/control?active=put&key=led&value=off來訪問服務(wù)器時(shí)，實(shí)際上會調(diào)用APPAPIController類的 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會被賦值到productName
@PathVariable String functionName,
// 3. http://127.0.0.1:8080/api/a7/control?，a7會被賦值到functionName
HttpServletRequest request,
// 4. request，可通過這個(gè)變量讀取客戶端數(shù)據(jù)。
HttpServletResponse response
// 5. response，可通過這個(gè)變量寫入客戶端數(shù)據(jù)。
)
從request獲知字符串a(chǎn)ctive=put&key=led&value=off，然后進(jìn)行處理，把處理結(jié)果通過response返回Json數(shù)據(jù)給客戶端。下面是完整的代碼：
@Controller
public class APPAPIController{
static HashMap 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 resultMap = new HashMap<>();
try {
// 獲取參數(shù)信息
Map 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", "參數(shù)不正確");
}
response.setCharacterEncoding("UTF-8");
ServletOutputStream outputStream = response.getOutputStream();
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(outputStream, resultMap);
outputStream.flush();
}
}
從上面的代碼可見：設(shè)置功能是把數(shù)據(jù)保存在一個(gè)Map數(shù)據(jù)結(jié)構(gòu)內(nèi);查詢功能是從Map內(nèi)讀出數(shù)據(jù)。服務(wù)器其實(shí)是個(gè)中轉(zhuǎn)站。手機(jī)可以獲取和設(shè)置燈泡，ARM開發(fā)板獲取燈泡狀態(tài)并給燈泡斷電或上電。
6、客戶端的源碼分析
微信HTTP頁面、iOS APP、安卓APP、ARM開發(fā)板程序，都是客戶端，它們的功能本質(zhì)一樣，只是編程語言不同，所以這里僅介紹HTTP頁面源碼。
頁面有三個(gè)按鈕和一張圖片，代碼如下所示：
為了解析服務(wù)器返回的json數(shù)據(jù)，采用了jquery庫，如下所示：
<%20src="jquery-3.2.0.min.js">
<%20type="text/java">
按鈕“設(shè)置LED亮”是button類型，ID是lightOn。lightOn對應(yīng)的源碼如下：
var%20args%20=%20{
url:%20'http://127.0.0.1/api/a7/control?',
cache:%20false,
dataType:%20'json'
}
$('#lightOn').on('click',%20function()%20{
args.data%20=%20'active=put&key=led&value=on'
args.success%20=%20function(data)%20{
$('#lightStatus').attr('src',%20data.value%20===%20'on'%20?%20"image/lamp_on.png" : "image/lamp_off.png")
}
$.ajax(args)
})
在函數(shù)lightOn內(nèi)訪問。按鈕“設(shè)置LED滅”和“查詢LED狀態(tài)”的源碼是類似的，這里不展示。
7、結(jié)果展示
(1)微信訂閱號的展示如下：
注：微信訂閱號是用戶自己申請的，本文作者申請了一個(gè)物通網(wǎng)互通的訂閱號，你完全可以申請另外一個(gè)訂閱號。上圖的總共4個(gè)窗口，前2個(gè)窗口是通過微信公眾號后臺編輯實(shí)現(xiàn)，后2個(gè)窗口是由服務(wù)器源碼HTML提供。
(2)Android APP的展示如下：
(3)iPhone APP的展示如下：
(4)ARM核心板(M6G2C Cortex-A7)的展示如下：
至此全部講完，想要進(jìn)一步了解，請下載源碼，并閱讀里面的readme.md文件，也歡迎底部給我們留言探討。
下載文檔
