Skip to content

Commit

Permalink
[docs] Convert the chat example to ES6 (#3227)
Browse files Browse the repository at this point in the history
  • Loading branch information
LetsDoughNut authored and darrachequesne committed Apr 27, 2018
1 parent 2917942 commit 0279c47
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 35 deletions.
14 changes: 7 additions & 7 deletions examples/chat/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

Expand All @@ -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,
Expand All @@ -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
Expand All @@ -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;

Expand Down
56 changes: 28 additions & 28 deletions examples/chat/public/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -36,7 +36,7 @@ $(function() {
}

// Sets the client's username
function setUsername () {
const setUsername = () => {
username = cleanInput($usernameInput.val().trim());

// If the username is valid
Expand All @@ -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);
Expand All @@ -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 || {};
Expand All @@ -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();
});
}
Expand All @@ -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
Expand All @@ -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) {
Expand All @@ -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++) {
Expand All @@ -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();
Expand All @@ -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 – ";
Expand All @@ -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');
});

Expand Down

0 comments on commit 0279c47

Please sign in to comment.