Arduino 网页控制灯泡：PHPoC Shield 实现 WebSocket 实时控制

组件与物料

项目概述

Web 控制已成主流。本项目演示如何利用 PHPoC Shield 将 Arduino 变为 WebSocket 服务器，通过网页实时控制灯泡开关。仅需几步即可完成，适合具备基础 Web 编程知识的开发者。

硬件连接

Arduino UNO 叠加 PHPoC WiFi Shield，再叠加 PHPoC 继电器板，灯泡接在继电器常开触点上。

工作原理

客户端（网页端）

提供 SVG 绘制的灯泡 UI 和开关按钮，通过 WebSocket 向服务器发送控制指令（"1" 开 / "0" 关），并实时显示灯泡状态。网页文件上传至 PHPoC Shield，浏览器访问时由 Shield 解析并返回。

服务端（Arduino 端）

运行在 Arduino 上，循环监听 WebSocket 连接，根据收到的字符控制继电器，并将灯泡状态回传给浏览器。WebSocket 适合实时交互场景。

客户端代码 (remote_led.php)

<html> <head> <title> <? echo system("uname -i") ?> </title>
<meta content="initial-scale=0.7, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes" name="viewport">
<style>
body { text-align: center; font-family: verdana, Helvetica, Arial, sans-serif, gulim; background: #C2CCD0; }
h2 { font-size: 16px; line-height: 25px; }
body.active { background: #E2ECF1; }
#on { opacity: 0; }
.active #on { opacity: 1; }
.light-bulb { width: 250px; height: 400px; margin-top: 100px }
.container { margin: auto; width: 250px; }
.switches { width: 150px; height: 65px; background-color: #38434A; font-size: 24px; margin: auto; border-radius: 10px; color: white; cursor: pointer; letter-spacing: 0.2px; line-height: 65px; text-align: center; user-select: none; transition: none; }
</style> </head>
<body>
<div class="container">
<div class="light-bulb">
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" ...> ... </svg>
</div>
<div class="switches"> Switch </div>
</div>
<br> <h2 id="ws_state"></h2>
</body>
<script>
var is_on; var ws; var button = document.querySelector('.switches');
var ws_state = document.getElementById("ws_state");
function init() { button.addEventListener("click", toogleLed); connect(); is_on = 0; }
function connect() {
  if (ws == null) {
    var ws_host_addr = "";
    if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
      ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '').replace(/:/g, "-") + ".ipv6-literal.net";
    }
    ws = new WebSocket("ws://" + ws_host_addr + "/remote_led", "text.phpoc");
    ws_state.innerHTML = "Connecting. Please wait!";
    ws.onopen = ws_onopen; ws.onclose = ws_onclose; ws.onmessage = ws_onmessage;
  } else ws.close();
}
function ws_onopen() { ws_state.style.display = "none"; display_lightbulb(); }
function ws_onclose() {
  button.style.backgroundColor = "#C2C2C2";
  ws_state.style.display = "";
  ws_state.innerHTML = "<span style='color: gray'>Can not connect to Arduino Board. <br> Please check again and reload this page!</span>";
  ws.onopen = null; ws.onclose = null; ws.onmessage = null; ws = null; is_on = 0; display_lightbulb();
}
function ws_onmessage(e_msg) { e_msg = e_msg || window.event; is_on = parseInt(e_msg.data); display_lightbulb(); }
function toogleLed() { if (is_on) ws.send("0"); else ws.send("1"); }
function display_lightbulb() { document.body.className = (is_on) ? "active" : ""; }
window.onload = init;
</script>
</html>

服务端代码 (remoteLed.ino)

#include <Phpoc.h> #include <PhpocExpansion.h>
#define ON '1' #define OFF '0'
byte expansionId = 1;
ExpansionRelayOutput relay(expansionId, 0);
PhpocServer server(80);

void setup() {
  Serial.begin(9600); while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_led");
  Serial.print("WebSocket server address : "); Serial.println(Phpoc.localIP());
  Expansion.begin(); Serial.println(relay.getName());
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    if (client.available() > 0) {
      char thisChar = client.read();
      switch(thisChar) {
        case OFF: Serial.println("Turn LED OFF"); relay.off(); server.write(OFF); break;
        case ON:  Serial.println("Turn LED ON");  relay.on();  server.write(ON);  break;
      }
    }
  }
}

上传 PHP 文件至 Shield，烧录 Arduino 代码，浏览器访问 Shield IP 即可体验 Web 实时控制灯泡。