Announcement

Collapse
No announcement yet.

How to Create Embedded Web Apps with WebSocket on PHPoC

Collapse
X
Collapse
  •  

  • How to Create Embedded Web Apps with WebSocket on PHPoC

    As mentioned in WebSocket, WebSocket includes two parts: server side and client side. To exchanging data via WebSocket, it needs to create WebSocket connection first.
    The connection is maintained unless it is actively closed or there is a network error.

    Creating WebSocket Connection

    Server Side

    Server side code is PHPoC code, and it is run in system loop.
    PHP Code:
    <?php
    include "/lib/sn_tcp_ws.php";

    ws_setup(0"path_name""protocol_name");
    ?>




    Client Side

    Client code is JavaScript code and it's run on Client (e.g. Web Browser). It is embedded into webpage, which includes HTML, CSS codes.
    Code:
    <script>
    var ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/path_name", "protocol_name");
    </script>




    Let's look at above code, We can see a line that contains a piece of PHPoC code. When web browser makes HTTP request to this webpage, this PHPoC code is interpret on server before return to web browser.

    Note that: path_name and protocol_name must be the same between Client and Server.

    Exchanging Data via WebSocket Connection

    Server receives data from client
    PHP Code:

    $msg
    "";
    if(
    ws_state(0) == TCP_CONNECTED)
    {
        
    $rlen ws_read_line(0$msg);

        if(
    $rlen)
        {
            
    //process message here
        
    }




    Server sends data to client
    PHP Code:

    $msg
    "Hello Client, How are you?\r\n";

    if(
    ws_state(0) == TCP_CONNECTED)
    {
        
    ws_write(0$msg);





    Client sends data to server
    Code:
    var msg = "Hello Sever, How are you?\r\n"
    if(ws.readyState == 1)
            ws.send(msg);




    Client receives data from server
    Code:
    ws.onmessage = ws_onmessage;
    
    function ws_onmessage(e_msg)
    {
        e_msg = e_msg || window.event; // MessageEvent
    
        var msg = e_msg.data;
    
        // process message here
    }




    Additional Function

    Server Side
    Client Side
    • Client actively closes WebSocket Connection.
    Code:
    ws.close();
    • Event handler when WebSocket: is opened, is closed or get error, respectively
    Code:
    ws.onopen  = function(){ document.getElementById("ws_state").innerHTML = "OPEN" };
    ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
    ws.onerror = function(){ alert("websocket error " + this.url) };





    Examples Code

    In the following example, when WebSocket connection is established, Client sends message with number 1 to server. When server receives the message, it increases by on and send back to client. When client receives the message, it increases by one and send back to server. This process is repeated infinitely.

    Server Side Code (task0.php)
    PHP Code:
    <?php

    if(_SERVER("REQUEST_METHOD"))
        exit; 
    // avoid php execution via http request

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

    ws_setup(0"WebConsole""text.phpoc");

    $rwbuf "";

    while(
    1)
    {
        if(
    ws_state(0) == TCP_CONNECTED)
        {
            
    $rlen ws_read_line(0$rwbuf);

            if(
    $rlen)
            {
                echo 
    $rwbuf;
                
    $send_back = (int)$rwbuf 1;
                
    ws_write(0"$send_back\r\n");
            }

            
    sleep(1);
        }
    }

    ?>




    Client Side Code (index.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";
    
        ws.send("1\r\n");
    }
    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;
    
        var send_back = Number(e_msg.data) + 1;
        ws.send(send_back + "\r\n");
    }
    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>




    Demonstration



    See Also
    Last edited by support; 02-08-2018, 06:21 PM.

    • Äaren Lee
      #1
      Äaren Lee commented
      Editing a comment
      I think here is something wrong, if I receive a message then I have to read it ! And vice versa.


      Server sends data to client
      PHP Code:

      $msg= "";
      if(ws_state(0) == TCP_CONNECTED)
      {
      $rlen = ws_read_line(0, $msg);

      if($rlen)
      {
      //process message here
      }
      }


      Server receives data from client
      PHP Code:

      $msg= "Hello Client, How are you?\r\n";

      if(ws_state(0) == TCP_CONNECTED)
      {
      ws_write(0, $msg);
      }

      I think the reason is the exchanged headings !

    • support
      #2
      support commented
      Editing a comment
      Dear Äaren Lee,
      Thank you for pointing out the mistake.
      We corrected it!
    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, 03: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, 03: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, 03: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, 03: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, 03: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, 03:39 PM
Working...
X