saving messages to database

backend/db.js

@@ -1,7 +1,7 @@
 const {Client} = require('pg');
 require('dotenv').config();
 
-const client = new Client({
+const db  = new Client({
     user: process.env.PG_USER,
     password: process.env.PG_PASSWORD,
     database: process.env.PG_DATABASE,
@@ -10,7 +10,7 @@ const client = new Client({
 });
 
 // create connection to database
-client.connect()
+db .connect()
     .then(() => console.log('Successfully connected to database'))
     .catch((err) => console.log('Error on connecting to database: ', err));
 
@@ -19,7 +19,7 @@ client.connect()
 async function isUserExists(username) {
     try {
         const query = 'SELECT COUNT(*) FROM accounts WHERE username = $1';
-        const result = await client.query(query, [username]);
+        const result = await db .query(query, [username]);
         return result.rows[0].count > 0;
     } catch (err) {
         console.error('Error checking username:', err);
@@ -38,7 +38,7 @@ async function insertUser(username, password){
     const values = [username, password];
 
     try {
-        const signupData = await client.query(query, values);
+        const signupData = await db .query(query, values);
         console.log('Account created:', signupData.rows[0].username);
     } catch (err) {
         console.error('Error inserting data:', err.stack);
@@ -47,7 +47,7 @@ async function insertUser(username, password){
 }
 
 module.exports = {
-    client,
+    db ,
     insertUser,
     isUserExists,
 };

backend/socket.js

@@ -0,0 +1,78 @@
+
+const { Server } = require('socket.io');
+const jwt = require('jsonwebtoken');
+const jwtSecret = process.env.JWT_SECRET;
+const { db } = require('./db.js');
+function initializeSocket(server) {
+    const io = new Server(server, {
+        cookie: {
+            httpOnly: true,
+            sameSite: "strict",
+            maxAge: 30 * 24 * 60 * 60 * 1000
+        }
+    });
+
+    io.use((socket, next) => {
+        const token = socket.handshake.auth.token;
+        if(token) {
+            jwt.verify(token, jwtSecret, (err, user) => {
+                if(err) {
+                    console.log(err);
+                }
+                socket.user = user;
+                next();
+            });
+        } else {
+            next(new Error('Not logged in'));
+        }
+    });
+
+    io.on('connection', (socket) => {
+        const username = socket.user.username;
+        console.log(username + ' connected');
+
+        // chat message event
+        socket.on('chat message', async (msg) => {
+            let result;
+            try {
+                const result = await db.query('INSERT INTO messages (content) VALUES ($1) RETURNING id', [msg]);
+                const 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);
+
+            if (!socket.recovered) {
+                // if the connection state recovery was not successful
+                try {
+                    const { rows } = await db.query(
+                        'SELECT id, content FROM messages WHERE id > $1',
+                        [socket.handshake.auth.serverOffset || 0]
+                    );
+
+                    rows.forEach(row => {
+                        socket.emit('chat message', row.content, row.id);
+                    });
+
+                } catch (e) {
+                    // something went wrong
+                    console.error('Error during recovery:', e);
+                }
+            }
+
+        });
+
+        // disconnect event
+        socket.on('disconnect', () => {
+            console.log(username + ' have disconnected');
+        });
+
+    });
+
+    return io;
+}
+
+module.exports = { initializeSocket };

frontend/js/chat.js

@@ -2,6 +2,9 @@ const form = document.getElementById('form');
 const input = document.getElementById('input');
 const messages = document.getElementById('messages');
 
+window.onload =  function() {
+    document.getElementById('input').focus();
+}
 // Function to get the token
 async function getToken() {
     try {
@@ -25,7 +28,8 @@ async function initializeSocket() {
 
     const socket = io({
         auth: {
-            token: token
+            token: token,
+            serverOffset: 0
         }
     });
 
@@ -33,11 +37,12 @@ async function initializeSocket() {
         console.log('Connected to server');
     });
 
-    socket.on('chat message', (msg) => {
+    socket.on('chat message', (msg, serverOffset) => {
         const item = document.createElement('li');
         item.textContent = msg;
         messages.appendChild(item);
         window.scrollTo(0, document.body.scrollHeight);
+        socket.auth.serverOffset = serverOffset;
     });
 
     form.addEventListener('submit', (e) => {

index.js

@@ -5,24 +5,16 @@ const app = express();
 const cookieParser = require('cookie-parser');
 
 const path = require('path');
-const { insertUser, isUserExists, client } = require('./backend/db.js');
-//const { socket } = require('./backend/socket.js');
+const { insertUser, isUserExists, db } = require('./backend/db.js');
+const { initializeSocket } = require('./backend/socket.js');
 
 const bcrypt = require('bcrypt');
 const saltRounds = 10;
 const { Server } = require('socket.io');
 const { createServer } = require('node:http');
 const server = createServer(app);
-const io = new Server(server, {
-    cookie: {
-        httpOnly: true,
-        sameSite: "strict",
-        maxAge:  30 * 24 * 60 * 60 * 1000
-    }
-});
-
+const io = initializeSocket(server);
 const jwt = require('jsonwebtoken');
-const {decode} = require("jsonwebtoken");
 const jwtSecret = process.env.JWT_SECRET;
 
 require('dotenv').config();
@@ -110,36 +102,7 @@ app.get('/', (req, res) => {
     });
 });
 
-io.use((socket, next) => {
-    const token = socket.handshake.auth.token;
-    if(token) {
-        jwt.verify(token, jwtSecret, (err, user) => {
-            if(err) {
-                console.log(err);
-            }
-            socket.user = user;
-            next();
-        });
-    } else {
-        next(new Error('Not logged in'));
-    }
-})
 
-// socket io connection
-io.on('connection', (socket) => {
-    const username = socket.user.username;
-    console.log(username + ' connected');
-    // disconnect event
-    socket.on('disconnect', () => {
-        console.log(username + ' have disconnected');
-    });
-    // chat message event
-    socket.on('chat message', (msg) => {
-        const message = username + ': ' + msg;
-        console.log(message);
-        io.emit('chat message', message);
-    });
-})
 // run server
 server.listen(port, () => {
     console.log(`Chat app listening on port ${port}`);
@@ -178,7 +141,7 @@ async function loginUser(req, res) {
 
     if (username && password) {
         try {
-            const result = await client.query('SELECT * FROM accounts WHERE username = $1', [username]);
+            const result = await db.query('SELECT * FROM accounts WHERE username = $1', [username]);
             // check if user exists
             if (result.rows.length > 0) {
                 // Compare password