review.fuel-infra Code Review - packages/trusty/rabbitmq-server.git/blob

   1 <!doctype html>
   2 <html><head>
   3     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   4     <script src="http://cdn.sockjs.org/sockjs-0.2.min.js"></script>
   5     <script src="multiplex.js"></script>
   6     <style>
   7       .box {
   8           width: 300px;
   9           float: left;
  10           margin: 0 20px 0 20px;
  11       }
  12       .box div, .box input {
  13           border: 1px solid;
  14           -moz-border-radius: 4px;
  15           border-radius: 4px;
  16           width: 100%;
  17           padding: 0px;
  18           margin: 5px;
  19       }
  20       .box div {
  21           border-color: grey;
  22           height: 300px;
  23           overflow: auto;
  24       }
  25       .box input {
  26           height: 30px;
  27       }
  28       h1 {
  29           margin-left: 75px;
  30       }
  31       body {
  32           background-color: #F0F0F0;
  33           font-family: "Arial";
  34       }
  35     </style>
  36 <head><body lang="en">
  37     <h1>SockJS Multiplex example</h1>
  38
  39     <div id="first" class="box">
  40       <div></div>
  41       <form><input autocomplete="off" value="Type here..."></input></form>
  42     </div>
  43
  44     <div id="second" class="box">
  45       <div></div>
  46       <form><input autocomplete="off"></input></form>
  47     </div>
  48
  49     <div id="third" class="box">
  50       <div></div>
  51       <form><input autocomplete="off"></input></form>
  52     </div>
  53
  54     <script>
  55         // Pipe - convenience wrapper to present data received from an
  56         // object supporting WebSocket API in an html element. And the other
  57         // direction: data typed into an input box shall be sent back.
  58         var pipe = function(ws, el_name) {
  59             var div  = $(el_name + ' div');
  60             var inp  = $(el_name + ' input');
  61             var form = $(el_name + ' form');
  62
  63             var print = function(m, p) {
  64                 p = (p === undefined) ? '' : JSON.stringify(p);
  65                 div.append($("<code>").text(m + ' ' + p));
  66                 div.append($("<br>"));
  67                 div.scrollTop(div.scrollTop() + 10000);
  68             };
  69
  70             ws.onopen    = function()  {print('[*] open', ws.protocol);};
  71             ws.onmessage = function(e) {print('[.] message', e.data);};
  72             ws.onclose   = function()  {print('[*] close');};
  73
  74             form.submit(function() {
  75                 print('[ ] sending', inp.val());
  76                 ws.send(inp.val());
  77                 inp.val('');
  78                 return false;
  79             });
  80         };
  81
  82         var sockjs_url = '/multiplex';
  83         var sockjs = new SockJS(sockjs_url);
  84
  85         var multiplexer = new MultiplexedWebSocket(sockjs);
  86         var ann  = multiplexer.channel('ann');
  87         var bob  = multiplexer.channel('bob');
  88         var carl = multiplexer.channel('carl');
  89
  90         pipe(ann,  '#first');
  91         pipe(bob,  '#second');
  92         pipe(carl, '#third');
  93
  94         $('#first input').focus();
  95     </script>
  96 </body></html>