(八)如何通过WebSocket控制设备-PHPoC

释放双眼,带上耳机,听听看~!

通过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
    }
}

?>

给TA打赏
共{{data.count}}人
人已打赏
PHPoC-PHP编程

(七)如何通过HTTP请求监视传感器/设备-PHPoC

2018-11-23 23:09:12

PHPoC-PHP编程

(九)PHPoC上的Web服务器如何工作-PHPoC

2018-11-26 22:11:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
'); })();