Post
Ask Question

React and WebSockets: A Perfect Pair

In today's digital age, real-time communication has become an essential feature in many web applications. From live updates to instant messaging, users expect a seamless and interactive experience. In this article, we will explore how to build a real-time chat application using React and WebSockets.

Introduction

WebSockets are a bi-directional communication protocol that allows for real-time communication between a client and a server. Unlike traditional HTTP requests, WebSockets establish a persistent connection between the client and server, enabling the server to push updates to the client in real-time.

Setting up the Project

  1. To get started, create a new React project using create-react-app. 
    npx create-react-app react-chat-app
  2. Next, install the required dependencies. 
    npm install ws
  3. The package provides a WebSocket implementation for Node.js.

Creating the WebSocket Server

Create a new file called server.js and add the following code.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

This code sets up a WebSocket server that listens for incoming connections on port 8080. When a client connects, it logs a message to the console and sets up event listeners for incoming messages and disconnections.

Creating the React Client

Create a new file called App.js and add the following code.

import React, { useState, useEffect } from 'react';
import WebSocket from 'ws';

function App() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const ws = new WebSocket('ws://localhost:8080');

  useEffect(() => {
    ws.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };

    ws.onopen = () => {
      console.log('Connected to the WebSocket server');
    };

    ws.onerror = (event) => {
      console.log('Error occurred');
      console.log(event);
    };

    ws.onclose = () => {
      console.log('Disconnected from the WebSocket server');
    };

    return () => {
      ws.close();
    };
  }, [ws]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSendMessage = () => {
    ws.send(inputValue);
    setInputValue('');
  };

  return (
    <div>
      <h1>Real-Time Chat Application</h1>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="Type a message..."
      />
      <button onClick={handleSendMessage}>Send</button>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Export default App

This code sets up a React client that connects to the WebSocket server and establishes a real-time communication channel. When the user types a message and clicks the send button, the message is sent to the server, which then broadcasts it to all connected clients.

Conclusion

In this article, we have explored how to build a real-time chat application using React and WebSockets. By leveraging the power of WebSockets, we can create interactive and engaging user experiences that meet the demands of today's digital age.

Thank You!

I hope that the insights and information shared have inspired, educated, or entertained you in some way. I'm grateful for your loyalty and support, and I look forward to continuing to provide you with high-quality content in the future.


Similar Articles