github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/libraries/gorilla/websocket/examples/command/home.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3  <head>
     4  <title>Command Example</title>
     5  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     6  <script type="text/javascript">
     7      $(function() {
     8  
     9      var conn;
    10      var msg = $("#msg");
    11      var log = $("#log");
    12  
    13      function appendLog(msg) {
    14          var d = log[0]
    15          var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
    16          msg.appendTo(log)
    17          if (doScroll) {
    18              d.scrollTop = d.scrollHeight - d.clientHeight;
    19          }
    20      }
    21  
    22      $("#form").submit(function() {
    23          if (!conn) {
    24              return false;
    25          }
    26          if (!msg.val()) {
    27              return false;
    28          }
    29          conn.send(msg.val());
    30          msg.val("");
    31          return false
    32      });
    33  
    34      if (window["WebSocket"]) {
    35          conn = new WebSocket("ws://{{$}}/ws");
    36          conn.onclose = function(evt) {
    37              appendLog($("<div><b>Connection closed.</b></div>"))
    38          }
    39          conn.onmessage = function(evt) {
    40              appendLog($("<pre/>").text(evt.data))
    41          }
    42      } else {
    43          appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
    44      }
    45      });
    46  </script>
    47  <style type="text/css">
    48  html {
    49      overflow: hidden;
    50  }
    51  
    52  body {
    53      overflow: hidden;
    54      padding: 0;
    55      margin: 0;
    56      width: 100%;
    57      height: 100%;
    58      background: gray;
    59  }
    60  
    61  #log {
    62      background: white;
    63      margin: 0;
    64      padding: 0.5em 0.5em 0.5em 0.5em;
    65      position: absolute;
    66      top: 0.5em;
    67      left: 0.5em;
    68      right: 0.5em;
    69      bottom: 3em;
    70      overflow: auto;
    71  }
    72  
    73  #log pre {
    74    margin: 0;
    75  }
    76  
    77  #form {
    78      padding: 0 0.5em 0 0.5em;
    79      margin: 0;
    80      position: absolute;
    81      bottom: 1em;
    82      left: 0px;
    83      width: 100%;
    84      overflow: hidden;
    85  }
    86  
    87  </style>
    88  </head>
    89  <body>
    90  <div id="log"></div>
    91  <form id="form">
    92      <input type="submit" value="Send" />
    93      <input type="text" id="msg" size="64"/>
    94  </form>
    95  </body>
    96  </html>