Creating an Online Chat from Scratch with ReactJS, Socket.io, Node.JS, Express.JS

With the increasing popularity of real-time communication, creating an online chat application has become a common requirement for many web developers. In this article, we will guide you through the process of building a chat application from scratch using ReactJS, Socket.io, Node.JS, and Express.JS.

1. Setting Up the Backend

The first step is to set up the backend server using Node.JS and Express.JS. Start by installing the necessary dependencies:

$ npm install express socket.io

Next, create a new file called `server.js` and implement the basic server boilerplate code:

const express = require('express');
const app = express();
const port = 3000;

const server = app.listen(port, () => {
   console.log('Server is running on port ' + port);
});

const io = require('socket.io')(server);

io.on('connection', (socket) => {
   console.log('New user connected');

   socket.on('disconnect', () => {
      console.log('User disconnected');
   });
});

This code sets up a basic Express server and initiates a Socket.io instance. It also includes a simple event listener for connection and disconnection events.

2. Implementing the Frontend

Next, we will create the frontend for our chat application using ReactJS. Start by creating a new React project:

$ npx create-react-app chat-app

After creating the project, navigate to the project directory and install the necessary dependencies:

$ cd chat-app
$ npm install socket.io-client

Now, open the `src/App.js` file and replace the existing code with the following:

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3000');

function App() {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState('');

   useEffect(() => {
      socket.on('receiveMessage', (message) => {
         setMessages([...messages, message]);
      });
   }, [messages]);

   const handleSubmit = (event) => {
      event.preventDefault();

      if (input.trim() !== '') {
         socket.emit('sendMessage', input);
         setInput('');
      }
   };

   return (
      

         
Chat Application
         

            {messages.map((message, index) => (
               
{message}
            ))}
         
         

             setInput(event.target.value)}
            />
            Send
         
      
   );
}

export default App;

This code sets up the basic structure of our chat application. It establishes a connection with the backend server using Socket.io and sets up event listeners for receiving and sending messages. The received messages are stored in the `messages` state, and the input from the user is sent to the server when the send button is clicked.

3. Connecting the Frontend and Backend

Now that we have both the backend and frontend set up, we need to connect them. In `server.js`, add the following event handlers:

io.on('connection', (socket) => {
   console.log('New user connected');

   socket.on('sendMessage', (message) => {
      io.emit('receiveMessage', message);
   });

   socket.on('disconnect', () => {
      console.log('User disconnected');
   });
});

These event handlers listen for the `sendMessage` event from the frontend and emit a `receiveMessage` event to all connected clients, including the sender. This ensures that all users receive the messages in real-time.

4. Running the Application

To run the application, first start the backend server by running the following command in your terminal:

$ node server.js

Next, navigate to the frontend project directory and start the React development server:

$ npm start

Open your web browser and go to `http://localhost:3000` to see the chat application in action. You can open multiple browser windows and send messages to test the real-time capabilities.

Congratulations! You have successfully created an online chat application from scratch using ReactJS, Socket.io, Node.JS, and Express.JS. You can further enhance the application by implementing features like user authentication, private messaging, or message persistence.