forked from mmukhin/psitsmike_example_2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (129 loc) · 4.28 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<title>Mule Talk</title>
<link rel="stylesheet" type="text/css" href="http://lifewithryan.muletalk.jit.su/style.css" />
<!--<link rel="stylesheet" type="text/css" href="http://localhost:8080/style.css" />-->
<script type="text/javascript" src="http://lifewithryan.muletalk.jit.su/socket.io/socket.io.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
var socket = io.connect('http://lifewithryan.muletalk.jit.su');
//var socket = io.connect('http://localhost:8080');
// on connection to server, ask for user's name with an anonymous callback
socket.on('connect', function(){
// call the server-side function 'adduser' and send one parameter (value of prompt)
username = prompt("Please enter your first AND last name:")
if((username == null) || (username == '')) {
alert("You must enter a username, please reload and try again.");
$('#chat-input').hide();
return false;
} else {
socket.emit('adduser', username);
}
//socket.emit('adduser', prompt("What's your name?"));
$('#connecting').hide();
});
// listener, whenever the server emits 'updatechat', this updates the chat body
socket.on('updatechat', function (username, data) {
if(username == 'SERVER') {
$('#conversation').append('<span class="server-mesg">'+username + ' ' + data + '</span><br/>');
} else {
$('#conversation').append('<span class="username">'+username + ':</span> ' + data + '<br/>');
}
$('#right-window').prop('scrollTop', $('#right-window').prop('scrollHeight'));
});
// listener, whenever the server emits 'updaterooms', this updates the room the client is in
socket.on('updaterooms', function(rooms, current_room) {
$('#rooms').empty();
$.each(rooms, function(key, value) {
if(value == current_room){
$('#rooms').append('<div>' + value + '</div>');
}
else {
$('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>');
}
});
});
// listener, whenever the server emits 'updaterooms', this updates the room the client is in
socket.on('updateusers', function(users) {
$('#users').empty();
$.each(users, function(key, value) {
$('#users').append('<div>' + value + '</div>');
});
});
//listener, whenever someone adds a new room
socket.on('addedRoom', function(rooms, newroom) {
$('#rooms').append('<div id="rm-' + newroom + '"><a href="#" onclick="switchRoom(\''+newroom+'\')">' + newroom + '</a></div>');
});
//listener, whenever someone adds a new room
socket.on('removedRoom', function(room) {
//console.log('deleting ' + room);
elem = $('#rm-' + room);
//console.log(elem);
elem.remove();
});
function switchRoom(room){
socket.emit('switchRoom', room);
}
function addRoom() {
socket.emit('createRoom', prompt("Enter room name"));
}
// on load of page
$(function(){
// when the client clicks SEND
$('#datasend').click( function() {
var message = $('#data').val();
$('#data').val('');
//socket.emit('sendchat', message);
$('#data').focus();
if(message[0] == '/') {
//console.log('running a command');
socket.emit('command', message.replace('/', ''));
} else {
// tell server to execute 'sendchat' and send along one parameter
socket.emit('sendchat', message);
$('#data').focus();
}
});
// when the client hits ENTER on their keyboard
$('#data').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#datasend').focus().click();
$('#data').focus();
}
});
});
</script>
</head>
<body>
<div id="content">
<div id="left-sidebar">
<div id="logo">
<img src="http://bedford.k12.mi.us/images/marker_B.png" alt="Bedford Logo" />
</div>
<h2>ROOMS <a href="#" onclick="addRoom()">+</a></h2>
<div id="rooms">
</div>
<br/><br/>
<h2>USERS</h2>
<div id="users">
</div>
</div>
<header>
<h1>
Bedford MuleTalk
</h1>
</header>
<div id="right-window">
<div id="conversation">
<p id="connecting">Connecting Please Wait</p>
</div>
</div>
<div id="chat-input">
<input id="data" name="data" />
<input type="button" id="datasend" value="send" />
</div>
</div>
</body>
</html>