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) => { io.on('connection', (socket) => {
createTables()
.catch((err) => {
console.error('Error creating tables:', err);
});
if (!socket.user) { if (!socket.user) {
console.log('User not authenticated'); console.log('User not authenticated');
socket.disconnect(); socket.disconnect();
@@ -62,7 +67,6 @@ function initializeSocket(server) {
// Join a room with the user's username // Join a room with the user's username
socket.join(username); socket.join(username);
//loadInitialMessages(socket);
// chat message event // chat message event
socket.on('chat message', async (msgData) => { socket.on('chat message', async (msgData) => {
@@ -94,23 +98,23 @@ function initializeSocket(server) {
console.error('Error fetching inserted message:', err); console.error('Error fetching inserted message:', err);
} }
// i think this is not needed? (it cause duplicate messages with loading messages history)
if (!socket.recovered) { // if (!socket.recovered) {
try { // try {
const query = 'SELECT id, content, username, recipient FROM messages WHERE id > $1 ORDER BY id ASC'; // const query = 'SELECT id, content, username, recipient FROM messages WHERE id > $1 ORDER BY id ASC';
const values = [socket.handshake.auth.serverOffset || 0]; // const values = [socket.handshake.auth.serverOffset || 0];
const result = await db.query(query, values); // const result = await db.query(query, values);
//const newMessage = result.rows[0]; // //const newMessage = result.rows[0];
for (const row of result.rows) { // for (const row of result.rows) {
if (row.username === username || row.recipient === username) { // if (row.username === username || row.recipient === username) {
io.to(username).to(recipient).emit('chat message', { username: row.username, recipient: row.recipient, content: row.content }); // io.to(username).to(recipient).emit('chat message', { username: row.username, recipient: row.recipient, content: row.content });
//
} // }
} // }
} catch (e) { // } catch (e) {
console.error('Error retrieving messages:', e); // console.error('Error retrieving messages:', e);
} // }
} // }
}); });
socket.on('get messages', async (recipient) => { socket.on('get messages', async (recipient) => {
const username = socket.user.username; const username = socket.user.username;
@@ -127,6 +131,8 @@ function initializeSocket(server) {
//const { username: sender, recipient: receiver, content: content, id: id } = result.rows; //const { username: sender, recipient: receiver, content: content, id: id } = result.rows;
console.log('Sending messages:', result.rows); console.log('Sending messages:', result.rows);
socket.emit('messages history', result.rows); socket.emit('messages history', result.rows);
} else {
io.emit('no messages', );
} }
} catch (e) { } catch (e) {
console.error('Error retrieving messages:', e); console.error('Error retrieving messages:', e);
@@ -142,23 +148,4 @@ function initializeSocket(server) {
return io; 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 }; 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 recipientInput = document.getElementById('recipient');
const messages = document.getElementById('messages'); const messages = document.getElementById('messages');
const logoutButton = document.getElementById('logout'); const logoutButton = document.getElementById('logout');
document.getElementById('input').placeholder = `Send message as: ${localStorage.getItem('username')}`;
let currentRecipient = null; let currentRecipient = null;
window.onload = () => { window.onload = () => {
document.getElementById('recipient').focus(); document.getElementById('recipient').focus();
} }
logoutButton.onclick = logout; logoutButton.onclick = logout;
function logout() { function logout() {
fetch('/auth/logout', { fetch('/auth/logout', {
@@ -19,6 +20,7 @@ function logout() {
}) })
.then(response => { .then(response => {
if (response.ok) { if (response.ok) {
localStorage.clear();
window.location.href = '/login'; window.location.href = '/login';
} }
}) })
@@ -82,6 +84,10 @@ async function initializeSocket() {
window.scrollTo(0, document.body.scrollHeight); 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) => { recipientForm.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
if (recipientInput.value) { 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);
})

53
frontend/stylesheet/chat.css
View File

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