SocketIo React Node Public and Private Chat App

Name: SocketIo React Node Public and Private Chat App
Rating: 4.4 (29 reviews)

Master realtime apps building extensive chat app (public and private) using socket io react and node.

Created byRyan Dhungel

Last updated 2/2024

English

What you'll learn

Learn socket io for realtime communication
Learn to build full stack app using react node and socket io
Implement public and private chat system
Learn to implement essentials features of a typical chat app

Course content

6 sections • 40 lectures • 4h 43m total length

Are you new to JavaScript React and NodeJs?0:33
Websockets2:38
Download source code0:02
Client setup7:44
Server setup14:36
Initialize a project with npm, install Express, and build a server with Express and a REST API, then explore adding real-time features and preparing port listening for socket-based communication.
Connection debugging8:43
Debug and verify the client-server connection in a Socket.IO React Node chat app by inspecting the circuit instance, handling connection and disconnection events, and resolving version compatibility issues.
How it works?5:31

User form7:30
Socket events emit and on7:08
Listen for the username event with on and receive data. Emit a user joined message to all clients or broadcast to exclude the sender, using client-side useEffect and cleanup.
Emit messages6:47
Switch from name entry to a message form in a public chat, track connection, render messages, and emit user and message events to the server.
Live messages4:40
Live users15:37

Preparing for private chat6:56
Create a real-time chat app with public and private chats, user lists, online status, and join/leave notifications, ensuring unique usernames via socket integration and server middleware.
Socket middleware9:34
Users with additional props6:58
Users list and yourself4:22
Sorting users3:11
Learn to sort the users list so the current user always appears first by applying a sort function before updating state, ensuring the current user leads the list.
Connected true or false8:27
Connected disconnected status4:25
Refactoring layout5:37
Refactor the chat app layout to allocate half the space for public debt and half for private debt, with rendering adjusted by connection status.
Message object6:43
Uppercase names2:46
Capitalize the first letter of usernames for display by slicing the first character and uppercasing it, applying to messages as well, and show join notifications when new users join.
User joined notification5:01
Username taken and user left alert6:05
Typing alert7:52
Scroll to bottom4:53
On username click11:37
Click usernames to start private conversations in a socket.io React Node chat app, switch between users to view public and private messages, and manage the selected user and per-user notifications.

How private message works?6:29
Explore implementing private messages in a socket.io react node chat app by managing private messages in state, selecting a user, and emitting messages only to that user.
Emit private message5:40
On private message8:53
Render private message5:41
Render private messages by displaying the selected user's private conversation with auto-scroll to the bottom, indicate messages from the user themselves, and implement private notifications for new messages.
Has new messages alert6:12
Current user and message count4:51

Preparing to deploy9:23
Prepare to deploy the socket.io react node chat app to digital ocean by configuring server import/export syntax, pmta, and production env vars, then restart server and client for deployment.
Final improvements before deploy9:54
Digital ocean and github repos12:38
Deploy the socket.io react node app to digital ocean by creating a droplet, pushing client and server repos to GitHub, pulling them on the server, and running the app.
Nodejs and NGINX setup11:13
Running client12:46
Running server13:20

Requirements

Basic understanding of react and node js

Description

Do you want to master socket io to build realtime applications using MERN stack? Then this course is all you need.

I have put many months of hard work into this course to cover almost everything you need to know about socket io to build real time apps.

You will code the app from scratch and understand how to build your app along the way by adding many essentials features that make up a very solid realtime chat app.

Even though it is a chat app, the concepts you will learn in this course will help you to add realtime features in any MERN stack app.

I have gone into very details on building this chat app to cover almost all the possible scenarios such as user public and private chat, user joined and left notification, user online and offline status, duplicate usernames, error messages, unread messages notification, private chat with multiple users at the same time and much more.

This course is packed with so much knowledge that by the end of this course, you will feel super comfortable to use socket io in your next project to add realtime features nice and easy!

Enroll into this course and take your skill set to a whole new level.

Who this course is for:

Any JavaScript developer looking to build realtime app using react node and socket io

SocketIo React Node Public and Private Chat App

What you'll learn

Explore related topics

Course content

Client and Server Setup7 lectures • 40min

Socket IO Basics and Public Chat5 lectures • 42min

Essentials of chat app15 lectures • 1hr 34min

Private chat6 lectures • 38min

Deployment6 lectures • 1hr 9min

Bonus1 lecture • 1min

Requirements

Description

Who this course is for: