140 lines
4.3 KiB
HTML
140 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<title>Demo Chat</title>
|
|
|
|
<link href="bootstrap.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
padding:20px;
|
|
}
|
|
.console {
|
|
height: 400px;
|
|
overflow: auto;
|
|
}
|
|
.username-msg {color:orange;}
|
|
.connect-msg {color:green;}
|
|
.disconnect-msg {color:red;}
|
|
.send-msg {color:#888}
|
|
</style>
|
|
|
|
|
|
<script src="js/socket.io/socket.io.js"></script>
|
|
<script src="js/moment.min.js"></script>
|
|
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
|
|
|
|
<script>
|
|
|
|
var userName1 = 'user1_' + Math.floor((Math.random()*1000)+1);
|
|
var userName2 = 'user2_' + Math.floor((Math.random()*1000)+1);
|
|
|
|
var chat1Socket = io.connect('http://localhost:9092/chat1');
|
|
var chat2Socket = io.connect('http://localhost:9092/chat2');
|
|
|
|
function connectHandler(parentId) {
|
|
return function() {
|
|
output('<span class="connect-msg">Client has connected to the server!</span>', parentId);
|
|
}
|
|
}
|
|
|
|
function messageHandler(parentId) {
|
|
return function(data) {
|
|
output('<span class="username-msg">' + data.userName + ':</span> ' + data.message, parentId);
|
|
}
|
|
}
|
|
|
|
function disconnectHandler(parentId) {
|
|
return function() {
|
|
output('<span class="disconnect-msg">The client has disconnected!</span>', parentId);
|
|
}
|
|
}
|
|
|
|
function sendMessageHandler(parentId, userName, chatSocket) {
|
|
var message = $(parentId + ' .msg').val();
|
|
$(parentId + ' .msg').val('');
|
|
|
|
var jsonObject = {'@class': 'com.corundumstudio.socketio.demo.ChatObject',
|
|
userName: userName,
|
|
message: message};
|
|
chatSocket.json.send(jsonObject);
|
|
}
|
|
|
|
|
|
chat1Socket.on('connect', connectHandler('#chat1'));
|
|
chat2Socket.on('connect', connectHandler('#chat2'));
|
|
|
|
chat1Socket.on('message', messageHandler('#chat1'));
|
|
chat2Socket.on('message', messageHandler('#chat2'));
|
|
|
|
chat1Socket.on('disconnect', disconnectHandler('#chat1'));
|
|
chat2Socket.on('disconnect', disconnectHandler('#chat2'));
|
|
|
|
function sendDisconnect1() {
|
|
chat1Socket.disconnect();
|
|
}
|
|
|
|
function sendDisconnect2() {
|
|
chat2Socket.disconnect();
|
|
}
|
|
|
|
function sendMessage1() {
|
|
sendMessageHandler('#chat1', userName1, chat1Socket);
|
|
}
|
|
|
|
function sendMessage2() {
|
|
sendMessageHandler('#chat2', userName2, chat2Socket);
|
|
}
|
|
|
|
|
|
function output(message, parentId) {
|
|
var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
|
|
var element = $("<div>" + currentTime + " " + message + "</div>");
|
|
$(parentId + ' .console').prepend(element);
|
|
}
|
|
|
|
$(document).keydown(function(e){
|
|
if(e.keyCode == 13) {
|
|
$('#send').click();
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Namespaces demo chat</h1>
|
|
|
|
<br/>
|
|
|
|
<div id="chat1" style="width: 49%; float: left;">
|
|
<h4>chat1</h4>
|
|
<div class="console well">
|
|
</div>
|
|
|
|
<form class="well form-inline" onsubmit="return false;">
|
|
<input class="msg input-xlarge" type="text" placeholder="Type something..."/>
|
|
<button type="button" onClick="sendMessage1()" class="btn" id="send">Send</button>
|
|
<button type="button" onClick="sendDisconnect1()" class="btn">Disconnect</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="chat2" style="width: 49%; float: right;" >
|
|
<h4>chat2</h4>
|
|
<div class="console well">
|
|
</div>
|
|
|
|
<form class="well form-inline" onsubmit="return false;">
|
|
<input class="msg input-xlarge" type="text" placeholder="Type something..."/>
|
|
<button type="button" onClick="sendMessage2()" class="btn" id="send">Send</button>
|
|
<button type="button" onClick="sendDisconnect2()" class="btn">Disconnect</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|