diff --git a/backend/socket.js b/backend/socket.js index 4170bee..aa0d236 100644 --- a/backend/socket.js +++ b/backend/socket.js @@ -31,19 +31,17 @@ function initializeSocket(server) { // open main socket connection io.on('connection', (socket) => { - if (!socket.user) { - console.log(socket.user); - console.log('User not authenticated'); socket.emit('socket error', 'User not authenticated') socket.disconnect(); return; } const username = socket.user.username; - // Join a room with the user's username socket.join(username); + io.to(username).emit('username', username); + // chat message event socket.on('chat message', async (msgData) => { const { content, recipient } = msgData; @@ -74,6 +72,7 @@ function initializeSocket(server) { console.error('Error fetching inserted message:', err); } }); + socket.on('get messages', async (recipient) => { const username = socket.user.username; try { @@ -88,11 +87,10 @@ function initializeSocket(server) { if (result.rows.length > 0) { //const { username: sender, recipient: receiver, content: content, id: id } = result.rows; - // useless option - //console.log('Sending historical messages'); - socket.emit('messages history', result.rows); + io.to(username).emit('messages history', result.rows); + } else { - io.emit('no messages'); + io.to(username).emit('no messages'); } } catch (e) { console.error('Error retrieving messages:', e); diff --git a/frontend/js/chat.js b/frontend/js/chat.js index b40abb4..45015bf 100644 --- a/frontend/js/chat.js +++ b/frontend/js/chat.js @@ -3,20 +3,22 @@ const input = document.getElementById('input'); const recipientForm = document.getElementById('recipientForm'); const recipientInput = document.getElementById('recipient'); const messages = document.getElementById('messages'); -const error = document.getElementById('error'); -document.getElementById('input').placeholder = `Send message as: ${localStorage.getItem('username')}`; +const messageBox = document.getElementById('messageBox'); let currentRecipient = null; window.onload = () => { - document.getElementById('recipient').focus(); + initializeRecipient(); + if(!recipientInput.value){ + recipientInput.focus(); + } } -1 function initializeRecipient() { const savedRecipient = localStorage.getItem('currentRecipient'); if (savedRecipient) { currentRecipient = savedRecipient; recipientInput.value = savedRecipient; + input.focus(); return currentRecipient; } } @@ -54,28 +56,32 @@ async function initializeSocket() { const initialRecipient = initializeRecipient(); socket.emit('get messages', initialRecipient); }); + let currentUsername = null; + socket.on('username', (username) => { + currentUsername = username; + document.getElementById('input').placeholder = `Send message as: ${username}`; + }) socket.on('chat message', (msg) => { console.log('Received message:', msg); const { username, content, recipient } = msg; - console.log('Current recipient:', currentRecipient, 'Sender:', username, 'Recipient:', recipient); - - if (recipient === currentRecipient || username === currentRecipient) { - const item = document.createElement('li'); - item.textContent = `${username}: ${content}`; - messages.appendChild(item); - window.scrollTo(0, document.body.scrollHeight); - } + const item = document.createElement('li'); + item.textContent = `${username}: ${content}`; + messages.appendChild(item); + window.scrollTo(0, document.body.scrollHeight); }); + + // If not previous messages found on backend socket.on('no messages', () => { console.log('No previous messages found'); messages.innerHTML = '
No messages found
'; }); + + // Error messages from backend socket.on('socket error', (msg) => { console.log('There was an error: ', msg) - error.innerHTML = msg; - messages.innerHTML = 'No messages found
'; + messageBox.innerHTML = msg; }) recipientForm.addEventListener('submit', (e) => { e.preventDefault(); diff --git a/frontend/js/login.js b/frontend/js/login.js index 42b6c58..1b2c491 100644 --- a/frontend/js/login.js +++ b/frontend/js/login.js @@ -13,11 +13,6 @@ function showPasswd() { } } -document.querySelector('form').addEventListener('submit', () => { - const username = document.getElementById('username').value; - localStorage.setItem('username', username); -}) - document.getElementById('loginForm').addEventListener('submit', async (e) => { e.preventDefault() const username = document.getElementById('username').value.trim(); diff --git a/frontend/routes/chat.html b/frontend/routes/chat.html index 01f82d8..12238f5 100644 --- a/frontend/routes/chat.html +++ b/frontend/routes/chat.html @@ -8,8 +8,11 @@