方案介紹

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

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

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

如何運作：

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

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

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

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

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