mirror of
https://github.com/onionshare/onionshare.git
synced 2025-08-01 10:56:22 -04:00
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:
parent
7eaefd5299
commit
c63a7605ee
4 changed files with 122 additions and 12 deletions
|
@ -130,9 +130,34 @@ table.file-list td:last-child {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.chat-users {
|
||||
width: 20%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
overflow: auto;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.chat-users .editable-username {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.chat-users input#username {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.chat-users #user-list li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.chat-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin: 0 1rem;
|
||||
height: calc(100vh - (45px + 2em));
|
||||
}
|
||||
|
@ -150,6 +175,10 @@ table.file-list td:last-child {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.chat-wrapper input#new-message {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload-wrapper {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -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});
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue