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

     1  <!DOCTYPE html>
     2  <html lang="en">
     3  <head>
     4  <title>Chat 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($("<div/>").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  #form {
    74      padding: 0 0.5em 0 0.5em;
    75      margin: 0;
    76      position: absolute;
    77      bottom: 1em;
    78      left: 0px;
    79      width: 100%;
    80      overflow: hidden;
    81  }
    82  
    83  </style>
    84  </head>
    85  <body>
    86  <div id="log"></div>
    87  <form id="form">
    88      <input type="submit" value="Send" />
    89      <input type="text" id="msg" size="64"/>
    90  </form>
    91  </body>
    92  </html>