[docs] Convert the chat example to ES6 (socketio#3227)

Author: LetsDoughNut

examples/chat/index.js

@@ -6,7 +6,7 @@ var server = require('http').createServer(app);
 var io = require('../..')(server);
 var port = process.env.PORT || 3000;
 
-server.listen(port, function () {
+server.listen(port, () => {
   console.log('Server listening at port %d', port);
 });
 
@@ -17,11 +17,11 @@ app.use(express.static(path.join(__dirname, 'public')));
 
 var numUsers = 0;
 
-io.on('connection', function (socket) {
+io.on('connection', (socket) => {
   var addedUser = false;
 
   // when the client emits 'new message', this listens and executes
-  socket.on('new message', function (data) {
+  socket.on('new message', (data) => {
     // we tell the client to execute 'new message'
     socket.broadcast.emit('new message', {
       username: socket.username,
@@ -30,7 +30,7 @@ io.on('connection', function (socket) {
   });
 
   // when the client emits 'add user', this listens and executes
-  socket.on('add user', function (username) {
+  socket.on('add user', (username) => {
     if (addedUser) return;
 
     // we store the username in the socket session for this client
@@ -48,21 +48,21 @@ io.on('connection', function (socket) {
   });
 
   // when the client emits 'typing', we broadcast it to others
-  socket.on('typing', function () {
+  socket.on('typing', () => {
     socket.broadcast.emit('typing', {
       username: socket.username
     });
   });
 
   // when the client emits 'stop typing', we broadcast it to others
-  socket.on('stop typing', function () {
+  socket.on('stop typing', () => {
     socket.broadcast.emit('stop typing', {
       username: socket.username
     });
   });
 
   // when the user disconnects.. perform this
-  socket.on('disconnect', function () {
+  socket.on('disconnect', () => {
     if (addedUser) {
       --numUsers;
 

examples/chat/public/main.js

@@ -25,7 +25,7 @@ $(function() {
 
   var socket = io();
 
-  function addParticipantsMessage (data) {
+  const addParticipantsMessage = (data) => {
     var message = '';
     if (data.numUsers === 1) {
       message += "there's 1 participant";
@@ -36,7 +36,7 @@ $(function() {
   }
 
   // Sets the client's username
-  function setUsername () {
+  const setUsername = () => {
     username = cleanInput($usernameInput.val().trim());
 
     // If the username is valid
@@ -52,7 +52,7 @@ $(function() {
   }
 
   // Sends a chat message
-  function sendMessage () {
+  const sendMessage = () => {
     var message = $inputMessage.val();
     // Prevent markup from being injected into the message
     message = cleanInput(message);
@@ -69,13 +69,13 @@ $(function() {
   }
 
   // Log a message
-  function log (message, options) {
+    const log = (message, options) => {
     var $el = $('<li>').addClass('log').text(message);
     addMessageElement($el, options);
   }
 
   // Adds the visual chat message to the message list
-  function addChatMessage (data, options) {
+  const addChatMessage = (data, options) => {
     // Don't fade the message in if there is an 'X was typing'
     var $typingMessages = getTypingMessages(data);
     options = options || {};
@@ -100,15 +100,15 @@ $(function() {
   }
 
   // Adds the visual chat typing message
-  function addChatTyping (data) {
+  const addChatTyping = (data) => {
     data.typing = true;
     data.message = 'is typing';
     addChatMessage(data);
   }
 
   // Removes the visual chat typing message
-  function removeChatTyping (data) {
-    getTypingMessages(data).fadeOut(function () {
+  const removeChatTyping = (data) => {
+    getTypingMessages(data).fadeOut(() => {
       $(this).remove();
     });
   }
@@ -118,7 +118,7 @@ $(function() {
   // options.fade - If the element should fade-in (default = true)
   // options.prepend - If the element should prepend
   //   all other messages (default = false)
-  function addMessageElement (el, options) {
+  const addMessageElement = (el, options) => {
     var $el = $(el);
 
     // Setup default options
@@ -145,20 +145,20 @@ $(function() {
   }
 
   // Prevents input from having injected markup
-  function cleanInput (input) {
+  const cleanInput = (input) => {
     return $('<div/>').text(input).html();
   }
 
   // Updates the typing event
-  function updateTyping () {
+  const updateTyping = () => {
     if (connected) {
       if (!typing) {
         typing = true;
         socket.emit('typing');
       }
       lastTypingTime = (new Date()).getTime();
 
-      setTimeout(function () {
+      setTimeout(() => {
         var typingTimer = (new Date()).getTime();
         var timeDiff = typingTimer - lastTypingTime;
         if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
@@ -170,14 +170,14 @@ $(function() {
   }
 
   // Gets the 'X is typing' messages of a user
-  function getTypingMessages (data) {
-    return $('.typing.message').filter(function (i) {
+  const getTypingMessages = (data) => {
+    return $('.typing.message').filter(i => {
       return $(this).data('username') === data.username;
     });
   }
 
   // Gets the color of a username through our hash function
-  function getUsernameColor (username) {
+  const getUsernameColor = (username) => {
     // Compute hash code
     var hash = 7;
     for (var i = 0; i < username.length; i++) {
@@ -190,7 +190,7 @@ $(function() {
 
   // Keyboard events
 
-  $window.keydown(function (event) {
+  $window.keydown(event => {
     // Auto-focus the current input when a key is typed
     if (!(event.ctrlKey || event.metaKey || event.altKey)) {
       $currentInput.focus();
@@ -207,26 +207,26 @@ $(function() {
     }
   });
 
-  $inputMessage.on('input', function() {
+  $inputMessage.on('input', () => {
     updateTyping();
   });
 
   // Click events
 
   // Focus input when clicking anywhere on login page
-  $loginPage.click(function () {
+  $loginPage.click(() => {
     $currentInput.focus();
   });
 
   // Focus input when clicking on the message input's border
-  $inputMessage.click(function () {
+  $inputMessage.click(() => {
     $inputMessage.focus();
   });
 
   // Socket events
 
   // Whenever the server emits 'login', log the login message
-  socket.on('login', function (data) {
+  socket.on('login', (data) => {
     connected = true;
     // Display the welcome message
     var message = "Welcome to Socket.IO Chat – ";
@@ -237,45 +237,45 @@ $(function() {
   });
 
   // Whenever the server emits 'new message', update the chat body
-  socket.on('new message', function (data) {
+  socket.on('new message', (data) => {
     addChatMessage(data);
   });
 
   // Whenever the server emits 'user joined', log it in the chat body
-  socket.on('user joined', function (data) {
+  socket.on('user joined', (data) => {
     log(data.username + ' joined');
     addParticipantsMessage(data);
   });
 
   // Whenever the server emits 'user left', log it in the chat body
-  socket.on('user left', function (data) {
+  socket.on('user left', (data) => {
     log(data.username + ' left');
     addParticipantsMessage(data);
     removeChatTyping(data);
   });
 
   // Whenever the server emits 'typing', show the typing message
-  socket.on('typing', function (data) {
+  socket.on('typing', (data) => {
     addChatTyping(data);
   });
 
   // Whenever the server emits 'stop typing', kill the typing message
-  socket.on('stop typing', function (data) {
+  socket.on('stop typing', (data) => {
     removeChatTyping(data);
   });
 
-  socket.on('disconnect', function () {
+  socket.on('disconnect', () => {
     log('you have been disconnected');
   });
 
-  socket.on('reconnect', function () {
+  socket.on('reconnect', () => {
     log('you have been reconnected');
     if (username) {
       socket.emit('add user', username);
     }
   });
 
-  socket.on('reconnect_error', function () {
+  socket.on('reconnect_error', () => {
     log('attempt to reconnect has failed');
   });