diff --git a/examples/chat/public/main.js b/examples/chat/public/main.js index f20614a89a..4da4a22488 100644 --- a/examples/chat/public/main.js +++ b/examples/chat/public/main.js @@ -1,36 +1,36 @@ $(function() { - var FADE_TIME = 150; // ms - var TYPING_TIMER_LENGTH = 400; // ms - var COLORS = [ + const FADE_TIME = 150; // ms + const TYPING_TIMER_LENGTH = 400; // ms + const COLORS = [ '#e21400', '#91580f', '#f8a700', '#f78b00', '#58dc00', '#287b00', '#a8f07a', '#4ae8c4', '#3b88eb', '#3824aa', '#a700ff', '#d300e7' ]; // Initialize variables - var $window = $(window); - var $usernameInput = $('.usernameInput'); // Input for username - var $messages = $('.messages'); // Messages area - var $inputMessage = $('.inputMessage'); // Input message input box + const $window = $(window); + const $usernameInput = $('.usernameInput'); // Input for username + const $messages = $('.messages'); // Messages area + const $inputMessage = $('.inputMessage'); // Input message input box - var $loginPage = $('.login.page'); // The login page - var $chatPage = $('.chat.page'); // The chatroom page + const $loginPage = $('.login.page'); // The login page + const $chatPage = $('.chat.page'); // The chatroom page - // Prompt for setting a username - var username; - var connected = false; - var typing = false; - var lastTypingTime; - var $currentInput = $usernameInput.focus(); + const socket = io(); - var socket = io(); + // Prompt for setting a username + let username; + let connected = false; + let typing = false; + let lastTypingTime; + let $currentInput = $usernameInput.focus(); const addParticipantsMessage = (data) => { - var message = ''; + let message = ''; if (data.numUsers === 1) { - message += "there's 1 participant"; + message += `there's 1 participant`; } else { - message += "there are " + data.numUsers + " participants"; + message += `there are ${data.numUsers} participants`; } log(message); } @@ -53,45 +53,41 @@ $(function() { // Sends a chat message const sendMessage = () => { - var message = $inputMessage.val(); + let message = $inputMessage.val(); // Prevent markup from being injected into the message message = cleanInput(message); // if there is a non-empty message and a socket connection if (message && connected) { $inputMessage.val(''); - addChatMessage({ - username: username, - message: message - }); + addChatMessage({ username, message }); // tell server to execute 'new message' and send along one parameter socket.emit('new message', message); } } // Log a message - const log = (message, options) => { - var $el = $('
  • ').addClass('log').text(message); + const log = (message, options) => { + const $el = $('
  • ').addClass('log').text(message); addMessageElement($el, options); } // Adds the visual chat message to the message list const addChatMessage = (data, options) => { // Don't fade the message in if there is an 'X was typing' - var $typingMessages = getTypingMessages(data); - options = options || {}; + const $typingMessages = getTypingMessages(data); if ($typingMessages.length !== 0) { options.fade = false; $typingMessages.remove(); } - var $usernameDiv = $('') + const $usernameDiv = $('') .text(data.username) .css('color', getUsernameColor(data.username)); - var $messageBodyDiv = $('') + const $messageBodyDiv = $('') .text(data.message); - var typingClass = data.typing ? 'typing' : ''; - var $messageDiv = $('
  • ') + const typingClass = data.typing ? 'typing' : ''; + const $messageDiv = $('
  • ') .data('username', data.username) .addClass(typingClass) .append($usernameDiv, $messageBodyDiv); @@ -119,8 +115,7 @@ $(function() { // options.prepend - If the element should prepend // all other messages (default = false) const addMessageElement = (el, options) => { - var $el = $(el); - + const $el = $(el); // Setup default options if (!options) { options = {}; @@ -141,6 +136,7 @@ $(function() { } else { $messages.append($el); } + $messages[0].scrollTop = $messages[0].scrollHeight; } @@ -159,8 +155,8 @@ $(function() { lastTypingTime = (new Date()).getTime(); setTimeout(() => { - var typingTimer = (new Date()).getTime(); - var timeDiff = typingTimer - lastTypingTime; + const typingTimer = (new Date()).getTime(); + const timeDiff = typingTimer - lastTypingTime; if (timeDiff >= TYPING_TIMER_LENGTH && typing) { socket.emit('stop typing'); typing = false; @@ -179,12 +175,12 @@ $(function() { // Gets the color of a username through our hash function const getUsernameColor = (username) => { // Compute hash code - var hash = 7; - for (var i = 0; i < username.length; i++) { - hash = username.charCodeAt(i) + (hash << 5) - hash; + let hash = 7; + for (let i = 0; i < username.length; i++) { + hash = username.charCodeAt(i) + (hash << 5) - hash; } // Calculate color - var index = Math.abs(hash % COLORS.length); + const index = Math.abs(hash % COLORS.length); return COLORS[index]; } @@ -229,7 +225,7 @@ $(function() { socket.on('login', (data) => { connected = true; // Display the welcome message - var message = "Welcome to Socket.IO Chat – "; + const message = 'Welcome to Socket.IO Chat – '; log(message, { prepend: true }); @@ -243,13 +239,13 @@ $(function() { // Whenever the server emits 'user joined', log it in the chat body socket.on('user joined', (data) => { - log(data.username + ' joined'); + log(`${data.username} joined`); addParticipantsMessage(data); }); // Whenever the server emits 'user left', log it in the chat body socket.on('user left', (data) => { - log(data.username + ' left'); + log(`${data.username} left`); addParticipantsMessage(data); removeChatTyping(data); });