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

added logout option

Browse Source
This commit is contained in:
slawk0
2024-08-24 17:19:01 +02:00
parent 9cd9c7495a
commit 55c2cd07c9
4 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -1,7 +1,7 @@
Web chat (not finished!)
========================
Web chat application using Express.js, Socket.io, Postgresql, and JWT for user authentication .
Web chat application using Express.js, Socket.io, bcrypt, Postgresql, and JWT for user authentication .
Selfhost:
1. **Clone repository:**

32
backend/socket.js
View File

@@ -39,19 +39,35 @@ function initializeSocket(server) {
// chat message event
socket.on('chat message', async (msg) => {
let result;
let insertedId;
try {
await db.query('INSERT INTO messages (content, username) VALUES ($1, $2) RETURNING id', [msg, username]);
// Insert the new message into the database
const result = await db.query('INSERT INTO messages (content, username) VALUES ($1, $2) RETURNING id', [msg, username]);
insertedId = result.rows[0].id;
} catch (err) {
console.error('Error inserting message:', err);
return;
}
const message = username + ': ' + msg;
console.log(message);
io.emit('chat message', message);
// Fetch the newly inserted message from the database
try {
const query = 'SELECT id, content, username FROM messages WHERE id = $1';
const result = await db.query(query, [insertedId]);
if (!socket.recovered) { // if the connection state recovery was not successful
if (result.rows.length > 0) {
const newMessage = result.rows[0];
const formattedMessage = `${newMessage.username}: ${newMessage.content}`;
console.log(formattedMessage);
// Emit the message to all connected clients
io.emit('chat message', formattedMessage, newMessage.id);
}
} catch (err) {
console.error('Error fetching inserted message:', err);
}
// The connection state recovery logic remains unchanged
if (!socket.recovered) {
try {
const query = 'SELECT id, content, username FROM messages WHERE id > $1 ORDER BY id ASC';
const values = [socket.handshake.auth.serverOffset || 0];
@@ -59,15 +75,13 @@ function initializeSocket(server) {
const result = await db.query(query, values);
for (const row of result.rows) {
socket.emit('chat message', row.content, row.id);
socket.emit('chat message', `${row.username}: ${row.content}`, row.id);
}
} catch (e) {
// something went wrong
console.error('Error retrieving messages:', e);
}
}
});
// disconnect event
socket.on('disconnect', () => {
console.log(username + ' have disconnected');

9
frontend/js/chat.js
View File

@@ -1,10 +1,17 @@
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');
document.getElementById('logout').onclick = logout;
window.onload = function() {
document.getElementById('input').focus();
}
function logout() {
localStorage.removeItem('token');
sessionStorage.clear();
location.reload();
}
// Function to get the token
async function getToken() {
try {

2
frontend/routes/chat.html
View File

@@ -18,9 +18,11 @@
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<button id="logout" onclick="logout()">Logout</button>
<input id="input" autocomplete="off" placeholder="Enter message"/>
<button>Send</button>
</form>