释放双眼，带上耳机，听听看~！
目录
通过WebSocket控制传感器/设备的优势
- 方便创建图形用户界面
- 用于控制设备的连续状态（例如打开/关闭LED）
如何通过WebSocket控制传感器/设备
这种方法需要两种代码：
1、Web应用程序代码：此代码包含：
- 用于形成网页的HTML和CSS代码，
- JavaScript代码，在Web浏览器上运行：
- ——使用WebSocket客户端，
- ——处理用户的操作。
- ——通过WebSocket将控制命令/值发送到PHPoC设备，
2、代码在系统循环中运行：
- 充当WebSocket服务器，
- 从WebSocket接收控制命令/值，
- 根据收到的命令/值控制执行器/设备
让我们通过一个在PHPoC上控制内置LED的例子来学习。Web App有一个按钮。当用户按下按钮时，LED将打开并更改背景图像。释放按钮时，LED亮起，背景图像也会改变。
Web应用程序代码
- HTML按钮
HTML代码：
<button id="button" style="height:95px; width:95px; background-color: transparent;border: none; padding: 0;"></button>
- 处理用户的操作
要处理“按下”和“释放”动作，我们需要处理“mousedown”和“mouseup”事件（用于PC上的Web浏览器），以及“touchstart”和（“touchend”）（用于智能手机上的Web浏览器）
代码：
var button = document.getElementById("button");
button.addEventListener("touchstart", press);
button.addEventListener("touchend", release);
button.addEventListener("touchcancel", release);
button.addEventListener("mousedown", press);
button.addEventListener("mouseup", release);
button.addEventListener("mouseout", release);
- 发送数据和更新视图
按下按钮时：发送命令打开LED并更改按钮的背景图像
代码：
function press()
{
if(ws.readyState == 1)
ws.send("on\r\n");
button.style.backgroundImage = "url('/on.png')";
event.preventDefault();
}
释放按钮时：发送命令关闭LED并更改按钮的背景图像
代码：
function release()
{
if(ws.readyState == 1)
ws.send("off\r\n");
button.style.backgroundImage = "url('/off.png')";
}
Web应用程序的完整源代码
PHP代码：
function press()
{
if(ws.readyState == 1)
ws.send("on\r\n");
button.style.backgroundImage = "url('/on.png')";
event.preventDefault();
}
function release()
{
if(ws.readyState == 1)
ws.send("off\r\n");
button.style.backgroundImage = "url('/off.png')";
}
window.onload = init;
</script>
</head>
<body>
<h2>
UIO / On-Board User LED
<br><br>
<button id="button" style="height:95px; width:95px; background-color: transparent;border: none; padding: 0;"></button>
<p>WebSocket : <span id="ws_state">CLOSED</span></p>
</h2>
</body>
</html>
代码在系统循环中运行
- 从Web浏览器接收数据
PHP代码：
$rlen = ws_read_line(0, $rwbuf
- 根据接收数据控制传感器/设备
PHP代码：
if($rwbuf == "on\r\n")
uio_out(0, OUT_PIN, LOW); // Turn LED on
else
if($rwbuf == "on\r\n")
uio_out(0, OUT_PIN, HIGH); // Turn LED off
完整的源代码
PHP代码：
<?php
if(_SERVER("REQUEST_METHOD"))
exit; // avoid php execution via http request
include "/lib/sd_340.php";
include "/lib/sn_tcp_ws.php";
define("OUT_PIN", 30);
uio_setup(0, OUT_PIN, "out high");
ws_setup(0, "ob_led", "csv.phpoc");
$rwbuf = "";
while(1)
{
if(ws_state(0) == TCP_CONNECTED)
{
$rlen = ws_read_line(0, $rwbuf);
if($rwbuf == "on\r\n")
uio_out(0, OUT_PIN, LOW); // Turn LED on
else
if($rwbuf == "on\r\n")
uio_out(0, OUT_PIN, HIGH); // Turn LED off
}
}
?>
