index.html 2.52 KB
Newer Older
Sergey Lyubka's avatar
Sergey Lyubka committed
1 2 3 4 5 6 7 8
<!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 {
9
      background-color: #789; margin: 0;
Sergey Lyubka's avatar
Sergey Lyubka committed
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
      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);
42 43 44 45
    var div = document.createElement('div');
    div.innerHTML = ev.data;
    document.getElementById('messages').appendChild(div);

Sergey Lyubka's avatar
Sergey Lyubka committed
46
  };
47

Sergey Lyubka's avatar
Sergey Lyubka committed
48 49 50
  window.onload = function() {
    document.getElementById('send_button').onclick = function(ev) {
      var msg = document.getElementById('send_input').value;
51 52
      document.getElementById('send_input').value = '';
      ws.send(msg);
Sergey Lyubka's avatar
Sergey Lyubka committed
53
    };
54 55 56 57
    document.getElementById('send_input').onkeypress = function(ev) {
      if (ev.keyCode == 13 || ev.which == 13) {
        document.getElementById('send_button').click();
      }
Sergey Lyubka's avatar
Sergey Lyubka committed
58 59 60 61 62 63 64 65 66
    };
  };
</script>
</head>
<body>
  <div class="content">
    <h1>Websocket PubSub Demonstration</h1>

    <p>
67
      This page demonstrates how Mongoose could be used to implement
Sergey Lyubka's avatar
Sergey Lyubka committed
68 69 70 71
      <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>
72 73
      connection with the server, making each browser window a websocket client.
      Send messages, and see messages sent by other clients.
Sergey Lyubka's avatar
Sergey Lyubka committed
74 75 76 77
    </p>

    <div id="messages">
    </div>
78

Sergey Lyubka's avatar
Sergey Lyubka committed
79 80 81 82 83 84 85
    <p>
      <input type="text" id="send_input" />
      <button id="send_button">Send Message</button>
    </p>
  </div>
</body>
</html>