VueJS and NodeJS Websockets: A Rapid Guide

Set up a node.js express API with cors to support frontend apps. Create a src/index.js get route that returns hello, and run on port 8000 with a start script.

Access the course's GitHub repository at github.com/Antonio Papa/node WebSockets, where each lesson has its own branch to view code exactly as it appears in that lecture.

Configure TypeScript in a Node.js Express app and convert index.js to index.ts, enabling decorator metadata for type ORM. Install nodemon and ts-node for hot-reload and better IntelliSense.

Connect browser and server in real time with WebSockets and socket.io to build a chat app featuring two-way communication and client-server integration.

Learn to expose a real-time message endpoint with VueJS and NodeJS websockets by creating a post /api/message route, wiring the socket IO, and testing with Postman.

Set up a Vue.js frontend named Vue WebSockets, install dependencies, and run npm run dev to open the port with vue router, skipping typescript, jsx, unit tests, and eslint.

Access the app’s code base on GitHub at Antonio Papa / view WebSockets, with each lesson separated into its own branch to locate or copy the code easily.

Install bootstrap and import its CSS, then transform a blank Vue app into two-column chat interface with a header, group chats, a conversation area, a reply form, and overflow scrolling.

Build a chat with Vue.js by using ref and v-model for the message, posting via axios to a node backend, and receiving updates through socket.io to update the messages array.

Install TypeORM and related tools, connect to a MySQL database with a data source, and configure host, port, credentials, and the node web sockets schema for app data.

Create a user entity with a primary generated id, first name, last name, email (unique), and password, then decorate it as an entity and update the entities path.

Hide database credentials by installing a dotenv-like package and loading a .env file, replace hard-coded values with process.env, and gitignore the env file to store secrets in Node.js.

Implement a register endpoint in a TypeScript auth controller to create users via POST api/register, validating password and password confirm, hash the password with bcryptjs, and save the user entity.

Install json web token and its types as a dev dependency, then sign the user id with a secret from the env to generate a JWT.

Create an auth middleware to retrieve and attach the authenticated user to the request, verify tokens, and protect endpoints with 401 unauthenticated errors using next.

Implement OAuth middleware to fetch and update the user entity, first name, last name, email, and optional password with confirmation using bcrypt, and expose an endpoint to list remaining users.

Create a message entity with sender, receiver, content and created date, wire a secured post /api/messages endpoint to save and emit messages between users for later pagination.

Design a paginated messages endpoint using find and count, skip, take, and a where/or query to fetch messages sent or received, including sender and receiver relations.

Upload images by integrating multer, configuring disk storage to uploads with a random filename and proper extension; create a post endpoint, serve images statically, and emit image messages via socket.io.

Refine the messages endpoint to filter by sender and receiver with a user ID route, enabling conversations between two users, and add name-based filtering for users via a query parameter.

Refactor the front end by setting up routes and a router view, introduce chat and register views, and streamline components and assets for a cohesive user interface.

Create and submit a register form in VueJS using form data and Axios to post to /api/register. Then navigate to the login page.

Implement a secure component that verifies authentication via an axios request for the authenticated user, redirects to login if needed, and shows the user's full name.

Create an account view with a pre-filled user form (first name, last name, email) managed by Pinia, update via put request, and redirect to the main page.

Build a layout component with a left sidebar and router view, fetch users with axios, and enable live search to filter users via a load function on mounted.

Retrieves user messages via an axios get call using the route id, updates the chat view, and distinguishes sent versus received messages to prepare sending content.

Learn how to send images in a chat by implementing an upload component, preparing form data, and posting images with axios, then render images in the chat using conditional templates.

Learn to implement client-side pagination for messages using a page parameter, load more actions, and axios requests, including concatenating new messages and handling last page logic.

Sort messages in the back end by createdat descending to fetch the latest ten, and reverse on the frontend to show the most recent on top.

Design a room entity with a many-to-many relation to users, and create rooms via an authenticated API endpoint, managing members through a join table.

Create a rooms endpoint to retrieve all rooms, including only those containing the authenticated user via an inner join on room_members, with optional name filtering.

Update the messaging model to send messages to rooms instead of individual receivers, introducing a room relation and join table, and adjust endpoints and middleware to fetch by room id.

Learn how to implement socket.io rooms in a Vue.js and Node.js websocket app, including joining rooms, emitting room-scoped messages, and returning the last messages for each room.

Update the frontend to display rooms in the layout, showing titles, last messages, and dates; implement show date and show last message with null and image handling.

Create rooms by adding a room create view and a title with member checkboxes, fetched via axios. Submit to the rooms endpoint and return to the main page.

Learn to manage chat rooms by updating room paths, loading room data and members, resetting values on route changes, and filtering websocket messages by room to ensure correct delivery.