Updated code style

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());
   });
 });
 

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 = '<div class="username">' + username + '</div>';
-  var messageBodyDiv = '<div class="messageBody">' + message + '</div>';
-  var messageDiv = '<div class="message">' + usernameDiv + messageBodyDiv + '</div>';
-  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('<div>' + key + '</div>');
+  // 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 = '<div class="username">' + username + '</div>';
+    var messageBodyDiv = '<div class="messageBody">' + message + '</div>';
+    var messageDiv = '<div class="message">' + usernameDiv + messageBodyDiv + '</div>';
+    $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();
     }
   });
 });

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%;
 }