Using Socket.io and React to Develop a Chat Application

<<Using Socket.io and React to Develop a Chat Application>>

Socket.io and React are two powerful technologies that can be combined to create real-time
applications like chat applications. This article will guide you through building a simple
chat application using Socket.io and React.

Setting Up the Project

Firstly, create a new React project using Create React App and install Socket.io.

npx create-react-app socket-io-chat
cd socket-io-chat
npm install socket.io-client

Setting Up the Server

We'll use a simple Express server with Socket.io to handle the real-time communication.

      
      
// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: '*',
  },
});

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

  socket.on('send_message', (data) => {
    io.emit('receive_message', data);
  });

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

server.listen(4000, () => {
  console.log('Server running on http://localhost:4000');
});

Creating the React Client

Let's create the React client to send and receive messages.

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

const socket = io.connect('http://localhost:4000');

function App() {
  const [message, setMessage] = useState('');
  const [chat, setChat] = useState([]);

  useEffect(() => {
    socket.on('receive_message', (data) => {
      setChat([...chat, data]);
    });
  }, [chat]);

  const sendMessage = () => {
    socket.emit('send_message', { message });
    setMessage('');
  };

  return (
    <div className="App">
      <h1>Socket.io Chat App</h1>
      <div className="chat-window">
        {chat.map((data, index) => (
          <div key={index} className="message">
            <p>{data.message}</p>
          </div>
        ))}
      </div>
      <div className="input-container">
        <input
          type="text"
          placeholder="Enter message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
}

export default App;

Styling the Chat App

Let's add some basic styling to our chat application.

/* App.css */
.App {
  text-align: center;
  margin-top: 50px;
}

.chat-window {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
}

.message {
  background-color: #f2f2f2;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.input-container {
  margin-top: 20px;
}

input[type='text'] {
  padding: 10px;
  width: 60%;
}

button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

Running the Application

To run the application, start the server and then the React app.

      
      
node server.js
npm start

Open your browser and navigate to http://localhost:3000. You should see the
chat application where you can send and receive messages in real-time.

Conclusion

Building a chat application with Socket.io and React is relatively straightforward and
offers a powerful way to create real-time applications. With the code and concepts presented
in this article, you should have a good starting point for developing more advanced and
feature-rich chat applications using Socket.io and React.