Socket IO with Node js & MERN Stack | Real-Time Web Apps

Build a real-time chat app by setting up npm, express, and socket.io, creating a public front end with index.html and chat.js and a server.js to host and serve static files.

Explore broadcasting in a socket io chat app to deliver messages to all connected users except the sender, using the server to emit and broadcast in real-time.

Build and deploy a real-time chart app using MongoDB, Express, React, and Node.js with Socket.IO. Learn authentication, group management, online presence, typing indicators, and instant messaging in a live demo.

Register a user via /register in a node.js express app using a router and mongoose, preventing duplicate emails and returning the user's id, username, and email with a 201 status.

Learn to implement user login in a node app by validating email or username, comparing passwords, returning user data on success, generating a json web token with a 30-day expiry.

Learn to create a MongoDB connection string from the official site, set up a project and cluster, and use the environment variable process.env.mongoURL to connect in the server.

Test register and login routes using tender client or postman, posting json with username, email, and password to /api/users/register and /api/users/login to obtain a token.

Develop a real-time group feature where admins create groups with name and description, users join or leave, and routes list groups while populating admins and member details (username and email).

Distinguish authentication from authorization and implement token-based access control with a JWT middleware that protects the groups route, enabling only admin users to create groups.

Implement a get all groups route in a group router, using try-catch and find to retrieve groups. Then populate admin and members to return only username and email.

Create an authenticated join group endpoint in a MERN real-time app, validate the group exists, ensure the user isn't already a member, and add the user id to group.members.

Join a group via the join endpoint by validating the group, ensuring the user is not already a member, then adding the user id to the group's members and saving.

Implement the message route for a socket.io chat in a MERN stack app, creating messages with sender and group, and exposing endpoints to send and fetch messages.

Implement the get group messages endpoint to fetch all messages by group id, populate the sender with username and email, and return messages sorted by created date with newest first.

Integrate socket.io into the express server, attach user to socket.handshake, manage users in a map keyed by socket.id, and implement join room logic to update and broadcast room user lists.

Listen for the leave room event from the client, remove the user from the group by its id, and log departure; then emit a user left event to the group.

Trigger the new message event when a user sends a message, broadcasting to group members. Emit a message received event with the message for the front end to display.

Listen for the disconnect event to handle user departure in real-time, fetch the user data, notify the room with a user left event, and remove the user from connected users.

Implement real-time typing indicators in a socket.io chat using two events: typing and stop typing, broadcasting status to the specified group and attaching the user name for the front end.

Clone starter, install dependencies, and run dev server; implement login with Chakra UI inputs, useState for email and password, post to localhost:5000/users/login, store user in localStorage, and navigate to /chat.

Implement user registration by reusing the login logic, bind username, email, and password to state, post to /register with axios, manage loading, and redirect to login after success.

Check admin status to enable creating groups in the real-time app by rendering a plus button and modal when the logged-in user is admin, using local storage and chakra UI.

Fetches all groups using an endpoint with a token from local storage, calls axios get with bearer token in headers, updates local groups state, and supports admin-created groups.

Differentiate between groups and user groups, fetch all groups, filter by the login user, map to IDs, and update state to reflect joined groups and enable interactive group selection.

Admin creates groups using axios post to the create group endpoint, passes group name and description, includes authorization, shows success toast, fetches groups, resets inputs, and handles errors.

Enable join group by calling the join group endpoint with a dynamic group ID via Axios and a token, then fetch groups and show a success toast.

Implement join and leave group functionality in a real-time socket app using endpoints for join and leave, and conditionally toggle the action and clear the selected group after leaving.

Implement logout logic by removing user info from local storage and redirecting to the login endpoint using the navigate hook.

Implement real-time group chat by wiring the chat area to the selected group and socket, fetch group messages with a token-authenticated request, and show typing indicators.

Emit join room events and listen for message receive to update messages. Handle users in room, user joined/left, notifications, typing indicators, and cleanup by leaving room and turning off sockets.

Display online users by rendering the users list component with sample users, updating connected users, and filtering by selected group to show group-specific members in real-time.

Implement sending messages, typing indicators, and time formatting for real-time chat using socket.io in a MERN stack, with token authentication and message emission.

Render the typing indicator by validating and mapping typing users to avatars in a chakra ui box, aligning current user left and others right.

Display chat messages from the backend in a group, render messages with sender-aware alignment, colors, and dates, and prepare to send messages and render typing indicators.

Learn how to deploy a full stack real-time app by preparing code, securing env variables, pushing to GitHub, and deploying backend on Render and frontend on Netlify, with environment configuration.