释放双眼，带上耳机，听听看~！
目录
简介
如今，通过网络控制已经成为一种常态。在这个简单的项目中，我将向您展示如何制作一个通过网络控制灯泡的应用。
当然这不是什么新东西，你可能会看到看到过基于网络的控制东西只需要几步就可以完成。这样我们可以通过应用程序来控制/监
控设备，我么可以把我们的想法付诸实践。
步骤一 材料准备
硬件准备：
我使用Arduino Uno板，
PHPoC WiFi Shield
PHPoC Arduino中继板
灯泡
软件准备：
arduino IDE
步骤二 原理说明
它涉及“Web”部分。需要我们结合PHPoC Shield，使得我们的Arduino板成为Web服务器/ WebSocket服务器。所以，我们需要客户端代码和服务器端代码。
+客户端代码：提供基于Web的用户界面来控制灯泡。UI允许用户将控制命令发送到Web服务器（Arduino板）。UI还显示来自服务器的相应从而控制UI的状态。在从Web浏览器（Web客户端）接收到HTTP请求时，Web服务器将解释的Web文件发送到Web浏览器。
+服务器端代码：根据Web浏览器发送的数据控制灯泡。代码在Arduino板上运行，检查Web客户端是否有任何请求设置继电器打开/关闭灯泡，然后将灯泡状态发送到Web浏览器。
在这个项目中，我制作了一个SVG元素来显示灯泡和一个从Web发送控制命令的按钮。Web浏览器和Web服务器通过WebSocket相互通信。WebSocket连接适合实时应用程序。
您花在制作UI上的努力越多，它看起来就越好。但不要担心，互联网上有大量的共享资源可供使用，因此您可以找到一些很酷的免费源代码，而不是自己完成所有的编程工作。
步骤三 编写程序
PHP
<html>
<head><title>
<?php 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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275.3 413.3" enable-background="new 0 0 275.3 413.3" xml:space="preserve"><g><path fill="#E2ECF1" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8
c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /><g><g id="on"><path fill="#FFDB55" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8
c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /><g>
<g>
<path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M168.5,375.5h-61.7c-8.9,0-16-7.2-16-16
v-55.8h93.8v55.8C184.6,368.3,177.4,375.5,168.5,375.5z" /><path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M151.2,401.5h-27.1c-3.9,0-7-3.2-7-7v-19
h41.1v19C158.2,398.4,155.1,401.5,151.2,401.5z" /><line fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" x1="184.6" y1="339.6" x2="90.8" y2="339.6" /><path fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4
c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /><g><g>
<path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M207.1,89.5
c-12.3-16.1-28.4-29.1-46.9-37.8" /><path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M225,121.4
c-0.8-2.2-1.8-4.4-2.7-6.5" /><g><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 = "HTTP_HOST") ?>";
if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
// network resource identifier to UNC path name conversion
ws_host_addr = ws_host_addr.replace(/[[]]/g, '');
ws_host_addr = ws_host_addr.replace(/:/g, "-");
ws_host_addr += ".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 = "Can not connect to Arduino Board.
Please check again and reload this page!";
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; // MessageEvent
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>
arduino代码
#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);
// initialize PHPoC [WiFi] Shield:
Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
//Phpoc.begin();
// start WebSocket server
server.beginWebSocket("remote_led");
// print IP address of PHPoC [WiFi] Shield to serial monitor:
Serial.print("WebSocket server address : ");
Serial.println(Phpoc.localIP());
Expansion.begin();
// get name and print it to serial
Serial.println(relay.getName());
}
void loop() {
// wait for a new client:
PhpocClient client = server.available();
if (client) {
if (client.available() > 0) {
// read a byte incoming from the client: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;
}
}
}
}
步骤四 验证结果
通过网页端可以轻松控制远程设备。
