slawk0/web-chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added contact status

Browse Source
This commit is contained in:
slawk0
2024-09-16 22:38:17 +02:00
parent d7e3acbacc
commit d22e6e6fc6
4 changed files with 87 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
backend/socket.js
View File

@@ -102,17 +102,17 @@ function initializeSocket(server) {
// Contacts socket // Contacts socket
socket.on('contacts', async (contactUsername) => { socket.on('contacts', async (contactUsername) => {
const username = socket.user.username; const username = socket.user.username;
const status = 'unread';
// Update contact list in db // Update contact list in db
try { try {
const query = ` const query = `
INSERT INTO contacts (username, contact) INSERT INTO contacts (username, contact, status)
SELECT $1, $2 SELECT $1, $2, $3
WHERE NOT EXISTS ( WHERE NOT EXISTS (
SELECT 1 FROM contacts WHERE username = $1 AND contact = $2 SELECT 1 FROM contacts WHERE username = $1 AND contact = $2
) )
`; `;
await db.query(query, [username, contactUsername]); await db.query(query, [username, contactUsername, status]);
} catch (err) { } catch (err) {
console.error('Failed to update contacts ', err) console.error('Failed to update contacts ', err)
socket.emit('socket error', 'Failed to update contacts (server error)') socket.emit('socket error', 'Failed to update contacts (server error)')
@@ -120,10 +120,10 @@ function initializeSocket(server) {
// Get contact list from db // Get contact list from db
try { try {
const query = (` const query = (`
SELECT contact, username SELECT contact, username, status
FROM contacts FROM contacts
WHERE username = $1 WHERE username = $1
`); `);
const result = await db.query(query, [username]); const result = await db.query(query, [username]);
io.to(username).emit('contacts', result.rows); io.to(username).emit('contacts', result.rows);
@@ -137,7 +137,7 @@ function initializeSocket(server) {
const username = socket.user.username; const username = socket.user.username;
try { try {
const query = (` const query = (`
SELECT contact, username SELECT contact, username, status
FROM contacts FROM contacts
WHERE username = $1 WHERE username = $1
`); `);
@@ -152,14 +152,40 @@ function initializeSocket(server) {
socket.on('delete contact', async (contactUsername) => { socket.on('delete contact', async (contactUsername) => {
const username = socket.user.username; const username = socket.user.username;
try { try {
const query = (' DELETE FROM contacts WHERE (username = $1 AND contact = $2)'); const query = ('DELETE FROM contacts WHERE (username = $1 AND contact = $2)');
await db.query(query, [username, contactUsername]); await db.query(query, [username, contactUsername]);
socket.emit('delete contacts', 'ok');
} catch(err) { } catch(err) {
console.error('Failed to remove contact from db'); console.error('Failed to remove contact from db');
io.to(username).emit('socket error', 'Failed to remove contact (server error)'); io.to(username).emit('socket error', 'Failed to remove contact (server error)');
} }
}) })
socket.on('status', async (username) => {
const userUsername = socket.user.username;
const status = 'unread';
try {
const query = (
'UPDATE contacts SET status = $1 WHERE username = $2 AND contact = $3'
);
await db.query(query, [status, userUsername, username]);
io.to(userUsername).emit('status', username);
} catch(err) {
console.error('Failed to update unread status:', err);
}
})
socket.on('read', async(contactUsername) => {
const userUsername = socket.user.username;
const status = 'read';
try {
const query = ('UPDATE contacts SET status = $1 WHERE username = $2 AND contact = $3');
await db.query(query, [status, userUsername, contactUsername]);
io.to(userUsername).emit('status', contactUsername);
} catch(err) {
console.error('Failed to update unread status:', err)
}
})
// disconnect event // disconnect event
socket.on('disconnect', () => { socket.on('disconnect', () => {
return "Disconnected"; return "Disconnected";

53
frontend/js/chat.js
View File

@@ -74,6 +74,13 @@ async function initializeSocket() {
console.log('Received message:', msg); console.log('Received message:', msg);
const { username, content, recipient } = msg; const { username, content, recipient } = msg;
// if(username !== currentRecipient && username !== currentUsername) {
// socket.emit('status', username);
// console.log('new message from ', username);
// const unreadIndicator = document.querySelector('.unread-indicator');
// unreadIndicator.style.display = 'inline';
// }
// username is sender username!!! // username is sender username!!!
// Display messages // Display messages
@@ -87,13 +94,22 @@ async function initializeSocket() {
// Add and display contact // Add and display contact
if (recipient !== currentRecipient && username !== currentUsername) { if (recipient !== currentRecipient && username !== currentUsername) {
// Check if the contact has already been added // Check if the contact has already been added
socket.emit('status', username);
console.log('new message from ', username);
// const unreadIndicator = document.querySelector('.unread-indicator');
// unreadIndicator.style.display = 'inline';
const contactItem = Array.from(contacts.children).find(
item => item.querySelector('.contact-username').textContent === username
);
if (contactItem) {
const unreadIndicator = contactItem.querySelector('.unread-indicator');
unreadIndicator.style.display = 'inline';
unreadIndicator.textContent = '•'; // or any other indicator you prefer
}
if (!addedContacts.has(username)) { if (!addedContacts.has(username)) {
try{ socket.emit('contacts', username);
socket.emit('contacts', username); console.log('added contact')
} catch (err) {
messageBox.innerHTML = 'Failed to fetch contact api';
console.log('Failed to add contact', err);
}
// Add the username to the Set of contacts // Add the username to the Set of contacts
addedContacts.add(username); addedContacts.add(username);
} }
@@ -104,12 +120,12 @@ async function initializeSocket() {
socket.on('contacts', (contacts) => { socket.on('contacts', (contacts) => {
console.log('Received contacts: ', contacts); console.log('Received contacts: ', contacts);
// Clear contact to avoid duplicates because backend send all user contacts and add to existing so it just clear previous and display data from db // Clear contact to avoid duplicates because backend send all user contacts and add to existing so it just clear previous and display data from db
document.getElementById('contacts').innerHTML = ""; document.getElementById('contacts').innerHTML = "";
for(const contact of contacts) { for(const contact of contacts) {
addContact(contact.contact, socket) addContact(contact.contact, contact.status, socket)
} }
}) })
// If not previous messages found on backend // If not previous messages found on backend
socket.on('no messages', () => { socket.on('no messages', () => {
console.log('No previous messages found'); console.log('No previous messages found');
@@ -130,7 +146,7 @@ async function initializeSocket() {
localStorage.setItem('currentRecipient', currentRecipient); localStorage.setItem('currentRecipient', currentRecipient);
messages.innerHTML = ''; messages.innerHTML = '';
console.log('Requesting messages for recipient:', currentRecipient); console.log('Requesting messages for recipient:', currentRecipient);
socket.emit('contacts', currentRecipient);
// Request previous messages after form submit // Request previous messages after form submit
socket.emit('get messages', currentRecipient); socket.emit('get messages', currentRecipient);
} }
@@ -160,9 +176,10 @@ async function initializeSocket() {
}); });
// Create contact li and create remove contact button // Create contact li and create remove contact button
function addContact(contactUsername, socket) { function addContact(contactUsername, status, socket) {
const contact = document.createElement('li'); const contact = document.createElement('li');
contact.className = 'contact-item'; contact.className = 'contact-item';
const usernameSpan = document.createElement('span'); const usernameSpan = document.createElement('span');
usernameSpan.textContent = contactUsername; usernameSpan.textContent = contactUsername;
usernameSpan.className = 'contact-username'; usernameSpan.className = 'contact-username';
@@ -170,21 +187,37 @@ async function initializeSocket() {
const removeButton = document.createElement('button'); const removeButton = document.createElement('button');
removeButton.textContent = 'X'; removeButton.textContent = 'X';
removeButton.className = 'remove-contact'; removeButton.className = 'remove-contact';
const unreadIndicator = document.createElement('span');
unreadIndicator.className = 'unread-indicator';
if(status === "unread") {
unreadIndicator.style.display = 'inline';
} else {
unreadIndicator.style.display = 'none';
}
unreadIndicator.textContent = '•';
removeButton.addEventListener('click', (e) => { removeButton.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
socket.emit('delete contact', contactUsername); socket.emit('delete contact', contactUsername);
socket.emit('read', contactUsername);
contacts.removeChild(contact); contacts.removeChild(contact);
addedContacts.delete(contactUsername); addedContacts.delete(contactUsername);
}); });
contact.appendChild(usernameSpan); contact.appendChild(usernameSpan);
contact.appendChild(removeButton); contact.appendChild(removeButton);
contact.appendChild(unreadIndicator);
contact.addEventListener('click', () => { contact.addEventListener('click', () => {
currentRecipient = contactUsername; currentRecipient = contactUsername;
recipientInput.value = contactUsername; recipientInput.value = contactUsername;
localStorage.setItem('currentRecipient', currentRecipient); localStorage.setItem('currentRecipient', currentRecipient);
socket.emit('get messages', contactUsername); socket.emit('get messages', contactUsername);
socket.emit('read', contactUsername);
unreadIndicator.style.display = 'none';
input.focus();
}); });
contacts.appendChild(contact); contacts.appendChild(contact);

2
frontend/routes/chat.html
View File

@@ -20,7 +20,7 @@
<div class="chat-area"> <div class="chat-area">
<form id="recipientForm"> <form id="recipientForm">
<input id="recipient" autocomplete="off" placeholder="Enter contact"/> <input id="recipient" autocomplete="off" placeholder="Enter contact"/>
<button type="submit">Set recipient</button> <button type="submit">Set contact</button>
</form> </form>
<ul id="messages"></ul> <ul id="messages"></ul>

7
frontend/stylesheet/chat.css
View File

@@ -146,4 +146,11 @@ button:hover {
#messageBox { #messageBox {
color: red; color: red;
margin: 0 10px; margin: 0 10px;
}
.unread {
height: 5px;
width: 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
} }