Adding a sample chat room page

2019-10-20 21:56:20 +05:30 · 2019-10-20 21:56:20 +05:30 · 95f007b68a
commit 95f007b68a
parent 67e3c625a5
1 changed files with 85 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>WebSocket Test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style type="text/css">
+    body {
+      background-color: #789; margin: 0;
+      padding: 0; font: 14px Helvetica, Arial, sans-serif;
+    }
+    div.content {
+      width: 800px; margin: 2em auto; padding: 20px 50px;
+      background-color: #fff; border-radius: 1em;
+    }
+    #messages {
+      border: 2px solid #fec; border-radius: 1em;
+      height: 10em; overflow: scroll; padding: 0.5em 1em;
+    }
+    a:link, a:visited { color: #69c; text-decoration: none; }
+    @media (max-width: 700px) {
+      body { background-color: #fff; }
+      div.content {
+        width: auto; margin: 0 auto; border-radius: 0;
+        padding: 1em;
+      }
+    }
+</style>
+
+<script language="javascript" type="text/javascript">
+
+  var rooms = [];
+  var ws = new WebSocket('ws://' + location.host + '/ws');
+
+  if (!window.console) { window.console = { log: function() {} } };
+
+  ws.onopen = function(ev)  { console.log(ev); };
+  ws.onerror = function(ev) { console.log(ev); };
+  ws.onclose = function(ev) { console.log(ev); };
+  ws.onmessage = function(ev) {
+    console.log(ev);
+    var div = document.createElement('div');
+    div.innerHTML = ev.data;
+    document.getElementById('messages').appendChild(div);
+
+  };
+
+  window.onload = function() {
+    document.getElementById('send_button').onclick = function(ev) {
+      var msg = document.getElementById('send_input').value;
+      document.getElementById('send_input').value = '';
+      ws.send(msg);
+    };
+    document.getElementById('send_input').onkeypress = function(ev) {
+      if (ev.keyCode == 13 || ev.which == 13) {
+        document.getElementById('send_button').click();
+      }
+    };
+  };
+</script>
+</head>
+<body>
+  <div class="content">
+    <h1>Websocket PubSub Demonstration</h1>
+
+    <p>
+      This page demonstrates how Mongoose could be used to implement
+      <a href="http://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern">
+       publish–subscribe pattern</a>. Open this page in several browser
+       windows. Each window initiates persistent
+       <a href="http://en.wikipedia.org/wiki/WebSocket">WebSocket</a>
+      connection with the server, making each browser window a websocket client.
+      Send messages, and see messages sent by other clients.
+    </p>
+
+    <div id="messages">
+    </div>
+
+    <p>
+      <input type="text" id="send_input" />
+      <button id="send_button">Send Message</button>
+    </p>
+  </div>
+</body>
+</html>