PSG
/
civetweb
mirror of https://github.com/civetweb/civetweb.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
							<!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>