/
index.html
126 lines (112 loc) · 4.23 KB
/
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
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<style>
.light{
color: #888;
}
.other{
color: #000;
}
.me{
background-color: #ddd;
font-weight: bold;
}
.fromme{
background-color: #FFF;
color: #668;
font-weight: normal;
}
#outgoingChatMessageWrapper{
display:none;
}
.pm{
color: #800;
background-color: #FEE;
}
li{
list-style: none;
}
#incomingChatMessagesWrapper{
height: 500px;
overflow: auto;
}
</style>
<script src="/socket.io/socket.io.js"></script>
<link href="http://fuelcdn.com/fuelux-imh/2.1/css/fuelux.css" rel="stylesheet" />
<link href="http://fuelcdn.com/fuelux-imh/2.1/css/fuelux-responsive.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://fuelcdn.com/fuelux-imh/2.1/loader.min.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="span10" id="incomingChatMessagesWrapper"><ul id="incomingChatMessages"></ul><div id='makeitscroll'> </div></div>
<div class="span2"><ul id="names"></ul></div>
</div>
<p>Username: <input type="text" id="username" maxlength="16"><br>
<span id="passwordWrapper">Password: <input type="password" id="password"><br></span>
<button id="connect" value="connect">connect</button></p>
<p id="outgoingChatMessageWrapper">Message: <input type="text" id="outgoingChatMessage"></p>
<script>
var iosocket;
$('#connect').bind('click', function(){
$('#incomingChatMessages').append($('<p>Connecting...</p>'));
iosocket = io.connect('http://fuelbot.cloudfoundry.com/');
//iosocket = io.connect('http://localhost:3000/');
iosocket.on('connect', function () {
$('#incomingChatMessages').append($('<p>Connected!<br>Logging into freenode...</p>'));
iosocket.emit('createClient', [$('#username').val(), $('#password').val()], function(data){
$('#incomingChatMessages').append(data);
});
iosocket.emit('getNames', function(){});
iosocket.on('refreshNames', function(names){
console.log('names', names);
$('#names').html('');
$.each(names, function(key, val){
$('#names').append(['<li>', val, key, '</li>'].join(''));
});
});
iosocket.on('message', function(message) {
var highlightStart = '<span class="other">';
var highlightEnd = '</span>';
if(message.indexOf($('#username').val()) > -1){
highlightStart = '<span class="me">';
highlightEnd = '</span>';
}
$('#incomingChatMessages').append('<li>' + highlightStart + message + highlightEnd + '</li>');
document.getElementById('makeitscroll').scrollIntoView(true);
});
iosocket.on('disconnect', function() {
iosocket.disconnect();
iosocket = null;
io = null;
delete iosocket;
delete io;
$('#incomingChatMessages').append('<p>Disconnected by server...</p>');
});
});
$('#outgoingChatMessage').keypress(function(event) {
if(event.which == 13) {
event.preventDefault();
iosocket.send($('#outgoingChatMessage').val());
//$('#incomingChatMessages').append('<br>' + $('#outgoingChatMessage').val());
$('#outgoingChatMessage').val('');
}
});
$("#connect").hide();
$("#passwordWrapper").hide();
$("#username").prop('readonly', 'readonly');
$("#outgoingChatMessageWrapper").show();
});
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
var pword = getURLParameter("password");
if(pword !== "null"){
$("#password").val(pword);
}
</script>
</body>
</html>