微信除了聊天竟然還可以控制燈泡
1.1.5服務器端的源碼分析
本文引用地址:http://m.butianyuan.cn/article/201706/360008.htm服務器端是用JAVA語言+spring庫來實現(xiàn)的。在瀏覽器輸入http://127.0.0.1:8080/api/a7/control?active=put&key=led&value=off來訪問服務器時,實際上會調(diào)用APPAPIController類的 api(...)函數(shù),函數(shù)原型如下:
@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,可通過這個變量讀取客戶端數(shù)據(jù)。
HttpServletResponse response // 5. response,可通過這個變量寫入客戶端數(shù)據(jù)。
)
從request獲知字符串a(chǎn)ctive=put&key=led&value=off,然后進行處理,把處理結(jié)果通過response返回Json數(shù)據(jù)給客戶端。下面是完整的代碼:
@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 {
// 獲取參數(shù)信息
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", "參數(shù)不正確");
}
response.setCharacterEncoding("UTF-8");
ServletOutputStream outputStream = response.getOutputStream();
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(outputStream, resultMap);
outputStream.flush();
}
}
從上面的代碼可見:設置功能是把數(shù)據(jù)保存在一個Map數(shù)據(jù)結(jié)構(gòu)內(nèi);查詢功能是從Map內(nèi)讀出數(shù)據(jù)。服務器其實是個中轉(zhuǎn)站。手機可以獲取和設置燈泡,ARM開發(fā)板獲取燈泡狀態(tài)并給燈泡斷電或上電。
1.1.6客戶端的源碼分析
微信HTTP頁面、iOS APP、安卓APP、ARM開發(fā)板程序,都是客戶端,它們的功能本質(zhì)一樣,只是編程語言不同,所以這里僅介紹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狀態(tài)">
為了解析服務器返回的json數(shù)據(jù),采用了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)
})
評論