-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnamespace-index.html
134 lines (99 loc) · 4.22 KB
/
namespace-index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!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);
}
</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">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">Send</button>
<button type="button" onClick="sendDisconnect2()" class="btn">Disconnect</button>
</form>
</div>
</body>
</html>