songchenchen
/
VehicleMonitor-WEB


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!doctype html>
<html><head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"></script>
    <script src="http://cdn.sockjs.org/websocket-multiplex-0.1.js"></script>
    <style>
      .box {
          width: 300px;
          float: left;
          margin: 0 20px 0 20px;
      }
      .box div, .box input {
          border: 1px solid;
          -moz-border-radius: 4px;
          border-radius: 4px;
          width: 100%;
          padding: 0px;
          margin: 5px;
      }
      .box div {
          border-color: grey;
          height: 300px;
          overflow: auto;
      }
      .box input {
          height: 30px;
      }
      h1 {
          margin-left: 75px;
      }
      body {
          background-color: #F0F0F0;
          font-family: "Arial";
      }
    </style>
</head><body lang="en">
    <h1>SockJS Multiplex example</h1>

    <div id="first" class="box">
      <div></div>
      <form><input autocomplete="off" value="Type here..."></input></form>
    </div>

    <div id="second" class="box">
      <div></div>
      <form><input autocomplete="off"></input></form>
    </div>

    <div id="third" class="box">
      <div></div>
      <form><input autocomplete="off"></input></form>
    </div>

    <script>
        // Pipe - convenience wrapper to present data received from an
        // object supporting WebSocket API in an html element. And the other
        // direction: data typed into an input box shall be sent back.
        var pipe = function(ws, el_name) {
            var div  = $(el_name + ' div');
            var inp  = $(el_name + ' input');
            var form = $(el_name + ' form');

            var print = function(m, p) {
                p = (p === undefined) ? '' : JSON.stringify(p);
                div.append($("<code>").text(m + ' ' + p));
                div.append($("<br>"));
                div.scrollTop(div.scrollTop() + 10000);
            };

            ws.onopen    = function()  {print('[*] open', ws.protocol);};
            ws.onmessage = function(e) {print('[.] message', e.data);};
            ws.onclose   = function()  {print('[*] close');};

            form.submit(function() {
                print('[ ] sending', inp.val());
                ws.send(inp.val());
                inp.val('');
                return false;
            });
        };

        var sockjs_url = '/multiplex';
        var sockjs = new SockJS(sockjs_url);

        var multiplexer = new WebSocketMultiplex(sockjs);
        var ann  = multiplexer.channel('ann');
        var bob  = multiplexer.channel('bob');
        var carl = multiplexer.channel('carl');

        pipe(ann,  '#first');
        pipe(bob,  '#second');
        pipe(carl, '#third');

        $('#first input').focus();
    </script>
</body></html>