rip out chat component
This commit is contained in:
Michael Q Larson
71
app.js
71
app.js
@ -246,73 +246,4 @@ app.listen(app.get('port'), function() {
|
|||||||
console.log('Express server listening on port %d in %s mode', app.get('port'), app.get('env'));
|
console.log('Express server listening on port %d in %s mode', app.get('port'), app.get('env'));
|
||||||
});
|
});
|
||||||
|
|
||||||
module.exports = app;
|
module.exports = app;
|
||||||
|
|
||||||
/**
|
|
||||||
* Chat
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var usernames = {};
|
|
||||||
var numUsers = 0;
|
|
||||||
|
|
||||||
io.on('connection', function (socket) {
|
|
||||||
var addedUser = false;
|
|
||||||
|
|
||||||
// when the client emits 'new message', this listens and executes
|
|
||||||
socket.on('new message', function (data) {
|
|
||||||
// we tell the client to execute 'new message'
|
|
||||||
socket.broadcast.emit('new message', {
|
|
||||||
username: socket.username,
|
|
||||||
message: data
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// when the client emits 'add user', this listens and executes
|
|
||||||
socket.on('add user', function (username) {
|
|
||||||
// we store the username in the socket session for this client
|
|
||||||
socket.username = username;
|
|
||||||
// add the client's username to the global list
|
|
||||||
usernames[username] = username;
|
|
||||||
++numUsers;
|
|
||||||
addedUser = true;
|
|
||||||
socket.emit('login', {
|
|
||||||
numUsers: numUsers
|
|
||||||
});
|
|
||||||
// echo globally (all clients) that a person has connected
|
|
||||||
socket.broadcast.emit('user joined', {
|
|
||||||
username: socket.username,
|
|
||||||
numUsers: numUsers
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// when the client emits 'typing', we broadcast it to others
|
|
||||||
socket.on('typing', function () {
|
|
||||||
socket.broadcast.emit('typing', {
|
|
||||||
username: socket.username
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// when the client emits 'stop typing', we broadcast it to others
|
|
||||||
socket.on('stop typing', function () {
|
|
||||||
socket.broadcast.emit('stop typing', {
|
|
||||||
username: socket.username
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// when the user disconnects.. perform this
|
|
||||||
socket.on('disconnect', function () {
|
|
||||||
// remove the username from global usernames list
|
|
||||||
if (addedUser) {
|
|
||||||
delete usernames[socket.username];
|
|
||||||
--numUsers;
|
|
||||||
|
|
||||||
// echo globally that this client has left
|
|
||||||
socket.broadcast.emit('user left', {
|
|
||||||
username: socket.username,
|
|
||||||
numUsers: numUsers
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,269 +0,0 @@
|
|||||||
$(document).ready(function() {
|
|
||||||
|
|
||||||
var FADE_TIME = 150; // ms
|
|
||||||
var TYPING_TIMER_LENGTH = 400; // ms
|
|
||||||
var COLORS = [
|
|
||||||
'#e21400', '#91580f', '#f8a700', '#f78b00',
|
|
||||||
'#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
|
|
||||||
'#3b88eb', '#3824aa', '#a700ff', '#d300e7'
|
|
||||||
];
|
|
||||||
|
|
||||||
// Initialize varibles
|
|
||||||
var $window = $(window);
|
|
||||||
var $usernameInput = $('.usernameInput'); // Input for username
|
|
||||||
var $messages = $('.messages'); // Messages area
|
|
||||||
var $inputMessage = $('.inputMessage'); // Input message input box
|
|
||||||
|
|
||||||
var $loginPage = $('.login.page'); // The login page
|
|
||||||
var $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();
|
|
||||||
|
|
||||||
var socket = io("http://localhost:2999");
|
|
||||||
|
|
||||||
|
|
||||||
function addParticipantsMessage (data) {
|
|
||||||
var message = '';
|
|
||||||
if (data.numUsers === 1) {
|
|
||||||
message += "there's 1 participant";
|
|
||||||
} else {
|
|
||||||
message += "there are " + data.numUsers + " participants";
|
|
||||||
}
|
|
||||||
log(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sets the client's username
|
|
||||||
function setUsername () {
|
|
||||||
username = auth.username;
|
|
||||||
|
|
||||||
// If the username is valid
|
|
||||||
if (username) {
|
|
||||||
$loginPage.fadeOut();
|
|
||||||
$chatPage.show();
|
|
||||||
$loginPage.off('click');
|
|
||||||
$currentInput = $inputMessage.focus();
|
|
||||||
|
|
||||||
// Tell the server your username
|
|
||||||
socket.emit('add user', username);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sends a chat message
|
|
||||||
function sendMessage () {
|
|
||||||
var 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
|
|
||||||
});
|
|
||||||
// tell server to execute 'new message' and send along one parameter
|
|
||||||
socket.emit('new message', message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Log a message
|
|
||||||
function 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) {
|
|
||||||
// Don't fade the message in if there is an 'X was typing'
|
|
||||||
var $typingMessages = getTypingMessages(data);
|
|
||||||
options = options || {};
|
|
||||||
if ($typingMessages.length !== 0) {
|
|
||||||
options.fade = false;
|
|
||||||
$typingMessages.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
var $usernameDiv = $('<span class="username"/>')
|
|
||||||
.text(data.username)
|
|
||||||
.css('color', getUsernameColor(data.username));
|
|
||||||
var $messageBodyDiv = $('<span class="messageBody">')
|
|
||||||
.text(data.message);
|
|
||||||
|
|
||||||
var typingClass = data.typing ? 'typing' : '';
|
|
||||||
var $messageDiv = $('<li class="message"/>')
|
|
||||||
.data('username', data.username)
|
|
||||||
.addClass(typingClass)
|
|
||||||
.append($usernameDiv, $messageBodyDiv);
|
|
||||||
|
|
||||||
addMessageElement($messageDiv, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adds the visual chat typing message
|
|
||||||
function addChatTyping (data) {
|
|
||||||
data.typing = true;
|
|
||||||
data.message = 'is typing';
|
|
||||||
addChatMessage(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Removes the visual chat typing message
|
|
||||||
function removeChatTyping (data) {
|
|
||||||
getTypingMessages(data).fadeOut(function () {
|
|
||||||
$(this).remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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).text();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Updates the typing event
|
|
||||||
function updateTyping () {
|
|
||||||
if (connected) {
|
|
||||||
if (!typing) {
|
|
||||||
typing = true;
|
|
||||||
socket.emit('typing');
|
|
||||||
}
|
|
||||||
lastTypingTime = (new Date()).getTime();
|
|
||||||
|
|
||||||
setTimeout(function () {
|
|
||||||
var typingTimer = (new Date()).getTime();
|
|
||||||
var timeDiff = typingTimer - lastTypingTime;
|
|
||||||
if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
|
|
||||||
socket.emit('stop typing');
|
|
||||||
typing = false;
|
|
||||||
}
|
|
||||||
}, TYPING_TIMER_LENGTH);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gets the 'X is typing' messages of a user
|
|
||||||
function getTypingMessages (data) {
|
|
||||||
return $('.typing.message').filter(function (i) {
|
|
||||||
return $(this).data('username') === data.username;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Keyboard events
|
|
||||||
|
|
||||||
$window.keydown(function (event) {
|
|
||||||
// Auto-focus the current input when a key is typed
|
|
||||||
if (!(event.ctrlKey || event.metaKey || event.altKey)) {
|
|
||||||
$currentInput.focus();
|
|
||||||
}
|
|
||||||
// When the client hits ENTER on their keyboard
|
|
||||||
if (event.which === 13) {
|
|
||||||
if (username) {
|
|
||||||
sendMessage();
|
|
||||||
socket.emit('stop typing');
|
|
||||||
typing = false;
|
|
||||||
} else {
|
|
||||||
setUsername();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$inputMessage.on('input', function() {
|
|
||||||
updateTyping();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Click events
|
|
||||||
|
|
||||||
// Focus input when clicking anywhere on login page
|
|
||||||
$loginPage.click(function () {
|
|
||||||
$currentInput.focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Focus input when clicking on the message input's border
|
|
||||||
$inputMessage.click(function () {
|
|
||||||
$inputMessage.focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Socket events
|
|
||||||
|
|
||||||
// Whenever the server emits 'login', log the login message
|
|
||||||
socket.on('login', function (data) {
|
|
||||||
connected = true;
|
|
||||||
// Display the welcome message
|
|
||||||
var message = "Welcome to Socket.IO Chat – ";
|
|
||||||
log(message, {
|
|
||||||
prepend: true
|
|
||||||
});
|
|
||||||
addParticipantsMessage(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Whenever the server emits 'new message', update the chat body
|
|
||||||
socket.on('new message', function (data) {
|
|
||||||
addChatMessage(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Whenever the server emits 'user joined', log it in the chat body
|
|
||||||
socket.on('user joined', function (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) {
|
|
||||||
log(data.username + ' left');
|
|
||||||
addParticipantsMessage(data);
|
|
||||||
removeChatTyping(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Whenever the server emits 'typing', show the typing message
|
|
||||||
socket.on('typing', function (data) {
|
|
||||||
addChatTyping(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Whenever the server emits 'stop typing', kill the typing message
|
|
||||||
socket.on('stop typing', function (data) {
|
|
||||||
removeChatTyping(data);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|||||||
@ -9,29 +9,4 @@ block content
|
|||||||
li= course.name
|
li= course.name
|
||||||
script(type="text/javascript") var username = '#{username}';
|
script(type="text/javascript") var username = '#{username}';
|
||||||
|
|
||||||
//ul.pages
|
// https://www.hipchat.com/invite/178107/cc2f6ea4dfac9e48b9a88b305adae48a
|
||||||
// li.chat.page
|
|
||||||
// div.chatArea
|
|
||||||
// ul.messages
|
|
||||||
// input.inputMessage(placeholder='Type here...')
|
|
||||||
// li.login.page
|
|
||||||
// div.form
|
|
||||||
// h3.title What's your nickname?
|
|
||||||
// input.usernameInput(type='text', maxlength='14')
|
|
||||||
|
|
||||||
|
|
||||||
// for course in courses
|
|
||||||
// p #{course.name}
|
|
||||||
// .row
|
|
||||||
// .col-sm-6
|
|
||||||
// h3 Your Curriculum
|
|
||||||
// .col-sm-6
|
|
||||||
// .chat
|
|
||||||
// .chat-messages
|
|
||||||
// .chat-input.row
|
|
||||||
// .col-sm-3
|
|
||||||
// input.usernameInput(placeholder='Nickanem', type='text', maxlength='14')
|
|
||||||
// .col-sm-9
|
|
||||||
// input.inputMessage(placeholder='Type here...')
|
|
||||||
//
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user