mirror of
https://github.com/lammertb/libhttp.git
synced 2025-04-20 21:47:45 +03:00
317 lines
9.1 KiB
HTML
317 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
|
|
<title>Websocket Meters</title>
|
|
<!--
|
|
Version 0.1 Contributed by William Greathouse 9-Sep-2013
|
|
Simple demo of WebSocket connection use. Not a great example of web coding,
|
|
but it is functional.
|
|
|
|
The meter displays are adapted from CSS-TRICKS Progress Bars by Chris Coyier
|
|
at http://css-tricks.com/css3-progress-bars/
|
|
-->
|
|
<style>
|
|
body {
|
|
background: #222;
|
|
}
|
|
h1 {
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
button {
|
|
width: 225px;
|
|
height: 30px;
|
|
margin: auto 10px;
|
|
background-color: #ccc;
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
border-radius:6px;
|
|
color: blue;
|
|
font-size: 20px;
|
|
}
|
|
button:hover {
|
|
background-color: #888;
|
|
}
|
|
button:hover:disabled {
|
|
background-color: #ccc;
|
|
}
|
|
button:disabled {
|
|
color: lightgray;
|
|
}
|
|
|
|
.button_container {
|
|
width:550px;
|
|
display:block;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
|
|
.meter {
|
|
height: 20px; /* Can be anything */
|
|
position: relative;
|
|
background: #555;
|
|
-moz-border-radius: 25px;
|
|
-webkit-border-radius: 25px;
|
|
border-radius: 25px;
|
|
padding: 10px;
|
|
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
|
|
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
|
|
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
|
|
}
|
|
.meter > span {
|
|
display: block;
|
|
height: 100%;
|
|
-webkit-border-top-right-radius: 20px;
|
|
-webkit-border-bottom-right-radius: 20px;
|
|
-moz-border-radius-topright: 20px;
|
|
-moz-border-radius-bottomright: 20px;
|
|
border-top-right-radius: 20px;
|
|
border-bottom-right-radius: 20px;
|
|
-webkit-border-top-left-radius: 20px;
|
|
-webkit-border-bottom-left-radius: 20px;
|
|
-moz-border-radius-topleft: 20px;
|
|
-moz-border-radius-bottomleft: 20px;
|
|
border-top-left-radius: 20px;
|
|
border-bottom-left-radius: 20px;
|
|
background-color: rgb(43,194,83);
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left bottom,
|
|
left top,
|
|
color-stop(0, rgb(43,194,83)),
|
|
color-stop(1, rgb(84,240,84))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center bottom,
|
|
rgb(43,194,83) 37%,
|
|
rgb(84,240,84) 69%
|
|
);
|
|
-webkit-box-shadow:
|
|
inset 0 2px 9px rgba(255,255,255,0.3),
|
|
inset 0 -2px 6px rgba(0,0,0,0.4);
|
|
-moz-box-shadow:
|
|
inset 0 2px 9px rgba(255,255,255,0.3),
|
|
inset 0 -2px 6px rgba(0,0,0,0.4);
|
|
box-shadow:
|
|
inset 0 2px 9px rgba(255,255,255,0.3),
|
|
inset 0 -2px 6px rgba(0,0,0,0.4);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.meter > span:after, .animate > span > span {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background-image:
|
|
-webkit-gradient(linear, 0 0, 100% 100%,
|
|
color-stop(.25, rgba(255, 255, 255, .2)),
|
|
color-stop(.25, transparent), color-stop(.5, transparent),
|
|
color-stop(.5, rgba(255, 255, 255, .2)),
|
|
color-stop(.75, rgba(255, 255, 255, .2)),
|
|
color-stop(.75, transparent), to(transparent)
|
|
);
|
|
background-image:
|
|
-moz-linear-gradient(
|
|
-45deg,
|
|
rgba(255, 255, 255, .2) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, .2) 50%,
|
|
rgba(255, 255, 255, .2) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
z-index: 1;
|
|
-webkit-background-size: 50px 50px;
|
|
-moz-background-size: 50px 50px;
|
|
-webkit-animation: move 2s linear infinite;
|
|
-webkit-border-top-right-radius: 20px;
|
|
-webkit-border-bottom-right-radius: 20px;
|
|
-moz-border-radius-topright: 20px;
|
|
-moz-border-radius-bottomright: 20px;
|
|
border-top-right-radius: 20px;
|
|
border-bottom-right-radius: 20px;
|
|
-webkit-border-top-left-radius: 20px;
|
|
-webkit-border-bottom-left-radius: 20px;
|
|
-moz-border-radius-topleft: 20px;
|
|
-moz-border-radius-bottomleft: 20px;
|
|
border-top-left-radius: 20px;
|
|
border-bottom-left-radius: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.animate > span:after {
|
|
display: none;
|
|
}
|
|
|
|
@-webkit-keyframes move {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
.orange > span {
|
|
background-color: #f1a165;
|
|
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
|
|
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
|
|
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
|
|
}
|
|
|
|
.red > span {
|
|
background-color: #f0a3a3;
|
|
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
|
|
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
|
|
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
|
|
}
|
|
|
|
.nostripes > span > span, .nostripes > span:after {
|
|
-webkit-animation: none;
|
|
background-image: none;
|
|
}
|
|
|
|
#output {
|
|
background-color: #ccc;
|
|
height: 240px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page_wrap">
|
|
|
|
<h1>Meter Updates via WebSocket</h1>
|
|
|
|
<p/>
|
|
|
|
<div class="meter">
|
|
<span id="meter1" style="width: 25%"></span>
|
|
</div>
|
|
|
|
<p/>
|
|
|
|
<div class="meter orange nostripes">
|
|
<span id="meter2" style="width: 33.3%"></span>
|
|
</div>
|
|
|
|
<p/>
|
|
|
|
<div class="meter red">
|
|
<span id="meter3" style="width: 80%"></span>
|
|
</div>
|
|
|
|
<p/>
|
|
|
|
</div>
|
|
<div class="button_container">
|
|
<div>
|
|
<button id="connection" onclick="toggleConnection(this)">WebSocket Connect</button>
|
|
<button id="update" disabled onclick="toggleUpdate(this)">Disable Update</button>
|
|
</div>
|
|
</div>
|
|
<p/>
|
|
<div id="output"></div>
|
|
|
|
</body>
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
var connection; // websocket connection
|
|
|
|
function writeToScreen (message) {
|
|
var div = document.createElement('div');
|
|
var output = document.getElementById('output');
|
|
div.innerHTML = message;
|
|
output.appendChild(div);
|
|
output.scrollTop = output.scrollHeight;
|
|
}
|
|
|
|
function ws_connect() {
|
|
// check for websocket support
|
|
// for Internet Explorer < 10 there are options for websocket support that
|
|
// could be integrated into production code, but for now, we are expecting
|
|
// browser support to be present for this demo
|
|
if ('WebSocket' in window) {
|
|
|
|
writeToScreen('Connecting');
|
|
connection = new WebSocket('ws://' + window.location.host + '/meters');
|
|
connection.onopen = function(ev) {
|
|
document.getElementById("connection").innerHTML = "WebSocket Disconnect";
|
|
document.getElementById("update").disabled=false;
|
|
document.getElementById("update").innerHTML = "Disable Update";
|
|
writeToScreen('CONNECTED');
|
|
var message = 'update on';
|
|
writeToScreen('SENT: ' + message);
|
|
connection.send(message);
|
|
};
|
|
|
|
connection.onclose = function(ev) {
|
|
document.getElementById("update").disabled=true;
|
|
document.getElementById("update").innerHTML = "Enable Update";
|
|
document.getElementById("connection").innerHTML = "WebSocket Connect";
|
|
writeToScreen('DISCONNECTED');
|
|
};
|
|
|
|
connection.onmessage = function(ev) {
|
|
if (ev.data.substr(0,5) == "meter")
|
|
{
|
|
var target = ev.data.split(":")[0];
|
|
var meter = document.getElementById(target);
|
|
var data = ev.data.split(":")[1].split(",");
|
|
var percent = (data[0]*100)/data[1];
|
|
meter.style.width = percent+"%";
|
|
}
|
|
else
|
|
writeToScreen('RECEIVED: ' + ev.data);
|
|
};
|
|
|
|
connection.onerror = function(ev) {
|
|
alert("WebSocket error");
|
|
};
|
|
|
|
} else {
|
|
alert("WebSocket is not available!!!\n" +
|
|
"Demo will not function.");
|
|
}
|
|
}
|
|
|
|
// user connect/disconnect
|
|
function toggleConnection(el) {
|
|
var tag=el.innerHTML;
|
|
if (tag == "WebSocket Connect")
|
|
{
|
|
ws_connect();
|
|
}
|
|
else
|
|
{
|
|
connection.close();
|
|
}
|
|
}
|
|
|
|
// user turn updates on/off
|
|
function toggleUpdate(el) {
|
|
var tag=el.innerHTML;
|
|
var message;
|
|
if (tag == "Enable Update")
|
|
{
|
|
message = 'update on';
|
|
el.innerHTML = "Disable Update";
|
|
}
|
|
else
|
|
{
|
|
message = 'update off';
|
|
el.innerHTML = "Enable Update";
|
|
}
|
|
writeToScreen('SENT: ' + message);
|
|
connection.send(message);
|
|
}
|
|
</script>
|
|
|
|
</html>
|