0°

(八)如何通过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
    }
}

?>
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论