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

adding contacts list

Browse Source
This commit is contained in:
slawk0
2024-09-10 21:27:45 +02:00
parent dc9aacc407
commit 9b6ccf7384
3 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/js/chat.js
View File

@@ -4,6 +4,8 @@ const recipientForm = document.getElementById('recipientForm');
const recipientInput = document.getElementById('recipient'); const recipientInput = document.getElementById('recipient');
const messages = document.getElementById('messages'); const messages = document.getElementById('messages');
const messageBox = document.getElementById('messageBox'); const messageBox = document.getElementById('messageBox');
const contacts = document.getElementById('contacts');
let currentRecipient = null; let currentRecipient = null;
window.onload = () => { window.onload = () => {
@@ -62,14 +64,27 @@ async function initializeSocket() {
document.getElementById('input').placeholder = `Send message as: ${username}`; document.getElementById('input').placeholder = `Send message as: ${username}`;
}) })
// Main socket connection, it is displaying all messages in real time
socket.on('chat message', (msg) => { socket.on('chat message', (msg) => {
console.log('Received message:', msg); console.log('Received message:', msg);
const { username, content, recipient } = msg; const { username, content, recipient } = msg;
const item = document.createElement('li');
item.textContent = `${username}: ${content}`; // username is sender username!
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight); // Add and display contact/incoming messages whatever
if(recipient !== currentRecipient && username !== currentUsername) {
const contact = document.createElement('li');
contact.textContent = username;
contacts.appendChild(contact);
console.log('created contact')
}
// Display messages
if (recipient === currentRecipient || username === currentRecipient) {
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 // If not previous messages found on backend
@@ -83,6 +98,8 @@ async function initializeSocket() {
console.log('There was an error: ', msg) console.log('There was an error: ', msg)
messageBox.innerHTML = msg; messageBox.innerHTML = msg;
}) })
// Recipient form, it request previous messages after submitting
recipientForm.addEventListener('submit', (e) => { recipientForm.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
if (recipientInput.value) { if (recipientInput.value) {
@@ -90,10 +107,13 @@ 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);
// Request previous messages after form submit
socket.emit('get messages', currentRecipient); socket.emit('get messages', currentRecipient);
} }
}); });
// Form for sending messages
form.addEventListener('submit', (e) => { form.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
if (input.value && currentRecipient) { if (input.value && currentRecipient) {
@@ -102,6 +122,8 @@ async function initializeSocket() {
input.value = ''; input.value = '';
} }
}); });
// Socket connection for getting previous messages
socket.on('messages history', (messagesHistory) => { socket.on('messages history', (messagesHistory) => {
console.log('Received messages history:', messagesHistory); console.log('Received messages history:', messagesHistory);
messages.innerHTML = ''; // Clear previous messages messages.innerHTML = ''; // Clear previous messages

5
frontend/routes/chat.html
View File

@@ -9,9 +9,8 @@
<link rel="stylesheet" href="/static/stylesheet/chat.css"> <link rel="stylesheet" href="/static/stylesheet/chat.css">
</head> </head>
<body> <body>
<div>
<ul id="contacts"></ul> <ul id="contacts"></ul>
</div>
<form id="recipientForm"> <form id="recipientForm">
<input id="recipient" autocomplete="off" placeholder="Enter recipient"/> <input id="recipient" autocomplete="off" placeholder="Enter recipient"/>

4
frontend/stylesheet/chat.css
View File

@@ -131,4 +131,8 @@ p {
#messageBox { #messageBox {
color: red; color: red;
}
#contacts > li {
color: white;
} }