Commit ed917469 authored by dm171558's avatar dm171558

Added User Login

* Implemented functionality for user login
* counting number of users
* notify all users if user joined the channel
parent 95af560e
......@@ -20,8 +20,109 @@ $(function() {
var connected = false;
var $currentInput = $usernameInput.focus();
// Click events
var socket = io();
// Keyboard events
$window.keydown(function (event) {
// When the client hits ENTER on their keyboard
if (event.which === 13) {
if (username) {
} else {
setUsername();
}
}
});
// Login
// Sets the client's username
function setUsername () {
username = cleanInput($usernameInput.val().trim());
// If the username is valid
if (username) {
$loginPage.fadeOut();
$chatPage.show();
$loginPage.off('click');
$currentInput = $inputMessage.focus();
// Tell the server your username
socket.emit('addUser', username);
}
}
function addParticipantsMessage (data)
{
if(!connected)
return;
var message = '';
if (data.numUsers === 1)
{
message += "You are all alone. Get yourself some friends!";
} else {
message += "there are " + data.numUsers + " participants";
}
log(message);
}
// Helper methods
// Log a message
function log (message, options) {
var $el = $('<li>').addClass('log').text(message);
addMessageElement($el, options);
}
// Adds a message element to the messages and scrolls to the bottom
// el - The element to add as a message
// 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) {
var $el = $(el);
// Setup default options
if (!options) {
options = {};
}
if (typeof options.fade === 'undefined') {
options.fade = true;
}
if (typeof options.prepend === 'undefined') {
options.prepend = false;
}
// Apply options
if (options.fade) {
$el.hide().fadeIn(FADE_TIME);
}
if (options.prepend) {
$messages.prepend($el);
} else {
$messages.append($el);
}
$messages[0].scrollTop = $messages[0].scrollHeight;
}
// Prevents input from having injected markup
function cleanInput (input) {
return $('<div/>').text(input).html();
}
// Gets the color of a username through our hash function
function getUsernameColor (username) {
// Compute hash code
var hash = 7;
for (var i = 0; i < username.length; i++) {
hash = username.charCodeAt(i) + (hash << 5) - hash;
}
// Calculate color
var index = Math.abs(hash % COLORS.length);
return COLORS[index];
}
// Click events
// Focus input when clicking anywhere on login page
$loginPage.click(function () {
$currentInput.focus();
......@@ -31,4 +132,27 @@ $(function() {
$inputMessage.click(function () {
$inputMessage.focus();
});
// Socket Listener
// Whenever the server emits 'login', log the login message
socket.on('login', function (data) {
console.log(data);
connected = true;
// Display the welcome message
var message = "Welcome to Socket.IO Chat – ";
log(message, {
prepend: true
});
addParticipantsMessage(data);
});
// Whenever the server emits 'user joined', log it in the chat body
socket.on('userJoined', function (data) {
if(!username)
return;
log(data.username + ' joined');
addParticipantsMessage(data);
});
});
......@@ -3,10 +3,12 @@ import * as IO from 'socket.io';
export class WebSocket
{
private socket: any;
private numUsers: number;
constructor(server: any)
{
this.socket = IO(server);
this.numUsers = 0;
this.attachListeners();
}
......@@ -15,7 +17,27 @@ export class WebSocket
{
this.socket.on('connection', (socket) =>
{
let addedUser = false;
// when the client emits 'add user', this listens and executes
socket.on('addUser', (username) => {
if (addedUser) return;
// we store the username in the socket session for this client
socket.username = username;
this.numUsers++;
addedUser = true;
socket.emit('login', {
numUsers: this.numUsers
});
// echo globally (all clients) that a person has connected
socket.broadcast.emit('userJoined', {
username: socket.username,
numUsers: this.numUsers
});
});
});
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment