Create a chat app with Nodejs and Reactjs
Tags: node, react, socket, realtime
Published: 2021-06-24 07:07:41

Hello, in this section I'll show you how to create a simple chat app with Nodejs and Reactjs.
To install dependencies we need, Run the command below:
`npx create-react-app chatapp-client
cd chatapp-client
npm i socket.io-client`
After building the client app, We must create a server app to communicate between users.
`cd ..
mkdir chatapp-server && cd chatapp-server
npm i socket.io express cors`
Well, we completely installed dependencies, So we can import and expand our code.
# Server side codes
Now, create **index.js** file in **chatapp-server** directory and put this code in to it:
```javascript
const express = require("express");
const app = express();
const sockets = require('socket.io');
const cors = require("cors");
const usernames = [];
let messageId = 0;
const messages = [];

app.use(cors());
app.get("/", (req, res) => {
    res.send("salam");
})

const server = app.listen(80, () => {
    console.log("server started at 80!");
});

const io = sockets(server, {
    cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"]
    },
});

io.on("connection", function (socket) {
    console.log(socket.id + "- is connected");

    socket.on("username", (username) => {
        usernames.push({ username, socketId: socket.id });
        io.emit("updateUsers", usernames);
    })

    socket.on("message", (message) => {
        if (messages.includes(message) == -1) return 0;
        message.id =messageId;
        messageId++;
        io.emit("reciveMessage", message);

    })

    socket.on("disconnect", () => {
        usernames.forEach((username, index) => {

            if (username.socketId == socket.id) {
                usernames.splice(index, 1);
                console.log("disconnected:" + username.username);
            }

        })
    })
});

```
# Client side codes
Good, in the next step open **App.js** in **chatapp-client/src/** and importing this codes:
```javascript
import './App.css';
import { useEffect, useState , useReducer } from 'react';
var socket = io("ws://localhost:80", {});
var cacheMessages = [];

function App() {

  const [username, setUsername] = useState("#" + Math.floor(Math.random()*9999999));

  useEffect(() => {
    socket.emit("username", username);
  }, []);

  return (
    <div className="App">

      <UserList username={username}/>
      <Messages username={username}/>



      <MessageInput username={username} />
    </div>
  );
}

const UserList = ({username}) => {
  const [users, setUsers] = useState([]);
  socket.on("updateUsers", (data) => {
    setUsers(data);
  })
  return (
    <ul className="users">
      {
        users.map((user) => {
          return (<li className={(user.username == username)?"user my-id":"user"} key={user.socketId}>{user.username}</li>);
        })
      }
    </ul>
  );
};

const Messages = ({ username }) => {
  const [messages, setMessages] =useReducer(
    (state, newState) =>{
      for (const index in state) {
        if(state[index].id == newState.id) return state;
      }
      return [...state, newState]
    },
    []
  );

  useEffect(()=>{
    cacheMessages=messages;

  },[messages]);

  socket.on("reciveMessage", (data) => {

    let youCanAddMessage = true;
    cacheMessages.forEach(message => {
      if (message.id == data.id) youCanAddMessage = false;
    })
    if (!youCanAddMessage) return 0;
    
    setMessages(data);
  
  })
  return (
    <div className="message-box">
      {
        messages.map((message) => {
          return (<p className="message" key={message.id}> <span className={(message.username ==username )?"my-id":""}>{message.username +": "}</span>{message.text}</p>);
        })
      }
    </div>
  );
};

const MessageInput = ({ username }) => {
  const [text, setText] = useState("");

  function messageHandler(e) {
    setText(e.target.value);
  }

  function sendMessage(e) {
    e.preventDefault();
    socket.emit("message", { username, text, id: 0 });
    setText("");

  }

  return (
    <div className="input">
      <input className="message-input" onChange={messageHandler} value={text} />

      <button className="send-button" onClick={sendMessage}> send </button>
    </div>
  );
}
export default App;

```
Do some styles into **App.css**:
```css
body{
  background-color: rgb(13, 29, 53);
}
.users{
  list-style:none;
  width:180px;
  position : fixed;
  height: 100%;
  left:0;
  padding: 0 10px;
  margin: 0;
  top: 0;
  background-color: rgb(13, 29, 53);
  color: #fff;
}
.users .user{
  cursor:pointer;
  padding: 5px 0px;
}
.my-id{
  color: rgb(166, 166, 253);
}
.input{
  position: fixed;
  left: 200px;
  bottom: 0;
  height: 50px;
  width: calc(100% - 200px);
  background-color: rgb(13, 29, 53);
}
.input .message-input{
  width: calc(100% - 100px);
  height: 90%;
  margin: 0;
  padding: 0;
  padding-left: 20px;
  border-radius:8px;
  background-color: rgb(5, 14, 29);
  border: none;
  color: white;
  
}
.input .send-button{
  height: 90%;
  margin: 0 5px;
  width: 60px;
  border-radius:8px;
  background-color: rgb(26, 57, 104);
  color: #fff;
  border: none;
}
.message-box{
  width: calc(100% - 210px);
  position: fixed;
  left: 200px;
  top:0;
  height: calc(100% - 60px);
  border: 1px solid rgb(5, 14, 29);
  padding-left: 5px;
  border-radius: 8px;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgb(5, 50, 80) rgb(5, 14, 29);
 
}
.message-box::-webkit-scrollbar {
  width: 11px;
}

.message-box::-webkit-scrollbar-track {
  background: rgb(5, 50, 80);
}
.message-box::-webkit-scrollbar-thumb {
  background-color: rgb(5, 50, 80) ;
  border-radius: 8px;
  border: 3px solid rgb(5, 14, 29);
}
.message{
  padding: 10px;
  border: 1px solid rgb(5, 14, 29);
  border-radius:8px ;
  color:#fff;
  cursor:pointer;
}
```
Guys, this article has ended, and in the next article, I'll show you how to share files between users. 
What do you like I'm creating for you in the next projects? Leave a comment to me. I hope you enjoy this article, I see you later.