2020-08-19 19:40:00 -04:00
|
|
|
$(function () {
|
|
|
|
$(document).ready(function () {
|
2020-07-04 09:55:38 -04:00
|
|
|
$('.chat-container').removeClass('no-js');
|
2020-11-10 09:27:51 -05:00
|
|
|
var socket = io.connect(
|
|
|
|
'http://' + document.domain + ':' + location.port + '/chat',
|
|
|
|
{
|
|
|
|
transports: ['websocket']
|
|
|
|
}
|
|
|
|
);
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
|
|
|
|
// Store current username received from app context
|
2020-03-12 05:24:48 -04:00
|
|
|
var current_username = $('#username').val();
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
|
|
|
|
// On browser connect, emit a socket event to be added to
|
|
|
|
// room and assigned random username
|
2020-08-19 19:40:00 -04:00
|
|
|
socket.on('connect', function () {
|
2020-03-08 05:21:43 -04:00
|
|
|
socket.emit('joined', {});
|
|
|
|
});
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
|
|
|
|
// Triggered on any status change by any user, such as some
|
|
|
|
// user joined, or changed username, or left, etc.
|
2020-08-19 19:40:00 -04:00
|
|
|
socket.on('status', function (data) {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
addMessageToRoom(data, current_username, 'status');
|
2020-08-19 19:40:00 -04:00
|
|
|
console.log(data, current_username);
|
2020-03-08 05:21:43 -04:00
|
|
|
});
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
|
|
|
|
// Triggered when message is received from a user. Even when sent
|
|
|
|
// by self, it get triggered after the server sends back the emit.
|
2020-08-19 19:40:00 -04:00
|
|
|
socket.on('message', function (data) {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
addMessageToRoom(data, current_username, 'chat');
|
2020-08-19 19:40:00 -04:00
|
|
|
console.log(data, current_username);
|
2020-03-08 05:21:43 -04:00
|
|
|
});
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
|
2020-06-07 06:26:05 -04:00
|
|
|
// Triggered when disconnected either by server stop or timeout
|
2020-08-19 19:40:00 -04:00
|
|
|
socket.on('disconnect', function (data) {
|
|
|
|
addMessageToRoom({ 'msg': 'The chat server is disconnected.' }, current_username, 'status');
|
2020-06-07 06:26:05 -04:00
|
|
|
})
|
2020-08-19 19:40:00 -04:00
|
|
|
socket.on('connect_error', function (error) {
|
2020-06-07 06:26:05 -04:00
|
|
|
console.log("error");
|
|
|
|
})
|
|
|
|
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
// Trigger new message on enter or click of send message button.
|
2020-08-19 19:40:00 -04:00
|
|
|
$('#new-message').on('keypress', function (e) {
|
2020-03-08 05:21:43 -04:00
|
|
|
var code = e.keyCode || e.which;
|
|
|
|
if (code == 13) {
|
|
|
|
emitMessage(socket);
|
|
|
|
}
|
|
|
|
});
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
|
2020-05-09 16:25:31 -04:00
|
|
|
// Keep buttons disabled unless changed or not empty
|
2020-08-19 19:40:00 -04:00
|
|
|
$('#username').on('keyup', function (event) {
|
2020-05-09 16:25:31 -04:00
|
|
|
if ($('#username').val() !== '' && $('#username').val() !== current_username) {
|
2020-05-11 03:21:46 -04:00
|
|
|
if (event.keyCode == 13) {
|
2020-08-21 08:16:21 -04:00
|
|
|
current_username = updateUsername(socket) || current_username;
|
2020-05-11 03:21:46 -04:00
|
|
|
}
|
2020-05-09 16:25:31 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
// Show warning of losing data
|
|
|
|
$(window).on('beforeunload', function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
e.returnValue = '';
|
|
|
|
return '';
|
|
|
|
});
|
2020-03-08 05:21:43 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var addMessageToRoom = function (data, current_username, messageType) {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
var scrollDiff = getScrollDiffBefore();
|
|
|
|
if (messageType === 'status') {
|
|
|
|
addStatusMessage(data.msg);
|
|
|
|
if (data.connected_users) {
|
|
|
|
addUserList(data.connected_users, current_username);
|
|
|
|
}
|
|
|
|
} else if (messageType === 'chat') {
|
2020-08-19 19:40:00 -04:00
|
|
|
addChatMessage(data.username, data.msg)
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
}
|
|
|
|
scrollBottomMaybe(scrollDiff);
|
|
|
|
}
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var emitMessage = function (socket) {
|
2020-03-12 05:24:48 -04:00
|
|
|
var text = $('#new-message').val();
|
2020-03-08 05:21:43 -04:00
|
|
|
$('#new-message').val('');
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
$('#chat').scrollTop($('#chat')[0].scrollHeight);
|
2020-08-19 19:40:00 -04:00
|
|
|
socket.emit('text', { msg: text });
|
2020-03-08 05:21:43 -04:00
|
|
|
}
|
2020-03-11 08:40:08 -04:00
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var updateUsername = function (socket) {
|
2020-05-11 03:21:46 -04:00
|
|
|
var username = $('#username').val();
|
2020-08-21 08:16:21 -04:00
|
|
|
if (!checkUsernameExists(username)) {
|
|
|
|
socket.emit('update_username', { username: username });
|
|
|
|
$.ajax({
|
|
|
|
method: 'POST',
|
|
|
|
url: `http://${document.domain}:${location.port}/update-session-username`,
|
|
|
|
contentType: 'application/json',
|
|
|
|
dataType: 'json',
|
|
|
|
data: JSON.stringify({ 'username': username })
|
|
|
|
}).done(function (response) {
|
|
|
|
console.log(response);
|
|
|
|
});
|
|
|
|
return username;
|
|
|
|
}
|
|
|
|
return false;
|
2020-05-11 03:21:46 -04:00
|
|
|
}
|
|
|
|
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
/************************************/
|
|
|
|
/********* Util Functions ***********/
|
|
|
|
/************************************/
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var createUserListHTML = function (connected_users, current_user) {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
var userListHTML = '';
|
|
|
|
connected_users.sort();
|
2020-08-19 19:40:00 -04:00
|
|
|
connected_users.forEach(function (username) {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
if (username !== current_user) {
|
|
|
|
userListHTML += `<li>${sanitizeHTML(username)}</li>`;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return userListHTML;
|
|
|
|
}
|
|
|
|
|
2020-08-21 08:16:21 -04:00
|
|
|
var checkUsernameExists = function (username) {
|
|
|
|
$('#username-error').text('');
|
|
|
|
var userMatches = $('#user-list li').filter(function () {
|
|
|
|
return $(this).text() === username;
|
|
|
|
});
|
|
|
|
if (userMatches.length) {
|
|
|
|
$('#username-error').text('User with that username exists!');
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var getScrollDiffBefore = function () {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
return $('#chat').scrollTop() - ($('#chat')[0].scrollHeight - $('#chat')[0].offsetHeight);
|
|
|
|
}
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var scrollBottomMaybe = function (scrollDiff) {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
// Scrolls to bottom if the user is scrolled at bottom
|
|
|
|
// if the user has scrolled upp, it wont scroll at bottom.
|
|
|
|
// Note: when a user themselves send a message, it will still
|
|
|
|
// scroll to the bottom even if they had scrolled up before.
|
|
|
|
if (scrollDiff > 0) {
|
|
|
|
$('#chat').scrollTop($('#chat')[0].scrollHeight);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var addStatusMessage = function (message) {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
$('#chat').append(
|
2020-08-19 20:22:15 -04:00
|
|
|
`<p class="status">${sanitizeHTML(message)}</p>`
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var addChatMessage = function (username, message) {
|
|
|
|
$('#chat').append(`<p><span class="username">${sanitizeHTML(username)}</span><span class="message">${sanitizeHTML(message)}</span></p>`);
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
}
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var addUserList = function (connected_users, current_username) {
|
Refactors logic for chat user list and scroll
- Refactors server side code to use instance variable instead of
background thread to generate a list of connected users
- Send this user list anytime any change is made to the list. It can
be: join, update username, disconnect
- In js, render the entire user list everytime it is received.
- Scroll to the bottom of the chat, everytime the current user
sends a message
- Else, if already at the bottom of the chat, scroll to the bottom
after appending incoming status or chat message. But if the user
is scrolled up in the chat window, then do not scroll to the bottom
- When refreshed or close tab is clicked, default browser warning is
shown.
- On receiving disconnect, the browser removes user from room.
- If refreshed, it is shown as if the user left and joined again.
2020-05-03 18:17:13 -04:00
|
|
|
$('#user-list').html(
|
|
|
|
createUserListHTML(
|
|
|
|
connected_users,
|
|
|
|
current_username
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-08-19 19:40:00 -04:00
|
|
|
var sanitizeHTML = function (str) {
|
|
|
|
var temp = document.createElement('span');
|
|
|
|
temp.textContent = str;
|
|
|
|
return temp.innerHTML;
|
2020-03-11 08:40:08 -04:00
|
|
|
};
|