Announcement

Collapse
No announcement yet.

How to Monitor Sensors/Devices via WebSocket

Collapse
X
Collapse

  • How to Monitor Sensors/Devices via WebSocket

    Advantage of Monitoring via WebSocket
    • Useful to monitor states of sensors/devices in a long period of time without reloading webpage.
    • Data can be sent by server in real-time
    • Reduce network latency and overhead.

    How to Monitor via WebSocket

    This kind of method requires two kind of code:
    • Code run in system loop :
      • Acts as WebSocket server,
      • Reads state from sensors/devices,
      • Send it to WebSoket Client via Websocket.
    • Web App code: this code contains:
      • HTML and CSS code to form webpage,
      • JavaScript code, which is run on Web browser:
        • Acts WebSocket Client,
        • Receives states of sensors/devices via WebSocket,
        • Displays/visualize it on webpage.

    Example

    Code run in system loop

    [task0.php]
    PHP Code:
    if(_SERVER("REQUEST_METHOD"))
     exit; 
    // avoid php execution via http request

    include "/lib/sd_340.php";
    include 
    "/lib/sn_tcp_ws.php";

    define("IN_PIN"0);

    uio_setup(0IN_PIN"in");
    ws_setup(0"WebConsole""text.phpoc");

    $last_state 0;

    while(
    1)
    {
     if(
    ws_state(0) == TCP_CONNECTED)
     {
      
    $state uio_in(0IN_PIN);

      if(
    $state != $last_state)
      {
       if(
    $state)
        
    ws_write(0"state ON\r\n");
       else
        
    ws_write(0"state OFF\r\n");

       
    $last_state $state;
      }
     }
    }

    ?> 



    We need to create init.php files, which allows to register task0.php file run in system loop

    [init.php]
    PHP Code:
    <?php

    system
    ("php task0.php");

    ?>




    Web App code

    [index.php]
    PHP Code:
    <html>
    <head>
    <title>PHPoC / <?echo system("uname -i")?></title>
    <meta name="viewport" content="width=device-width, initial-scale=0.7">
    <style>
    body { text-align:center; }
    textarea { width:400px; height:400px; padding:10px; font-family:courier; font-size:14px; }
     </style>
    <script>
    var ws;
    var wc_max_len = 32768;
    function ws_onopen()
    {
     document.getElementById("ws_state").innerHTML = "OPEN";
     document.getElementById("wc_conn").innerHTML = "Disconnect";
    }
    function ws_onclose()
    {
     document.getElementById("ws_state").innerHTML = "CLOSED";
     document.getElementById("wc_conn").innerHTML = "Connect";

     ws.onopen = null;
     ws.onclose = null;
     ws.onmessage = null;
     ws = null;
    }
    function wc_onclick()
    {
     if(ws == null)
     {
      ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/WebConsole", "text.phpoc");
      document.getElementById("ws_state").innerHTML = "CONNECTING";

      ws.onopen = ws_onopen;
      ws.onclose = ws_onclose;
      ws.onmessage = ws_onmessage;
     }
     else
      ws.close();
    }
    function ws_onmessage(e_msg)
    {
     e_msg = e_msg || window.event; // MessageEvent

     var wc_text = document.getElementById("wc_text");
     var len = wc_text.value.length;

     if(len > (wc_max_len + wc_max_len / 10))
      wc_text.innerHTML = wc_text.value.substring(wc_max_len / 10);

     wc_text.scrollTop = wc_text.scrollHeight;
     wc_text.innerHTML += e_msg.data;
    }
    function wc_clear()
    {
     document.getElementById("wc_text").innerHTML = "";
    }
    </script>
    </head>
    <body>

    <h2>
    <p>
    Web Console : <span id="ws_state">CLOSED</span><br>
    </p>
    <textarea id="wc_text" readonly="readonly"></textarea><br>
    <button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
    <button id="wc_clear" type="button" onclick="wc_clear();">Clear</button>
    </h2>

    </body>
    </html>



    For detail explanation, see How to Create Embedded Web Apps with WebSocket on PHPoC




    See Also
    Last edited by support; 02-09-2018, 09:09 AM.
      Posting comments is disabled.

    Categories

    Collapse

    Latest Articles

    Collapse

    • Arduino - RS-485 Expansion Board
      by support
      PES-2607 is an easy-to-use RS422/RS485 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS422 or RS485.
      Especially, Arduino does NOT use UART pins to communicate with RS422/RS485 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS422/RS485 expansion boards (up to 14) without using Arduino UART pins.

      Library and examples for...
      11-13-2018, 02:45 PM
    • Arduino - RS-422 Expansion Board
      by support
      PES-2607 is an easy-to-use RS422/RS485 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS422 or RS485.
      Especially, Arduino does NOT use UART pins to communicate with RS422/RS485 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS422/RS485 expansion boards (up to 14) without using Arduino UART pins.

      Library and examples for...
      11-13-2018, 02:44 PM
    • Arduino - RS-232 Expansion Board
      by support
      PES-2606 is an easy-to-use RS-232 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS-232.
      Especially, Arduino does NOT use UART pins to communicate with RS-232 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS-232 expansion boards (up to 14) without using Arduino UART pins.

      Library and example for the RS-232 expansion board...
      11-13-2018, 02:43 PM
    • Arduino - Stepper Motor Controller
      by support
      PES-2605 is an easy-to-use stepper motor controller for Arduino Uno and Mega, which uses micro-stepping method to precisely control stepper motor.
      Library and example for the stepper motor controller are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use the step motor controller with an example of PhpocExpansion library for Arduino.


      Hardware Required...
      11-13-2018, 02:41 PM
    • Arduino - DC Motor Controller
      by support
      PES-2604 is an easy-to-use DC motor controller for Arduino Uno and Mega.
      Library and example for the DC motor controller are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use the DC motor controller with an example of PhpocExpansion library for Arduino.


      Hardware Required...
      11-13-2018, 02:40 PM
    • Arduino - Digital Input Board
      by support
      PES-2602 is an easy-to-use 4-port Input Expansion Board for Arduino Uno and Mega, which allows Arduino to monitor state of DC electric device. In addition, it can monitor NPN, PNP and dry contact(relay).
      Library and example for the 4-port input expansion board are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use 4-port input expansion board with an example of PhpocExpansion library for Arduino.

      ...
      11-13-2018, 02:39 PM
    Working...
    X