<html>
<head>
<style>
body { font-family: arial; font-size: 12px; font-weight: normal; margin: 0; padding: 20px; color: white; }
h1 { font-size: 24px; font-weight: bold; color: black; }
.chatBlock {
float: left; width: 380px; background-color: #b0b0b0; padding: 10px 20px 10px 20px; margin-right: 30px;
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-style: solid; border-color: #404040; border-width: 1px;
box-shadow: 5px 5px 10px #909090; -webkit-box-shadow: 5px 5px 10px #909090;
}
.connected { background-color: #096311; }
.statusBlock { height: 24px; line-height: 24px; margin-bottom: 5px; font-weight: bold; }
.statusBlock span { font-weight: normal; }
.connButton { float: right; }
.connLog {
font-family: courier; background-color: white; color: #404040; padding: 5px;
border-style: solid; border-color: 404040; border-width: 1px 2px 2px 1px;
overflow: auto; width: 370px; height: 300px;
}
.sendBlock { height: 14px; line-height: 14px; margin-top: 5px; font-weight: bold; }
.sendBox { width: 120px; }
.sendButton { float: right; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="/json2.js"></script>
<script src="/class.socketConnection.js"></script>
<script>
var conn1;
var conn2;
$(document).ready(function() {
var host = "ws://www.yourdomain.com:6789/";
conn1 = new socketConnection(host);
conn1.connectionID = 'connection1';
conn1.onConnect = function(readyState) { handleConnect(1, readyState); };
conn1.onReceive = function(msgType, msgData) { handleReceive(1, msgType, msgData); };
conn1.onAck = function(msgID) { handleAck(1, msgID); };
conn1.onException = function(msg) { handleException(1, msg); };
conn1.onDisconnect = function(readyState) { handleConnect(1, readyState); };
conn2 = new socketConnection(host);
conn2.connectionID = 'connection2';
conn2.onConnect = function(readyState) { handleConnect(2, readyState); };
conn2.onReceive = function(msgType, msgData) { handleReceive(2, msgType, msgData); };
conn2.onAck = function(msgID) { handleAck(2, msgID); };
conn2.onException = function(msg) { handleException(2, msg); };
conn2.onDisconnect = function(readyState) { handleConnect(2, readyState); };
$('.connButton').click(function(e)
{
var socket = ($(e.srcElement).attr('target') == 'conn1') ? conn1 : conn2;
if (socket.connected()) socket.disconnect();
else socket.connect();
});
$('.sendButton').click(function(e) {
var which = ($(e.srcElement).attr('target') == 'conn1') ? '1' : '2';
handleSend(which);
});
$('.sendBox').
keypress(function(e) {
if(e.keyCode == 13)
handleSend(($(e.srcElement).attr('target') == 'conn1') ? '1' : '2');
}).focus(function() {
this.select();
});
});
function handleConnect(which, readyState)
{
var connecting = (readyState == 1);
if (connecting) $('#chat' + which).addClass('connected');
else $('#chat' + which).removeClass('connected');
$('#chat' + which + ' .statusBlock > *').
filter('input').attr('value', (connecting) ? 'Disconnect' : 'Connect').end().
filter('span').html((connecting) ? '00:00:00' : 'Not Connected');
if (connecting)
$('#chat' + which + ' .connLog').html('');
connLog(which, (connecting) ? '(+) Connected' : '(x) Disconnected');
$('#chat' + which + ' .sendBox').focus();
}
function handleSend(which)
{
var socket = (which == '1') ? conn1 : conn2;
if (!socket.connected())
return alert('Socket ' + which + ' is not connected');
var msgType = $('#chat' + which + ' .sendType').val();
var msg = $('#chat' + which + ' .sendBox').val();
var wantAck = $('#chat' + which + ' .sendAck').val();
var msgID = socket.send(msgType, msg, wantAck);
connLog(which, '(↑) [' + msgType + '] ' + msg);
if (wantAck == '1') connLog(which, '(‡) ' + msgID);
$('#chat' + which + ' .sendBox').focus();
}
function handleReceive(which, msgType, msgData)
{
switch(msgType)
{
case 'servertime':
$('#conn' + which + 'stat').html(msgData);
break;
default:
connLog(which, '(↓) [' + msgType + '] ' + msgData);
}
}
function handleAck(which, msgID)
{
connLog(which, '(↓) [ack] ' + msgID);
}
function handleException(which, msg)
{
connLog(which, '(‼) [err] ' + msg);
}
function connLog(which, msg)
{
var target = $('#chat' + which + ' .connLog').get(0);
$(target).append('<div>' + msg + '</div>');
$(target).prop('scrollTop', $(target).prop('scrollHeight'));
}
</script>
</head>
<body>
<h1>Perk's Websock Server & JS Class</h1>
<div id="chat1" class="chatBlock">
<div class="statusBlock">
ConnexTime: <span id="conn1stat">Not Connected</span>
<input type="button" value="Connect" target="conn1" class="connButton" />
</div>
<div class="connLog"></div>
<div class="sendBlock">
Send:
<select class="sendType" target="conn1" size="1">
<option value="message">Message</option>
<option value="query" SELECTED>Query</option>
<option value="fail">Fail</option>
</select>
<input class="sendBox" type="text" target="conn1" value="time"/>
<select class="sendAck" target="conn1" size="1">
<option value="1">Want Ack</option>
<option value="0">No Ack</option>
</select>
<input type="button" value="Send" class="sendButton" target="conn1" />
</div>
</div>
<div id="chat2" class="chatBlock">
<div class="statusBlock">
ConnexTime: <span id="conn2stat">Not Connected</span>
<input type="button" value="Connect" target="conn2" class="connButton" />
</div>
<div class="connLog"></div>
<div class="sendBlock">
Send:
<select class="sendType" target="conn2" size="1">
<option value="message">Message</option>
<option value="query" SELECTED>Query</option>
<option value="fail">Fail</option>
</select>
<input class="sendBox" type="text" target="conn2" value="date"/>
<select class="sendAck" target="conn2" size="1">
<option value="1">Want Ack</option>
<option value="0">No Ack</option>
</select>
<input type="button" value="Send" class="sendButton" target="conn2" />
</div>
</div>
</body>
</html>