方案介紹

如今，通過網(wǎng)絡(luò)進(jìn)行控制已成為一種常態(tài)。在這個(gè)簡單的項(xiàng)目中，我將向您展示如何制作一個(gè)通過 Web 控制燈泡的應(yīng)用程序。

當(dāng)然這不是什么新鮮事，但你可能看到的是，基于網(wǎng)絡(luò)的控制東西只需要幾個(gè)步驟就可以自己完成。任何對網(wǎng)絡(luò)編程有一定了解的人都可以制作基于網(wǎng)絡(luò)的應(yīng)用程序來控制/監(jiān)視設(shè)備。

硬件組件
首先是設(shè)置硬件。在這里，我使用了一個(gè) Arduino Uno 板、一個(gè) PHPoC WiFi Shield 和一個(gè) PHPoC Arduino 中繼板。

如何運(yùn)作：

接下來是“基于Web”的部分。與 PHPoC Shield 結(jié)合，Arduino 板成為 Web 服務(wù)器/WebSocket 服務(wù)器。所以，基本上我們需要：

+ 客戶端代碼：提供基于 Web 的用戶界面來控制燈泡。UI 應(yīng)允許用戶將控制命令發(fā)送到 Web 服務(wù)器（Arduino 板）。UI 還顯示在服務(wù)器響應(yīng)中發(fā)送的燈泡的狀態(tài)。這個(gè)網(wǎng)頁源代碼需要上傳到盾。當(dāng)從 Web 瀏覽器（Web 客戶端）接收到 HTTP 請求后，Shield（Web 服務(wù)器）會將解釋后的 Web 文件發(fā)送到 Web 瀏覽器。

+ 服務(wù)器端代碼：根據(jù) Web 瀏覽器發(fā)送的數(shù)據(jù)控制燈泡。代碼在Arduino板子上運(yùn)行，流程無非是循環(huán)，檢查Web客戶端是否有任何請求，以便設(shè)置繼電器開關(guān)燈泡，然后將燈泡狀態(tài)發(fā)送到Web瀏覽器.

在這個(gè)項(xiàng)目中，我制作了一個(gè) SVG 元素來顯示燈泡和一個(gè)按鈕來從 Web 發(fā)送控制命令。Web 瀏覽器和 Web 服務(wù)器通過 WebSocket 相互通信。WebSocket 連接適合實(shí)時(shí)應(yīng)用程序。

你花在制作 UI 上的精力越多，它看起來就越好。但別擔(dān)心，互聯(lián)網(wǎng)上有大量的共享資源，所以你可能會找到一些很酷的免費(fèi) UI 源代碼，而不是自己編寫所有的編程工作。