<!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>