diff --git a/examples/chat/app.js b/examples/chat/app.js
index 0d50177c..ba1fe261 100644
--- a/examples/chat/app.js
+++ b/examples/chat/app.js
@@ -26,30 +26,30 @@ var usernames = {};
io.sockets.on('connection', function (socket) {
- // when the client emits 'sendchat', this listens and executes
- socket.on('sendchat', function (data) {
- // we tell the client to execute 'updatechat' with 2 parameters
- io.sockets.emit('updatechat', socket.username, data);
+ // when the client emits 'new message', this listens and executes
+ socket.on('new message', function (data) {
+ // we tell the client to execute 'update chat' with 2 parameters
+ io.sockets.emit('update chat', socket.username, data);
});
- // when the client emits 'adduser', this listens and executes
- socket.on('adduser', function(username) {
+ // when the client emits 'add user', this listens and executes
+ socket.on('add user', function (username) {
// we store the username in the socket session for this client
socket.username = username;
// add the client's username to the global list
usernames[username] = username;
// echo to client they've connected
- socket.emit('updatechat', 'SERVER', 'you (' + username + ') have connected. ' + getNumberOfUsersString());
+ socket.emit('update chat', 'SERVER', 'you (' + username + ') have connected. ' + getNumberOfUsersString());
// echo globally (all clients) that a person has connected
- socket.broadcast.emit('updatechat', 'SERVER', username + ' has connected. ' + getNumberOfUsersString());
+ socket.broadcast.emit('update chat', 'SERVER', username + ' has connected. ' + getNumberOfUsersString());
});
// when the user disconnects.. perform this
- socket.on('disconnect', function() {
+ socket.on('disconnect', function () {
// remove the username from global usernames list
delete usernames[socket.username];
// echo globally that this client has left
- socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected. ' + getNumberOfUsersString());
+ socket.broadcast.emit('update chat', 'SERVER', socket.username + ' has disconnected. ' + getNumberOfUsersString());
});
});
diff --git a/examples/chat/main.js b/examples/chat/main.js
index e69da204..d5cbd306 100644
--- a/examples/chat/main.js
+++ b/examples/chat/main.js
@@ -1,46 +1,44 @@
-var socket = io.connect();
+$(function() {
+ // Initialize varibles
+ var $messages = $('.messages'); // Messages area
+ var $sendMessage = $('.sendMessage'); // Send message button
+ var $inputMessage = $('.inputMessage'); // Input message input box
-// 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)
- socket.emit('adduser', prompt("What's your name?"));
-});
+ // Prompt for a username
+ var username = prompt("What's your name?");
-// listener, whenever the server emits 'updatechat', this updates the chat body
-socket.on('updatechat', function (username, message) {
- var usernameDiv = '
' + username + '
';
- var messageBodyDiv = '' + message + '
';
- var messageDiv = '' + usernameDiv + messageBodyDiv + '
';
- var $messages = $('.messages');
- $messages.append(messageDiv);
- $messages[0].scrollTop = $messages[0].scrollHeight;
-});
+ var socket = io.connect();
-// listener, whenever the server emits 'updateusers', this updates the username list
-socket.on('updateusers', function(data) {
- $('.users').empty();
- $.each(data, function(key, value) {
- $('.users').append('' + key + '
');
+ // on connection to server
+ socket.on('connect', function() {
+ // call the server-side function 'add user' and send along one parameter (the username)
+ socket.emit('add user', username);
+ });
+
+ // whenever the server emits 'update chat', update the chat body
+ socket.on('update chat', function (username, message) {
+ var usernameDiv = '' + username + '
';
+ var messageBodyDiv = '' + message + '
';
+ var messageDiv = '' + usernameDiv + messageBodyDiv + '
';
+ $messages.append(messageDiv);
+ $messages[0].scrollTop = $messages[0].scrollHeight;
});
-});
-// on load of page
-$(function(){
// when the client clicks SEND
- $('.sendMessage').click( function() {
- var message = $('.inputMessage').val();
- // If there is a non-empty message
+ $sendMessage.click(function () {
+ var message = $inputMessage.val();
+ // if there is a non-empty message
if (message) {
- $('.inputMessage').val('');
- // tell server to execute 'sendchat' and send along one parameter
- socket.emit('sendchat', message);
+ $inputMessage.val('');
+ // tell server to execute 'new message' and send along one parameter
+ socket.emit('new message', message);
}
});
// when the client hits ENTER on their keyboard
- $(window).keypress(function(e) {
- if(e.which == 13) {
- $('.sendMessage').click();
+ $(window).keypress(function (e) {
+ if (e.which === 13) {
+ $sendMessage.click();
}
});
});
\ No newline at end of file
diff --git a/examples/chat/style.css b/examples/chat/style.css
index d2d206d3..108a607f 100644
--- a/examples/chat/style.css
+++ b/examples/chat/style.css
@@ -2,17 +2,19 @@
* {
box-sizing: border-box;
}
+
html, body {
- padding: 0;
- margin: 0;
height: 100%;
+ margin: 0;
+ padding: 0;
}
/* Font */
.messages, .inputMessage, .sendMessage {
- font-size: 20px;
font-family: Arial;
+ font-size: 20px;
}
+
.log {
color: gray;
}
@@ -20,25 +22,25 @@ html, body {
/* Messages */
.messages {
height: 100%;
-
- padding: 10px 10px 60px 10px;
margin: 0;
-
overflow-y: scroll;
+ padding: 10px 10px 60px 10px;
}
+
.message {
overflow: hidden;
}
+
.username {
color: rgb(255, 133, 0);
float: left;
- padding-right: 10px;
- width: 15%;
- text-align: right;
-
overflow: hidden;
+ padding-right: 10px;
+ text-align: right;
text-overflow: ellipsis;
+ width: 15%;
}
+
.messageBody {
float: left;
width: 75%;
@@ -46,22 +48,23 @@ html, body {
/* Input */
.inputArea {
- position: absolute;
bottom: 0;
- left: 0;
- right: 0;
height: 50px;
+ left: 0;
+ position: absolute;
+ right: 0;
}
.inputMessage {
float: left;
- width: 90%;
height: 100%;
padding-left: 10px;
+ width: 90%;
}
+
/* Send message button */
.sendMessage {
float: left;
- width: 10%;
height: 100%;
+ width: 10%;
}
\ No newline at end of file