131 lines
4.2 KiB
HTML
131 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/siimple.min.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||
|
|
<link rel="shortcut icon" href="img/favicon.png">
|
||
|
|
<title>HTTP Server</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<ul class="navbar">
|
||
|
|
<li><a href="/">Home</a></li>
|
||
|
|
<li><a class="active" href="websockets">WebSockets</a></li>
|
||
|
|
<li><a href="about">About</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="grid main">
|
||
|
|
<h1>WebSockets Demo</h1>
|
||
|
|
<div id="status_box" class="alert alert-info">Loading..</div>
|
||
|
|
<p>This page is similar to the home page but uses WebSockets for real-time updates.</p>
|
||
|
|
<div class="cover" align="center">
|
||
|
|
<canvas id="chartCanvas" width="512" height="100"></canvas>
|
||
|
|
<p/>
|
||
|
|
<p>LED Control</p>
|
||
|
|
<div class="onoffswitch">
|
||
|
|
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="led-switch" onclick="gpio()">
|
||
|
|
<label class="onoffswitch-label" for="led-switch">
|
||
|
|
<span class="onoffswitch-inner"></span>
|
||
|
|
<span class="onoffswitch-switch"></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1>Server Status</h1>
|
||
|
|
<table class="table table-striped">
|
||
|
|
<tr>
|
||
|
|
<td><b>Uptime:</b></td>
|
||
|
|
<td id="uptime"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>Free heap:</b></td>
|
||
|
|
<td id="heap"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>LED state:</b></td>
|
||
|
|
<td id="led"></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h1>How it works</h1>
|
||
|
|
<p>This demo uses 2 WebScokets. Status parameters are streamed by the server in JSON format every 2 seconds.
|
||
|
|
A <code>websocket_task</code> is created each time a specific URI is requested.</p>
|
||
|
|
<p>ADC values are being continuously polled by the client (i.e. your browser).
|
||
|
|
Each time a WebSocket frame is received on the server side, <code>websocket_cb</code> function is being called.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="js/smoothie_min.js"></script>
|
||
|
|
<script>
|
||
|
|
var ws;
|
||
|
|
var retries;
|
||
|
|
var series = new TimeSeries();
|
||
|
|
window.onload = function() {
|
||
|
|
wsOpen();
|
||
|
|
startPolling();
|
||
|
|
}
|
||
|
|
function setMsg(cls, text) {
|
||
|
|
sbox = document.getElementById('status_box');
|
||
|
|
sbox.className = "alert alert-" + cls;
|
||
|
|
sbox.innerHTML = text;
|
||
|
|
console.log(text);
|
||
|
|
}
|
||
|
|
function startPolling() {
|
||
|
|
var chart = new SmoothieChart({millisPerPixel:11,grid:{fillStyle:'#ffffff',strokeStyle:'#ffffff',borderVisible:false},
|
||
|
|
labels:{fillStyle:'#000000'},maxValue:1024,minValue:0});
|
||
|
|
chart.addTimeSeries(series, {lineWidth:2,strokeStyle:'#03a9f4',fillStyle:'#f1f5fa'});
|
||
|
|
chart.streamTo(document.getElementById("chartCanvas"), 500);
|
||
|
|
setInterval(function() { wsWrite('A'); }, 500);
|
||
|
|
}
|
||
|
|
function onMessage(evt) {
|
||
|
|
retries = 0;
|
||
|
|
var dv = new DataView(evt.data);
|
||
|
|
var val = dv.getUint16(0);
|
||
|
|
if (val == 0xBEEF || val == 0xDEAD)
|
||
|
|
console.log("LED switched");
|
||
|
|
else
|
||
|
|
series.append(new Date().getTime(), val);
|
||
|
|
}
|
||
|
|
function wsOpen() {
|
||
|
|
if (ws === undefined || ws.readyState != 0) {
|
||
|
|
if (retries)
|
||
|
|
setMsg("error", "WebSocket timeout, retrying..");
|
||
|
|
else
|
||
|
|
setMsg("info", "Opening WebSocket..");
|
||
|
|
ws = new WebSocket("ws://" + location.host);
|
||
|
|
ws.binaryType = 'arraybuffer';
|
||
|
|
ws.onopen = function(evt) { retries = 0; setMsg("done", "WebSocket is open."); };
|
||
|
|
ws.onerror = function(evt) { setMsg("error", "WebSocket error!"); };
|
||
|
|
ws.onmessage = function(evt) { onMessage(evt); };
|
||
|
|
wsOpenStream();
|
||
|
|
retries = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function wsOpenStream() {
|
||
|
|
var uri = "/stream"
|
||
|
|
var ws = new WebSocket("ws://" + location.host + uri);
|
||
|
|
ws.onmessage = function(evt) {
|
||
|
|
console.log(evt.data);
|
||
|
|
var stats = JSON.parse(evt.data);
|
||
|
|
console.log(stats);
|
||
|
|
document.getElementById('uptime').innerHTML = stats.uptime + ' seconds';
|
||
|
|
document.getElementById('heap').innerHTML = stats.heap + ' bytes';
|
||
|
|
document.getElementById('led').innerHTML = (stats.led == 1) ? 'On' : 'Off';
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function wsWrite(data) {
|
||
|
|
if (ws.readyState == 3 || retries++ > 5)
|
||
|
|
wsOpen();
|
||
|
|
else if (ws.readyState == 1)
|
||
|
|
ws.send(data);
|
||
|
|
}
|
||
|
|
function gpio() {
|
||
|
|
if (document.getElementById('led-switch').checked)
|
||
|
|
wsWrite('E');
|
||
|
|
else
|
||
|
|
wsWrite('D');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|