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