React-SocketIO-Chatroom

nodejs-socketio-chatroom.md

Basic knowledge

1. HTML
   W3Schools HTML Tutorial
   W3Schools HTML Reference

2. CSS
   W3Schools CSS Tutorial
   W3Schools CSS Reference

3. SCSS/SASS
   The definitive guide to SCSS

4. Javascript
   W3Schools JavaScript Tutorial
   W3Schools JavaScript Reference
   MDN JavaScript

5. NodeJS
   NodeSchool
   NodeJS Official Documentation

6. Text Editor Google Search: popular Text Editor
   I used Visual Studio Code.

If you have no basic knowledge, you won't be able to go to the next step.

---

Design your chatroom

This is my chatroom. >>>>> JS Bin on jsbin.com

---

Create React App

Google Search: Create React App

npx create-react-app my-app
The "my-app" is your project folder name.
In this video, we are using "react-socketio-chatroom".
npx create-react-app react-socketio-chatroom
Now, we go to the folder "react-socketio-chatroom"
cd react-socketio-chatroom

Check files.
In linux/macOS, we using command ls
linux command ls

In windows, we using command dir
Windows-commands dir

---

Install Sass-loader and sass (for SCSS)

sass
sass-loader
Use NPM(Node Package Manager) install sass and sass-loader
npm install -d sass sass-loader

Runs the app in development mode

npm run start

---

Use Text Editor open this project folder.

---

Create A New React Component

React offical doc: Your First Component
Class Name

• Chatroom

• Message-box

• Log

• Passing Props

Passing Props to A Component

• Put all the logs into an array.

JavaScript Arrow Function
Keeping list items in order with key

---

Get Message Box data

Type 1: React Form Submitting Forms - Multiple Input Fields

1. Add the "onSubmit" attribute to the "<form>" and create the corresponding handler function.
2. Get the event target, make sure the target is "<form>".
3. Get FormData.
4. Transform formData to jsonObj
5. Avoid empty message.
6. Clean textarea.
7. Passing Props Function.
8. Keydown Event.

Type 2: React Hooks - useRef - Manipulating the DOM with a ref

1. Add the "onClick" attribute to the "<form>" and create the corresponding handler function.
2. Use your "ref objects" by passing them as the ref attribute to both the and <textarea> elements.
3. Get 'user' data and 'message' data.
4. Create jsonObj.
5. Avoid empty message.
6. Clean textarea
7. Passing Props Function.
8. Keydown Event.

Add new log to logs array.

React Hooks - useState

If you pass a function as nextState, it will be treated as an updater function. It must be pure, should take the pending state as its only argument, and should return the next state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state.

Auto Scroll Down

React Hooks - useRef - Manipulating the DOM with a ref HTML Element Scroll Height HTML Element Scroll To

---

SocketIO > Offical Documentation

Install

For Server Side npm install socket.io doc
For Client Side npm install socket.io-client doc

Basically, you need to install the following packages:

npm install express cors socket.io socket.io-client

express, cors, socket.io is for server

Server Side Data Flow Design.

After a client connection is created, the 'socketIO' server will start listening to the following events:

socket.on('joinRoom',  ******
socket.on('leaveRoom', 
socket.on('new message', (msgObj) => {
  // When a client sends the 'new message' event, the server will broadcast the message to all members of the room.
  io.to(msgObj.roomId).emit('server message', msgObj);
});

You can get server file in here

Connect to SocketIO server

We use React Hooks - useState to store socket connection.

• After the socket variable has been set, we need to register other events.
• Edit send message function
• Testing message sending in a different window.

Build

In this moment, we run two process of nodeJS in our computer

1. npm run start means "run the application in development mode."
2. npm run start:server mean "run the server".

We need to bring all these steps together and make a production build.
Use:
npm run build
and
npm run start:server again

We can access the chatroom at http://localhost:8080.
If you wish to access the chatroom, you can replace the word "localhost" with the IP address of the computer running the server.

To find the IP address of your LAN network, you can use the 'ifconfig' command (Mac/Linux). For windows, you can use the 'ipconfig' command.

---

Full source code at here https://github.com/yesseecity/React-Socketio-Chatroom/tree/main