Adds list of active users in the chat and allows username change

- allows users to update their username and save the new username
- runs a background thread for every user session which emits a
broadcast with the username so every user can build their list of
active users in the frontend via the socket information
- on updating username, stop the old thread and start a new thread
with the new username being emitted. The username is updated in
everyone's list along with a status message for the same.
This commit is contained in:
Saptak S 2020-03-12 14:54:48 +05:30
parent 7eaefd5299
commit c63a7605ee
No known key found for this signature in database
GPG key ID: 2D9B32E54C68A3FB
4 changed files with 122 additions and 12 deletions

View file

@ -1,12 +1,39 @@
$(function(){
var socket;
var last_username;
var username_list = [];
$(document).ready(function(){
socket = io.connect('http://' + document.domain + ':' + location.port + '/chat');
var current_username = $('#username').val();
socket.on('connect', function() {
socket.emit('joined', {});
});
socket.on('status', function(data) {
$('#chat').append('<p><small><i>' + sanitizeHTML(data.msg) + '</i></small></p>');
if (data.user && current_username !== data.user) {
$('#user-list').append('<li>' + sanitizeHTML(data.user) + '</li>')
username_list.push(data.user);
}
if (data.new_name && current_username !== data.new_name) {
last_username = current_username;
current_username = data.new_name;
username_list[username_list.indexOf(last_username)] = current_username;
$('#user-list li').each(function(key, value) {
if ($(value).text() === data.old_name) {
$(value).html(sanitizeHTML(current_username));
}
})
}
$('#chat').scrollTop($('#chat')[0].scrollHeight);
});
socket.on('update_list', function(data) {
if (username_list.indexOf(data.name) === -1 &&
current_username !== data.name &&
last_username !== data.name
) {
username_list.push(data.name);
$('#user-list').append('<li>' + sanitizeHTML(data.name) + '</li>')
}
$('#chat').scrollTop($('#chat')[0].scrollHeight);
});
socket.on('message', function(data) {
@ -20,11 +47,15 @@ $(function(){
}
});
$('#send-button').on('click', emitMessage);
$('#update-username').on('click', function() {
var username = $('#username').val();
socket.emit('update_username', {username: username});
});
});
});
var emitMessage = function(socket) {
text = $('#new-message').val();
var text = $('#new-message').val();
$('#new-message').val('');
socket.emit('text', {msg: text});
}