React and NodeJS Websockets: A Rapid Guide

Set up a node.js express app and enable cross-origin resource sharing. Create a simple get API that returns a hello message and run it on port 8000 with npm start.

Access the course's GitHub repository at github.com slash Antonio Papa slash node WebSockets, with each lesson on its own branch to match the code shown in that lecture.

Add TypeScript to the project for type safety and to work with Typeorm, convert index.js to index.ts, install TypeScript types, and set up dev with nodemon for automatic restarts.

Implement real-time two-way communication with websockets using socket.io, building a chat app by setting up server and client APIs, installing dependencies, and testing connections on port 8080.

Create a real-time message endpoint with a post /api/message route, connect express routes and a websocket, and test with postman.

Set up the front end with the React library, install bootstrap, and build a two-panel ui with a sidebar and a chat content area for websockets communication.

Access the GitHub repository for this course at github.com/Antonio Papa/react WebSockets, where each lesson is organized on a separate GitHub branch for easy navigation.

Design a chat UI by finishing the left sidebar, head, conversation area, and reply form, using socket.io to send messages between John Doe and Jane Smith.

Connect a socket.io client to the back end, post messages with axios, and manage real-time message state and history across tabs.

Install and configure Typeorm to connect a Node project to MySQL, create a data source, and initialize a schema, preparing to build tables for a websockets app.

Create a user entity with a primary key, unique email, and varchar fields in TypeORM, then register it to generate the user table in the database.

Install the dotenv package, load credentials with dotenv.config, and replace host, username, password, and database with process.env values, ensuring the .env file is gitignored.

Create a register endpoint in an auth controller to handle user signup, validate password and password confirm, and hash the password with bcryptjs before saving the user.

Implement an asynchronous login that validates a user by email and password with bcrypt and returns the user on success or invalid credentials; next, retrieve a JWT token.

Install and import the json web token library, sign the user id with a secret to generate a jwt, an industry standard token that encodes user information for authentication.

retrieve the JWT from the authorization header and fetch the authenticated user from the /user endpoint by verifying the token payload, then return the user without the password.

Create an auth middleware to attach the authenticated user to the request, validate the authorization header, and pass control with next, returning 401 unauthenticated when verification fails.

Implement an update user endpoint with OAuth middleware, handling first name, last name, email, and password updates, plus a get all users endpoint excluding the authenticated user.

Create a message entity for a chat system, persist messages to the database, and expose a secured POST API/messages endpoint with sender, receiver, and content fields, emitting updates via sockets.

Add a get /api/messages endpoint that retrieves messages with find and count, paginates using page and take, and includes sender and receiver relations plus total.

Implement image messaging in a React and NodeJS websocket app by adding a Multer-based uploads endpoint, saving images to an uploads folder, and emitting image messages via socket.io.

Fix the messages endpoint to return only messages between two specified users by their IDs, using users/{id}/messages and sender/receiver roles; implement name-based user filtering with a query parameter name.

Create a pages directory and a chat.jsx component, then wire it into the app with react router dom using browser router, routes, and a main path.

Create a register page with a registration form and styles, then submit a form data object via axios to the backend, with inputs named to match backend expectations.

Learn to implement a login flow in a React and NodeJS app by configuring axios baseURL, creating a login component, and using the JWT from the backend.

Learn how to fetch and display the authenticated user in chart.js after login by storing the JWT in localStorage and configuring axios with a bearer token.

Implement a secure wrapper to display the authenticated user across all components, using an outlet, and redirect unauthenticated users to the login page with navigate.

Create and export a React context, provide it with the user and setUser as a value, and consume it with useContext to share and update the authenticated user across components.

Update the current user via the context API by pre-filling account fields from the authenticated user and using setUser after a put request to the user endpoint.

Develop the left sidebar layout with a layout component, outlet, and route; fetch users with axios, then search and filter by name for chat access.

Refactor the chat layout to use jsx paths, fetch messages with axios using the user id, and render sender and receiver messages with conditional styling and image support.

Send messages by posting to the messages endpoint with the receiver ID, content, and type, and update the socket to reflect the new message; note pagination can affect retrieval.

Add pagination to the chat app by implementing page state and a load more button that fetches messages by page and merges new messages with existing ones.

Explain adding an image upload in a chat app with an upload component and hidden file input; send images to backend with form data and axios, including the receiver id.

Fix backend message ordering by sorting messages by createdAt in descending order and reversing them on display to show the latest messages in the correct front-end order.

design a room entity using typeorm with a many-to-many relation to users via a join table and cascade delete, and expose a post /api/rooms endpoint with title and member ids.

Build a rooms retrieval endpoint with an inner join on room members to fetch all rooms for a user, then filter by name using a custom query builder.

Replace receiver with room in the message flow, linking messages to rooms via a many-to-one relation and updating endpoints and middleware to use room IDs.

Learn how to implement socket.io rooms in a React and NodeJS web app by joining rooms, emitting room-scoped messages, and returning the last message per room.

Replace the front end users list with rooms in the left sidebar, linking each room to its ID, and create a rooms/create page with a title input.

Create a room by fetching users, selecting members with checkboxes, and entering a title, then submit via axios to rooms and navigate back.

retrieve the room's members by switching from users to rooms in the app and mapping member names to a comma-separated full name list like John Doe, Jane Smith.

Showcases room-scoped messaging with websockets, filtering by room id via onmessage and the rooms/{id}/messages endpoint to deliver messages to correct participants.

Demonstrates rendering the last message and timestamp in a left sidebar, including null, image, and text cases, and explains uploading images via a room-based endpoint.