Statistics
| Branch: | Tag: | Revision:

mongoose / examples / websocket_chat / index.html @ eaef5bd1

History | View | Annotate | Download (2.52 KB)

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8" />
5
  <title>WebSocket Test</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
  <style type="text/css">
8
    body {
9
      background-color: #789; margin: 0;
10
      padding: 0; font: 14px Helvetica, Arial, sans-serif;
11
    }
12
    div.content {
13
      width: 800px; margin: 2em auto; padding: 20px 50px;
14
      background-color: #fff; border-radius: 1em;
15
    }
16
    #messages {
17
      border: 2px solid #fec; border-radius: 1em;
18
      height: 10em; overflow: scroll; padding: 0.5em 1em;
19
    }
20
    a:link, a:visited { color: #69c; text-decoration: none; }
21
    @media (max-width: 700px) {
22
      body { background-color: #fff; }
23
      div.content {
24
        width: auto; margin: 0 auto; border-radius: 0;
25
        padding: 1em;
26
      }
27
    }
28
</style>
29

    
30
<script language="javascript" type="text/javascript">
31

32
  var rooms = [];
33
  var ws = new WebSocket('ws://' + location.host + '/ws');
34

35
  if (!window.console) { window.console = { log: function() {} } };
36

37
  ws.onopen = function(ev)  { console.log(ev); };
38
  ws.onerror = function(ev) { console.log(ev); };
39
  ws.onclose = function(ev) { console.log(ev); };
40
  ws.onmessage = function(ev) {
41
    console.log(ev);
42
    var div = document.createElement('div');
43
    div.innerHTML = ev.data;
44
    document.getElementById('messages').appendChild(div);
45

46
  };
47

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

    
66
    <p>
67
      This page demonstrates how Mongoose could be used to implement
68
      <a href="http://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern">
69
       publish–subscribe pattern</a>. Open this page in several browser
70
       windows. Each window initiates persistent
71
       <a href="http://en.wikipedia.org/wiki/WebSocket">WebSocket</a>
72
      connection with the server, making each browser window a websocket client.
73
      Send messages, and see messages sent by other clients.
74
    </p>
75

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

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