DEV Community

loading...
Cover image for Create a chat app with Nodejs and Reactjs

Create a chat app with Nodejs and Reactjs

h_mobarakian
nodejs developer
・3 min read

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);
            }

        })
    })
});

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)