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


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8"></meta>
  <title>Websocket test</title>
  <style type="text/css" media="screen">
    body { background:#eee; margin:0 }
    .main {
      display:block; border:1px solid #ccc; position:absolute;
      top:5%; left:5%; width:90%; height:90%; background:#fff;
    }
  </style>
</head>
<body>

  <script type="text/javascript"><![CDATA[

    var connection;
    var websock_text_field;
    var hand_hour;
    var hand_min;

    function webSockKeepAlive() {
      if (keepAlive) {
        connection.send('client still alive');
        console.log('send keep alive')
        setTimeout("webSockKeepAlive()", 10000);
      }
    }

    function load() {
      var wsproto = (location.protocol === 'https:') ? "wss:" : "ws:";
      connection = new WebSocket(wsproto + "//" + window.location.host + "/websocket.lua");
      websock_text_field = document.getElementById('websock_text_field');
      hand_min = document.getElementById('hand_min');
      hand_hour = document.getElementById('hand_hour');

      connection.onopen = function () {
        keepAlive = true;
        webSockKeepAlive();
      };

      // Log errors
      connection.onerror = function (error) {
        keepAlive = false;
        alert("WebSocket error");
        connection.close();
      };

      // Log messages from the server
      connection.onmessage = function (e) {
        var lCmd = e.data.substring(0,3);
        if (lCmd == "-->") {
          console.log(e.data);
          var lDirection = Number(e.data.substring(5));
          if (e.data[3] == 'h') {
            hand_hour.setAttribute("transform", "rotate(" + lDirection + " 800 600)");
          }
          if (e.data[3] == 'm') {
            hand_min.setAttribute("transform", "rotate(" + lDirection + " 800 600)");
          }
        } else {
          websock_text_field.textContent = e.data;
        }
      };

      console.log("load");
    }

  ]]></script>

<svg class="main"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 1600 1200" preserveAspectRatio="xMinYMin meet"
  onload="load()"
  >

  <circle id="line_a" cx="800" cy="600" r="500" style="stroke:rgb(255,0,0); stroke-width:5; fill:rgb(200,200,200)"/>
  <polygon points="800,200 900,300 850,300 850,600 750,600 750,300 700,300" style="fill:rgb(100,0,0)" transform="rotate(0,800,600)" id="hand_hour"/>
  <polygon points="800,100 840,200 820,200 820,600 780,600 780,200 760,200" style="fill:rgb(0,100,0)" transform="rotate(0,800,600)" id="hand_min"/>
  <text id="websock_text_field" x="800" y="600" text-anchor="middle" font-size="50px" fill="red">No websocket connection yet</text>

</svg>

</body>
</html>