110 lines
4.1 KiB
HTML
110 lines
4.1 KiB
HTML
<html><head>
|
|
<title>Equinox Console (WebSocket)</title>
|
|
<script type='text/javascript'>
|
|
|
|
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://').replace('/index.html','');
|
|
this._ws=new WebSocket(location);
|
|
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 websocket server.
|
|
</p>
|
|
</body></html>
|
|
|
|
|
|
|