retrieving messages from private messaging

backend/socket.js

@@ -89,7 +89,26 @@ function initializeSocket(server) {
                 }
             }
         });
+        socket.on('get messages', async (recipient) => {
+            const username = socket.user.username;
+            try {
+                const query = `
+            SELECT id, content, username, recipient 
+            FROM messages 
+            WHERE (username = $1 AND recipient = $2) OR (username = $2 AND recipient = $1) 
+            ORDER BY id ASC
+        `;
+                const result = await db.query(query, [username, recipient]);
 
+                const formattedMessages = result.rows.map(row =>
+                    `${row.username} to ${row.recipient}: ${row.content}`
+                );
+
+                socket.emit('messages history', formattedMessages);
+            } catch (e) {
+                console.error('Error retrieving messages:', e);
+            }
+        });
         // disconnect event
         socket.on('disconnect', () => {
             console.log(username + ' has disconnected');

frontend/js/chat.js

@@ -1,18 +1,17 @@
 const form = document.getElementById('form');
 const input = document.getElementById('input');
-const recipientInput = document.createElement('input'); // New input for recipient
+const recipientForm = document.getElementById('recipientForm');
+const recipientInput = document.getElementById('recipient');
 const messages = document.getElementById('messages');
-document.getElementById('logout').onclick = logout;
+const logoutButton = document.getElementById('logout');
+
+let currentRecipient = null;
 
 window.onload = function() {
     document.getElementById('input').focus();
 }
 
-
-recipientInput.type = 'text';
-recipientInput.id = 'recipient';
-recipientInput.placeholder = 'Recipient username';
-form.insertBefore(recipientInput, input);
+logoutButton.onclick = logout;
 
 function logout() {
     cookieStore.delete('token');
@@ -52,23 +51,47 @@ async function initializeSocket() {
     });
 
     socket.on('chat message', (msg, serverOffset) => {
-        const item = document.createElement('li');
-        item.textContent = msg;
-        messages.appendChild(item);
-        window.scrollTo(0, document.body.scrollHeight);
+        console.log('Received message:', msg);
+        const [sender, recipient, content] = msg.split(': ');
+        console.log('Current recipient:', currentRecipient);
+        if (recipient === currentRecipient || sender === currentRecipient) {
+            const item = document.createElement('li');
+            item.textContent = msg;
+            messages.appendChild(item);
+            window.scrollTo(0, document.body.scrollHeight);
+        }
         socket.auth.serverOffset = serverOffset;
     });
 
     form.addEventListener('submit', (e) => {
         e.preventDefault();
-        if (input.value && recipientInput.value) {
-            socket.emit('chat message', {
-                content: input.value,
-                recipient: recipientInput.value
-            });
+        if (input.value && currentRecipient) {
+            console.log('Sending message:', input.value, 'to', currentRecipient);
+            socket.emit('chat message', { content: input.value, recipient: currentRecipient});
             input.value = '';
         }
     });
+
+    recipientForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        if (recipientInput.value) {
+            currentRecipient = recipientInput.value;
+            messages.innerHTML = ''; // Clear previous messages
+            console.log('Requesting messages for recipient:', currentRecipient);
+            socket.emit('get messages', currentRecipient);
+        }
+    });
+
+    socket.on('messages history', (messagesHistory) => {
+        console.log('Received messages history:', messagesHistory);
+        messages.innerHTML = ''; // Clear previous messages
+        messagesHistory.forEach((msg) => {
+            const item = document.createElement('li');
+            item.textContent = msg;
+            messages.appendChild(item);
+        });
+        window.scrollTo(0, document.body.scrollHeight);
+    });
 }
 
 initializeSocket();

frontend/routes/chat.html

@@ -6,22 +6,27 @@
     <style>
         body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
 
-        #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
+        #form, #recipientForm { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
+        #form { position: fixed; bottom: 0; left: 0; right: 0; }
+        #recipientForm { position: fixed; top: 0; left: 0; right: 0; }
         #input, #recipient { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
         #input:focus, #recipient:focus { outline: none; }
-        #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
+        #form > button, #recipientForm > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
 
-        #messages { list-style-type: none; margin: 0; padding: 0; }
+        #messages { list-style-type: none; margin: 3rem 0; padding: 0; }
         #messages > li { padding: 0.5rem 1rem; }
         #messages > li:nth-child(odd) { background: #efefef; }
     </style>
 </head>
 <body>
+<form id="recipientForm">
+    <input id="recipient" autocomplete="off" placeholder="Enter recipient"/>
+    <button type="submit">Set recipient</button>
+</form>
 
 <ul id="messages"></ul>
 
 <form id="form" action="">
-    <input id="recipient" autocomplete="off" placeholder="Recipient username"/>
     <input id="input" autocomplete="off" placeholder="Enter message"/>
     <button type="submit">Send</button>
     <button id="logout" type="button">Logout</button>
@@ -29,6 +34,5 @@
 
 <script src="/socket.io/socket.io.js"></script>
 <script src="/static/js/chat.js"></script>
-
 </body>
 </html>