| |
| <html><head> |
| <title>WebSocket Chat</title> |
| <script type='text/javascript'> |
| |
| if (!window.WebSocket && window.MozWebSocket) |
| window.WebSocket=window.MozWebSocket; |
| if (!window.WebSocket) |
| alert("WebSocket not supported by this browser"); |
| |
| 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; } |
| |
| var room = { |
| join: function(name) { |
| this._username=name; |
| var location = document.location.toString().replace('http://','ws://').replace('https://','wss://'); |
| this._ws=new WebSocket(location,"chat"); |
| this._ws.onopen=this._onopen; |
| this._ws.onmessage=this._onmessage; |
| this._ws.onclose=this._onclose; |
| }, |
| |
| _onopen: function(){ |
| $('join').className='hidden'; |
| $('joined').className=''; |
| $('phrase').focus(); |
| room._send(room._username,'has joined!'); |
| }, |
| |
| _send: function(user,message){ |
| user=user.replace(':','_'); |
| if (this._ws) |
| this._ws.send(user+':'+message); |
| }, |
| |
| chat: function(text) { |
| if (text != null && text.length>0 ) |
| room._send(room._username,text); |
| }, |
| |
| _onmessage: function(m) { |
| if (m.data){ |
| var c=m.data.indexOf(':'); |
| var from=m.data.substring(0,c).replace('<','<').replace('>','>'); |
| var text=m.data.substring(c+1).replace('<','<').replace('>','>'); |
| |
| var chat=$('chat'); |
| var spanFrom = document.createElement('span'); |
| spanFrom.className='from'; |
| spanFrom.innerHTML=from+': '; |
| var spanText = document.createElement('span'); |
| spanText.className='text'; |
| spanText.innerHTML=text; |
| var lineBreak = document.createElement('br'); |
| chat.appendChild(spanFrom); |
| chat.appendChild(spanText); |
| chat.appendChild(lineBreak); |
| chat.scrollTop = chat.scrollHeight - chat.clientHeight; |
| } |
| }, |
| |
| _onclose: function(m) { |
| this._ws=null; |
| $('join').className=''; |
| $('joined').className='hidden'; |
| $('username').focus(); |
| $('chat').innerHTML=''; |
| } |
| |
| }; |
| |
| </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: 0px } |
| input#phrase { width:30em; background-color: #e0f0f0; } |
| input#username { width:14em; background-color: #e0f0f0; } |
| div.hidden { display: none; } |
| span.from { font-weight: bold; } |
| span.alert { font-style: italic; } |
| </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> |
| |
| <p> |
| This is a demonstration of the Jetty's support for javax.websocket server sockets. |
| </p> |
| </body></html> |
| |
| |
| |
