Merge pull request #19 from azeddine-hmd/dev

fix websocket connects on all pages; adding wrapper for socket listeners

Author: azeddine-hmd

README.md

@@ -13,19 +13,19 @@ docker compose up --build
 ## Technologies
 *backend:*
   * Typescript
-  * Expressjs 5-beta (async/await)
+  * Expressjs 5-beta (async/await handlers)
   * prisma (orm/migrations)
   * postgresql (database)
-  * Socket.io (advanced websocket)
+  * Socket.io (websocket)
 
 *frontend:*
   * Typescript
-  * Nextjs 13
-  * Server/Client component
-  * Tailwindcss
+  * Nextjs 13 (Server/Client component)
+  * Tailwindcss (styling)
   * Framer-Motion (animation)
-  * React-Query (managing network state/caching etc)
-  * Axios (http request)
+  * Axios (http client)
+  * React-Query (network fetching)
+  * zustand (state management)
 
 ## Example :
   Check hosted webserver on: [Chichat | talk and hang out with friends](https://chichat.azeddine.xyz)

backend/src/sockets/index.ts

@@ -4,6 +4,7 @@ import { COOKIE_MAX_AGE_MILIS } from '../constants';
 import { corsOptions, pool, prisma } from '../config';
 import { UserStatus } from '@prisma/client';
 import { createAdapter } from '@socket.io/postgres-adapter';
+import { listenerWrapper } from './listener-wrapper';
 
 export const io = new Server(server, {
   cookie: {
@@ -19,38 +20,43 @@ export const io = new Server(server, {
 
 io.adapter(createAdapter(pool));
 
-io.on('connection', async (socket) => {
-  // handling user status
-  console.log(`client(id=${socket.user.id}, sid=${socket.id}) connected!`);
-  await prisma.$transaction([
-    prisma.user.update({
-      where: { id: socket.user.id },
-      data: { status: UserStatus.ONLINE },
-    }),
-    prisma.userSockets.create({
-      data: {
-        socketId: socket.id,
-        user: { connect: { id: socket.user.id } },
-      },
-    }),
-  ]);
-
-  socket.on('disconnect', async () => {
-    console.log(`client(id=${socket.user.id}, sid=${socket.id}) disconnected!`);
-    const [_, userSocketsCount] = await prisma.$transaction([
-      prisma.userSockets.delete({
-        where: { socketId: socket.id },
+io.on(
+  'connection',
+  listenerWrapper(async (socket) => {
+    // handling user status
+    console.log(`client(id=${socket.user.id}, sid=${socket.id}) connected!`);
+    await prisma.$transaction([
+      prisma.user.update({
+        where: { id: socket.user.id },
+        data: { status: UserStatus.ONLINE },
+      }),
+      prisma.userSockets.create({
+        data: {
+          socketId: socket.id,
+          user: { connect: { id: socket.user.id } },
+        },
       }),
-      prisma.userSockets.count({ where: { userId: socket.user.id } }),
     ]);
-    if (userSocketsCount == 0) {
-      await prisma.user.update({
-        where: { id: socket.user.id },
-        data: { status: UserStatus.OFFLINE },
-      });
-    }
-  });
-});
+
+    socket.on('disconnect', async () => {
+      console.log(
+        `client(id=${socket.user.id}, sid=${socket.id}) disconnected!`
+      );
+      const [_, userSocketsCount] = await prisma.$transaction([
+        prisma.userSockets.delete({
+          where: { socketId: socket.id },
+        }),
+        prisma.userSockets.count({ where: { userId: socket.user.id } }),
+      ]);
+      if (userSocketsCount == 0) {
+        await prisma.user.update({
+          where: { id: socket.user.id },
+          data: { status: UserStatus.OFFLINE },
+        });
+      }
+    });
+  })
+);
 
 import './middlewares';
 import './namespaces';

backend/src/sockets/listener-wrapper.ts

@@ -0,0 +1,10 @@
+import { Socket } from 'socket.io';
+
+export const listenerWrapper = (handler: (socket: Socket) => Promise<void>) => {
+  return (socket: Socket) => {
+    handler(socket).catch((error) => {
+      console.error('Error in socket: ', error);
+      socket.disconnect();
+    });
+  };
+};

backend/src/sockets/listeners/users.ts

@@ -1,5 +1,10 @@
+import { Socket } from 'socket.io';
 import { io } from '..';
+import { listenerWrapper } from '../listener-wrapper';
 
-io.on('friendsPresence', () => {
-  console.log('subscribe to friendsPresence');
-});
+io.on(
+  'friendsPresence',
+  listenerWrapper(async (socket: Socket) => {
+    throw new Error('FriendsPresence');
+  })
+);

backend/src/sockets/middlewares.ts

@@ -1,7 +1,7 @@
 import { io } from '.';
 import helmet from 'helmet';
 import cookie from 'cookie';
-import { verifyJwt } from '../config';
+import { prisma, verifyJwt } from '../config';
 import { sessionMiddleware } from '../api/middlewares/express-session';
 import { Socket } from 'socket.io';
 
@@ -11,11 +11,28 @@ io.engine.use(helmet());
 function authentication(socket: Socket, next: (err?: Error) => void) {
   const cookies = cookie.parse(socket.handshake.headers.cookie);
   const jwtKey = process.env.JWT_COOKIE_NAME;
-  if (!cookies[jwtKey]) next(new Error('auth token not found'));
+  if (!cookies[jwtKey]) {
+    next(new Error('auth token not found'));
+    socket.disconnect();
+  }
   const payload = verifyJwt(cookies[jwtKey]);
-  if (typeof payload === 'string') next(new Error('invalid payload'));
-  else {
-    socket.user = { id: payload.id, username: payload.username };
+  if (typeof payload === 'string') {
+    next(new Error('invalid payload'));
+    socket.disconnect();
+  } else {
+    prisma.user
+      .findFirstOrThrow({
+        where: { id: payload.id, username: payload.username },
+        select: { id: true, username: true },
+      })
+      .then((user) => {
+        socket.user = user;
+      })
+      .catch((error) => {
+        console.error('socket:authentication: ', error);
+        next(new Error('User not found'));
+        socket.disconnect();
+      });
     next();
   }
 }

frontend/app/(auth)/login/page.tsx

@@ -123,7 +123,7 @@ export default function Login() {
               </PrimaryDotLoadingButton>
             </form>
             <div className="mt-4 w-full text-sm text-muted">
-              <h1 className="inline ">Need an account? </h1>
+              <h1 className="inline text-muted-field">Need an account? </h1>
               <Link
                 href="/register"
                 className="inline cursor-pointer text-sm text-link hover:underline"