onionshare/share/static/js/chat.js
Saptak S c63a7605ee
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.
2020-03-12 14:54:48 +05:30

68 lines
2.3 KiB
JavaScript

$(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) {
$('#chat').append('<p>' + sanitizeHTML(data.msg) + '</p>');
$('#chat').scrollTop($('#chat')[0].scrollHeight);
});
$('#new-message').on('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
emitMessage(socket);
}
});
$('#send-button').on('click', emitMessage);
$('#update-username').on('click', function() {
var username = $('#username').val();
socket.emit('update_username', {username: username});
});
});
});
var emitMessage = function(socket) {
var text = $('#new-message').val();
$('#new-message').val('');
socket.emit('text', {msg: text});
}
var sanitizeHTML = function(str) {
var temp = document.createElement('span');
temp.textContent = str;
return temp.innerHTML;
};