vendor/github.com/gorilla/websocket/examples/chat/home.html

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