| <html> |
| <head> |
| <title>Async Chat</title> |
| <script type='text/javascript'> |
| function $() |
| { |
| return document.getElementById(arguments[0]); |
| } |
| function $F() |
| { |
| return document.getElementById(arguments[0]).value; |
| } |
| function getKeyCode(ev) |
| { |
| if (window.event) return window.event.keyCode; |
| return ev.keyCode; |
| } |
| function xhr(method, uri, body, handler) |
| { |
| var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); |
| req.onreadystatechange = function () |
| { |
| if (req.readyState == 4 && handler) |
| { |
| eval('var o=' + req.responseText); |
| handler(o); |
| } |
| } |
| req.open(method, uri, true); |
| req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); |
| req.send(body); |
| } |
| function send(user, message, handler, join) |
| { |
| if (message) message = message.replace('%', '%25').replace('&', '%26').replace('=', '%3D'); |
| if (user) user = user.replace('%', '%25').replace('&', '%26').replace('=', '%3D'); |
| var requestBody = 'user=' + user + (message ? '&message=' + message : '') + (join ? '&join=true' : ''); |
| xhr('POST', 'chat', requestBody , handler); |
| } |
| var room = { |
| join: function (name) |
| { |
| this._username = name; |
| $('join').className = 'hidden'; |
| $('joined').className = ''; |
| $('phrase').focus(); |
| send(room._username, 'has joined!', room._poll, true); |
| }, |
| chat: function (text) |
| { |
| if (text != null && text.length > 0) |
| send(room._username, text, room._poll, false); |
| }, |
| _poll: function (m) |
| { |
| //console.debug(m); |
| if (m.chat) |
| { |
| var chat = document.getElementById('chat'); |
| var spanFrom = document.createElement('span'); |
| spanFrom.className = 'from'; |
| spanFrom.innerHTML = m.from + ': '; |
| var spanText = document.createElement('span'); |
| spanText.className = 'text'; |
| spanText.innerHTML = m.chat; |
| var lineBreak = document.createElement('br'); |
| chat.appendChild(spanFrom); |
| chat.appendChild(spanText); |
| chat.appendChild(lineBreak); |
| chat.scrollTop = chat.scrollHeight - chat.clientHeight; |
| } |
| send(room._username, null, room._poll, false); |
| }, |
| _end: '' |
| }; |
| </script> |
| <style type='text/css'> |
| div { |
| border: 0px solid black; |
| } |
| |
| div#chat { |
| clear: both; |
| width: 40em; |
| height: 20ex; |
| overflow: auto; |
| background-color: #f0f0f0; |
| padding: 4px; |
| border: 1px solid black; |
| } |
| |
| div#input { |
| clear: both; |
| width: 40em; |
| padding: 4px; |
| background-color: #e0e0e0; |
| border: 1px solid black; |
| border-top: 0 |
| } |
| |
| input#phrase { |
| width: 30em; |
| background-color: #e0f0f0; |
| } |
| |
| input#username { |
| width: 14em; |
| background-color: #e0f0f0; |
| } |
| |
| div.hidden { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div id='chat'></div> |
| <div id='input'> |
| <div id='join'> |
| Username: <input id='username' type='text'/><input id='joinB' class='button' type='submit' name='join' |
| value='Join'/> |
| </div> |
| <div id='joined' class='hidden'> |
| Chat: <input id='phrase' type='text'/> |
| <input id='sendB' class='button' type='submit' name='join' value='Send'/> |
| </div> |
| </div> |
| <script type='text/javascript'> |
| $('username').setAttribute('autocomplete', 'OFF'); |
| $('username').onkeyup = function (ev) |
| { |
| var keyc = getKeyCode(ev); |
| if (keyc == 13 || keyc == 10) |
| { |
| room.join($F('username')); |
| return false; |
| } |
| return true; |
| }; |
| $('joinB').onclick = function (event) |
| { |
| room.join($F('username')); |
| return false; |
| }; |
| $('phrase').setAttribute('autocomplete', 'OFF'); |
| $('phrase').onkeyup = function (ev) |
| { |
| var keyc = getKeyCode(ev); |
| if (keyc == 13 || keyc == 10) |
| { |
| room.chat($F('phrase')); |
| $('phrase').value = ''; |
| return false; |
| } |
| return true; |
| }; |
| $('sendB').onclick = function (event) |
| { |
| room.chat($F('phrase')); |
| $('phrase').value = ''; |
| return false; |
| }; |
| </script> |
| </body> |
| </html> |
