From 0279c47c8c886039093e0086c917575bbf419866 Mon Sep 17 00:00:00 2001 From: Donut Date: Fri, 27 Apr 2018 12:00:27 +0100 Subject: [PATCH] [docs] Convert the chat example to ES6 (#3227) --- examples/chat/index.js | 14 ++++----- examples/chat/public/main.js | 56 ++++++++++++++++++------------------ 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/examples/chat/index.js b/examples/chat/index.js index a1355285c9..04b5b9d926 100644 --- a/examples/chat/index.js +++ b/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; diff --git a/examples/chat/public/main.js b/examples/chat/public/main.js index 83d142825a..5af5b89f8c 100644 --- a/examples/chat/public/main.js +++ b/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 = $('
  • ').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,12 +145,12 @@ $(function() { } // Prevents input from having injected markup - function cleanInput (input) { + const cleanInput = (input) => { return $('
    ').text(input).html(); } // Updates the typing event - function updateTyping () { + const updateTyping = () => { if (connected) { if (!typing) { typing = true; @@ -158,7 +158,7 @@ $(function() { } 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'); });