This mini local chat web-app showcases the implementation of socket.io via simple chat user-interface where multiple users(sockets) can chat either with particular user(socketId) or they all can join a common room to chat.
- Frontend: ReactJs, Material UI
- Backend: NodeJs, ExpressJs, Socket.io, cors
-
Download Code-Zip folder or Git Clone the repo.
-
Open the Folder in your VS code.
-
Open its built-in Terminal.
-
Use 2 terminal windows to run frontend and backend server separately.
-
Start the backend first, steps for (terminal 01)
cd server/ npm install npm run dev- Now, Start the frontend (terminal 02)
cd client/ npm install npm run dev-
In terminal 02, a localhost-url will appear.
-
Open that url in your browser.
-
Open Multiple browser windows to chat between them.
- Note: Use Incognito windows
- Each window will work as an individual user.
- Send messages to particular user with the socket id mentioned at the top:
- COPY the socket ID of the user you want to send message to. (id mentioned at the top)
- Then PASTE that Id in the Private Room Id field.
- Write your message for that user.
- Press Enter or Click Send.
- The user will get message(s) in its recieved section. 🎉
- Join and Chat in custom Room:
- Enter custom_room_name from first user to create the room, then Click Join.
- Then Join same named room from other user(s).
- Now, mention the room_name for one time in joined-room-field, Now just send your messages.
- And voila 🎉 you messages are now shown in the received section for other users.
- Note: atleast one other user should be joined the same-room to see the chats appear.
- That's it!