Create a chat app with Nodejs and Reactjs

#node #react #socket #realtime

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:

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:

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:

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.