Tweet
- 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(0, IN_PIN, "in");
ws_setup(0, "WebConsole", "text.phpoc");
$last_state = 0;
while(1)
{
if(ws_state(0) == TCP_CONNECTED)
{
$state = uio_in(0, IN_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
- PHPoC System Files
- How PHPoC System Works
- WebSocket
- How to Control Devices via Web Browser
- How to Control Devices via HTTP Request
- How to Control Devices via WebSocket
- How to Monitor Sensors/Devices via Web Browser
- How to Monitor Sensors/Devices via HTTP Request
- How to Monitor Sensors/Devices via WebSocket
- How to Access Web Apps on PHPoC