fixed undefined username

backend/socket.js

@@ -62,17 +62,17 @@ function initializeSocket(server) {
 
                 if (result.rows.length > 0) {
                     const newMessage = result.rows[0];
-                    const formattedMessage = `${newMessage.username} to ${newMessage.recipient}: ${newMessage.content}`;
+                    const formattedMessage = `Username: ${newMessage.username}, recipient: ${newMessage.recipient}, message: ${newMessage.content}`;
                     console.log(formattedMessage);
 
                     // Emit message to the sender's and recipient's rooms
-                    io.to(username).to(recipient).emit('chat message', { sender: newMessage.sender, recipient: newMessage.recipient, content: newMessage.content });
+                    io.to(username).to(recipient).emit('chat message', { username: newMessage.username, recipient: newMessage.recipient, content: newMessage.content });
                 }
             } catch (err) {
                 console.error('Error fetching inserted message:', err);
             }
 
-            // The connection state recovery logic remains unchanged
+
             if (!socket.recovered) {
                 try {
                     const query = 'SELECT id, content, username, recipient FROM messages WHERE id > $1 ORDER BY id ASC';

frontend/js/chat.js

@@ -8,7 +8,7 @@ const logoutButton = document.getElementById('logout');
 let currentRecipient = null;
 
 window.onload = function() {
-    document.getElementById('input').focus();
+    document.getElementById('recipient').focus();
 }
 
 logoutButton.onclick = logout;
@@ -50,26 +50,19 @@ async function initializeSocket() {
         console.log('Connected to server');
     });
 
-    socket.on('chat message', (msg, serverOffset) => {
+    socket.on('chat message', (msg) => {
         console.log('Received message:', msg);
-        console.log(
-            'Sender:', sender,
-            'Content:', content,
-            'Recipient:', recipient
-        )
 
-        const [sender, content, recipient] = msg;
-        console.log('Current recipient:', currentRecipient + ' Recipient:', recipient + ' Sender:', sender);
-        if (recipient === currentRecipient){
+        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 = content;
+            item.textContent = `${username}: ${content}`;
             messages.appendChild(item);
             window.scrollTo(0, document.body.scrollHeight);
         }
-        socket.auth.serverOffset = serverOffset;
     });
-
-
     recipientForm.addEventListener('submit', (e) => {
         e.preventDefault();
         if (recipientInput.value) {
@@ -84,22 +77,16 @@ async function initializeSocket() {
         e.preventDefault();
         if (input.value && currentRecipient) {
             console.log('Sending message:', input.value, 'to', currentRecipient);
-            socket.emit('chat message', { content: input.value, recipient: currentRecipient});
+            socket.emit('chat message', { content: input.value, recipient: currentRecipient });
             input.value = '';
         }
     });
-
     socket.on('messages history', (messagesHistory) => {
         console.log('Received messages history:', messagesHistory);
         messages.innerHTML = ''; // Clear previous messages
         for (const message of messagesHistory) {
             const item = document.createElement('li');
             item.textContent = `${message.username}: ${message.content}`;
-            if (message.username !== 'admin') {
-                item.classList.add('user-message');
-            } else {
-                item.classList.add('admin-message');
-            }
             messages.appendChild(item);
         }
         window.scrollTo(0, document.body.scrollHeight);