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

complete rewrite (i broke all)

Browse Source
This commit is contained in:
slawk0
2024-08-25 01:10:54 +02:00
parent 2595170eec
commit 58fe1d4484
2 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
backend/socket.js
View File

@@ -40,7 +40,7 @@ function initializeSocket(server) {
// Join a room with the user's username
socket.join(username);
loadInitialMessages(socket);
//loadInitialMessages(socket);
// chat message event
socket.on('chat message', async (msgData) => {
@@ -66,7 +66,7 @@ function initializeSocket(server) {
console.log(formattedMessage);
// Emit message to the sender's and recipient's rooms
io.to(username).to(recipient).emit('chat message', formattedMessage);
io.to(username).to(recipient).emit('chat message', { sender: newMessage.sender, recipient: newMessage.recipient, content: newMessage.content });
}
} catch (err) {
console.error('Error fetching inserted message:', err);
@@ -81,7 +81,7 @@ function initializeSocket(server) {
for (const row of result.rows) {
if (row.username === username || row.recipient === username) {
socket.emit('chat message', `${row.username} to ${row.recipient}: ${row.content}`);
socket.emit('chat message', { username: row.username, recipient: row.recipient, content: row.content} );
}
}
} catch (e) {
@@ -93,22 +93,26 @@ function initializeSocket(server) {
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)
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}`
);
// const formattedMessages = result.rows.map(row =>
// `${row.username} to ${row.recipient}: ${row.content}`
// );
socket.emit('messages history', formattedMessages);
if (result.rows.length > 0) {
const { username: sender, recipient: receiver, content } = result.rows;
socket.emit('messages history', sender, receiver, content);
}
} catch (e) {
console.error('Error retrieving messages:', e);
}
});
// disconnect event
socket.on('disconnect', () => {
console.log(username + ' has disconnected');
@@ -125,7 +129,7 @@ async function loadInitialMessages(socket) {
const result = await db.query(query, [username]);
for (const row of result.rows.reverse()) {
socket.emit('chat message', `${row.username} to ${row.recipient}: ${row.content}`, row.id);
socket.emit('chat message',row.username, row.recipient, row.content);
}
// Set the server offset to the latest message id

32
frontend/js/chat.js
View File

@@ -52,11 +52,16 @@ async function initializeSocket() {
socket.on('chat message', (msg, serverOffset) => {
console.log('Received message:', msg);
const [sender, recipient, content] = msg.split(': ');
console.log('Current recipient:', currentRecipient);
if (recipient === currentRecipient || sender === currentRecipient) {
const [sender, content, recipient] = msg;
console.log(
'Sender:', sender,
'Content:', content,
'Recipient:', recipient
)
console.log('Current recipient:', currentRecipient + ' Recipient:', recipient + ' Sender:', sender);
if (recipient === currentRecipient){
const item = document.createElement('li');
item.textContent = msg;
item.textContent = content;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
}
@@ -68,7 +73,7 @@ async function initializeSocket() {
e.preventDefault();
if (recipientInput.value) {
currentRecipient = recipientInput.value;
messages.innerHTML = ''; // Clear previous messages
messages.innerHTML = '';
console.log('Requesting messages for recipient:', currentRecipient);
socket.emit('get messages', currentRecipient);
}
@@ -77,28 +82,19 @@ async function initializeSocket() {
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value && currentRecipient) {
const sender = socket.user.username;
const message = `${sender}: ${currentRecipient}: ${input.value}`;
console.log('Sending message:', message);
socket.emit('chat message', message);
console.log('Sending message:', input.value, 'to', currentRecipient);
socket.emit('chat message', { content: input.value, recipient: currentRecipient});
input.value = '';
// Display the message immediately on the sender's UI
const item = document.createElement('li');
item.textContent = message;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
}
});
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;
item.textContent = messagesHistory;
messages.appendChild(item);
});
window.scrollTo(0, document.body.scrollHeight);
});
}