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

dark mode, messages are not duplicating, display sender username

Browse Source
This commit is contained in:
slawk0
2024-08-26 00:00:20 +02:00
parent 12ad8a5b99
commit c5125c8faf
4 changed files with 69 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
backend/socket.js
View File

@@ -51,6 +51,11 @@ function initializeSocket(server) {
});
io.on('connection', (socket) => {
createTables()
.catch((err) => {
console.error('Error creating tables:', err);
});
if (!socket.user) {
console.log('User not authenticated');
socket.disconnect();
@@ -62,7 +67,6 @@ function initializeSocket(server) {
// Join a room with the user's username
socket.join(username);
//loadInitialMessages(socket);
// chat message event
socket.on('chat message', async (msgData) => {
@@ -94,23 +98,23 @@ function initializeSocket(server) {
console.error('Error fetching inserted message:', err);
}
if (!socket.recovered) {
try {
const query = 'SELECT id, content, username, recipient FROM messages WHERE id > $1 ORDER BY id ASC';
const values = [socket.handshake.auth.serverOffset || 0];
const result = await db.query(query, values);
//const newMessage = result.rows[0];
for (const row of result.rows) {
if (row.username === username || row.recipient === username) {
io.to(username).to(recipient).emit('chat message', { username: row.username, recipient: row.recipient, content: row.content });
}
}
} catch (e) {
console.error('Error retrieving messages:', e);
}
}
// i think this is not needed? (it cause duplicate messages with loading messages history)
// if (!socket.recovered) {
// try {
// const query = 'SELECT id, content, username, recipient FROM messages WHERE id > $1 ORDER BY id ASC';
// const values = [socket.handshake.auth.serverOffset || 0];
// const result = await db.query(query, values);
// //const newMessage = result.rows[0];
// for (const row of result.rows) {
// if (row.username === username || row.recipient === username) {
// io.to(username).to(recipient).emit('chat message', { username: row.username, recipient: row.recipient, content: row.content });
//
// }
// }
// } catch (e) {
// console.error('Error retrieving messages:', e);
// }
// }
});
socket.on('get messages', async (recipient) => {
const username = socket.user.username;
@@ -127,6 +131,8 @@ function initializeSocket(server) {
//const { username: sender, recipient: receiver, content: content, id: id } = result.rows;
console.log('Sending messages:', result.rows);
socket.emit('messages history', result.rows);
} else {
io.emit('no messages', );
}
} catch (e) {
console.error('Error retrieving messages:', e);
@@ -142,23 +148,4 @@ function initializeSocket(server) {
return io;
}
async function loadInitialMessages(socket) {
const username = socket.user.username;
try {
const query = 'SELECT id, content, username, recipient FROM messages WHERE username = $1 OR recipient = $1 ORDER BY id DESC LIMIT 50';
const result = await db.query(query, [username]);
for (const row of result.rows.reverse()) {
socket.emit('chat message',row.username, row.recipient, row.content);
}
// Set the server offset to the latest message id
if (result.rows.length > 0) {
socket.handshake.auth.serverOffset = result.rows[result.rows.length - 1].id;
}
} catch (e) {
console.error('Error retrieving initial messages:', e);
}
}
module.exports = { initializeSocket };

8
frontend/js/chat.js
View File

@@ -4,13 +4,14 @@ const recipientForm = document.getElementById('recipientForm');
const recipientInput = document.getElementById('recipient');
const messages = document.getElementById('messages');
const logoutButton = document.getElementById('logout');
document.getElementById('input').placeholder = `Send message as: ${localStorage.getItem('username')}`;
let currentRecipient = null;
window.onload = () => {
document.getElementById('recipient').focus();
}
logoutButton.onclick = logout;
function logout() {
fetch('/auth/logout', {
@@ -19,6 +20,7 @@ function logout() {
})
.then(response => {
if (response.ok) {
localStorage.clear();
window.location.href = '/login';
}
})
@@ -82,6 +84,10 @@ async function initializeSocket() {
window.scrollTo(0, document.body.scrollHeight);
}
});
socket.on('no messages', () => {
console.log('No previous messages found');
messages.innerHTML = '<p>No messages found</p>';
});
recipientForm.addEventListener('submit', (e) => {
e.preventDefault();
if (recipientInput.value) {

4
frontend/js/login.js
View File

@@ -13,3 +13,7 @@ function showPasswd() {
}
}
document.querySelector('form').addEventListener('submit', () => {
const username = document.getElementById('username').value;
localStorage.setItem('username', username);
})

51
frontend/stylesheet/chat.css
View File

@@ -1,24 +1,27 @@
/* CSS BY chatGPT ( */
body, html, form, button, input {
font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
}
#input::placeholder, #recipient::placeholder {
font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
color: #999;
}
body {
margin: 0;
padding-bottom: 3rem;
background-color: #f9f9f9;
color: #333;
background-color: #121212;
color: #e0e0e0;
}
#form, #recipientForm {
background: rgba(255, 255, 255, 0.9);
background: rgba(30, 30, 30, 0.95);
padding: 0.5rem;
display: flex;
align-items: center;
box-sizing: border-box;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
z-index: 1000;
}
@@ -38,60 +41,64 @@ body {
}
#input, #recipient {
border: 1px solid #ddd;
border: 1px solid #555;
padding: 0.5rem 1rem;
flex-grow: 1;
border-radius: 20px;
margin-right: 0.5rem;
font-size: 1rem;
transition: border-color 0.3s ease;
background-color: #1f1f1f;
color: #e0e0e0;
}
#input:focus, #recipient:focus {
outline: none;
border-color: #007bff;
border-color: #1a73e8;
}
button {
font-family: "Lucida Console";
background-color: #349237;
color: white;
background-color: #2c7a2e;
color: #e0e0e0;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 0 10px; /* Add margin to separate buttons */
margin: 0 10px;
}
button:hover {
background-color: #45a049;
background-color: #368f39;
}
#form #recipientForm {
background: #007bff;
background: #1a73e8; /
border: none;
padding: 0.5rem 1rem;
margin: 0.25rem;
border-radius: 20px;
color: #fff;
color: #e0e0e0;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
#form #recipientForm {
background-color: #0056b3;
#form #recipientForm:hover {
background-color: #155bb5;
}
#logout {
background-color: #dc3545;
background-color: #d32f2f;
}
#logout:hover {
background-color: #c82333;
background-color: #b71c1c;
}
#messages {
font-weight: lighter;
list-style-type: none;
margin: 5rem 0 3rem 0;
padding: 0;
@@ -104,10 +111,18 @@ button:hover {
padding: 0.75rem 1.5rem;
margin: 0.5rem 0;
border-radius: 20px;
background: #e9ecef;
background: #1e1e1e;
max-width: 80%;
word-wrap: break-word;
}
#messages > li:nth-child(odd) {
background: #d4edda;
background: #2c7a2e;
}
p {
text-align: center;
font-size: 20px;
color: #e0e0e0;
}