React and WebSockets: A Guide to Real-Time Development

December 06, 2023

React and WebSocket A Guide to Real Time Development

In today’s fast-paced world, real-time communication is no longer an add-on but a necessity for web applications. Real-time communication is a must to build live dashboards, chat applications, or a collaborative editing platform. Luckily, you don’t have to use complex third-party tools to integrate real-time communication in your apps. All you need is React WebSockets.

Table of Contents

They help you achieve bidirectional, real-time communication & bridge the divide between the server and the client. In this article, we will discuss React WebSocket integration with practical examples and help you learn how to add real-time features to your app using React and WebSockets.

Understanding React WebSocket Integration

As we know, React is a widely popular choice for building user interfaces, while WebSockets is a communication protocol. Integrating the two helps developers create real-time, dynamic web applications that don’t need polls or refreshes to update constantly, making React and WebSockets the go-to duo for designing advanced live web applications.

Benefits of React WebSocket Integration

Knowing how React and WebSockets work, it is essential to understand why the mix is the right one.

Real-Time Updates – WebSockets delivers real-time updates to the users. It keeps your data fresh and up-to-date, whether it’s messages in a chat app, live scores in a sports app, or stock updates in a trading app.

Improved User Experience – WebSockets’ real-time, dynamic updates help better user experience by slashing the latency between actions and responses.

Reduced Server Load – Unlike other polling mechanisms, WebSockets preserves connectivity. They don’t need frequent requests from the client and can function independently, reducing the server load and bandwidth consumption.

Cost-Efficient – Less bandwidth consumption and server loads mean more savings, making React WebSocket-based applications cost-efficient.

React WebSocket Integration: A Step-by-Step Guide

Knowing the how and the why behind React WebSockets, let’s now turn to its implementation.

Step 1 a Setting Up a React Application

Assuming you have Node.js installed, the first step is to create a React App.

npx create-react-app react-websocket-example

cd react-websocket-example

Step 2 a Adding WebSocket Support

The next step is to install a WebSocket library using yarn or npm. A library is essential to implement WebSockets, and ‘socket.io-client’ is one popular choice.

npm install socket.io-client

Step 3 à Creating a WebSocket Component

The third step is to create a WebSocket component to handle the connection and auto-update the React state. Here’s how.

// WebSocketComponent.js

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

import io from 'socket.io-client';

const WebSocketComponent = () => {

  const [message, setMessage] = useState('');

  useEffect(() => {

    const socket = io('ws://your-server-url'); // Replace with your WebSocket server URL

    socket.on('message', (data) => {

      setMessage(data);

    });

    return () => {

      socket.disconnect();

    };

  }, []);

  return (

    <div>

      <h1>React WebSocket Example</h1>

      <p>{message}</p>

    </div>

  );

};

export default WebSocketComponent;

In the example above, we imported ‘io’ from ‘socket.io-client’, established a React WebSocket connection with the server, & updated the component state to handle updates on the go.

Step 4 a Using the WebSocket Component

After setting up a React app, adding WebSocket support, & creating a WebSocket component, the next step is to use it.

// App.js

import React from 'react';

import WebSocketComponent from './WebSocketComponent';

function App() {

  return (

    <div className="App">

      <WebSocketComponent />

    </div>

  );

}

export default App;

Step 5 a Launching the Application

Done? Now launch. You can use the npm start to fire up your new app. This will launch the application, & you should see ‘React WebSocket Example’ on top. For real-time updates, the next step is to connect it to the WebSocket server. And like above, you can create one using ‘socket.io’ on the server side.

React WebSocket Example: Building a Chat App

To better understand how React and WebSocket integration work, let’s design a dynamic chat application. Here’s how.

// Chat.js

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

import io from 'socket.io-client';

const Chat = () => {

  const [messages, setMessages] = useState([]);

  const [newMessage, setNewMessage] = useState('');

  const socket = io('ws://your-server-url'); // Replace with your WebSocket server URL

  useEffect(() => {

    // Listen for incoming messages

    socket.on('message', (data) => {

      setMessages([...messages, data]);

    });

    // Clean up the socket connection on unmount

    return () => {

      socket.disconnect();

    };

  }, [messages]);

  const sendMessage = () => {

    if (newMessage) {

      socket.emit('message', newMessage);

      setNewMessage('');

    }

  };

  return (

    <div>

      <h1>React WebSocket Chat</h1>

      <div className="message-container">

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

          <div key={index} className="message">

            {message}

          </div>

        ))}

      </div>

      <div className="input-container">

        <input

          type="text"

          placeholder="Type your message..."

          value={newMessage}

          onChange={(e) => setNewMessage(e.target.value)}

        />

        <button onClick={sendMessage}>Send</button>

      </div>

    </div>

  );

};

export default Chat;

Done? Now incorporate the ‘chat’ component in your ‘App.js’ file. This will allow you to use the feature in your application. Here’s how.

// App.js

import React from 'react';

import Chat from './Chat';

function App() {

  return (

    <div className="App">

      <Chat />

    </div>

  );

}

export default App;

Final Word

So, now you know how to use React WebSocket integration to build real-time, dynamic web applications. However, it isn’t the only way to do so. You can even add React-Native and Redux to the mix for added functionality. But that’s a topic for another day!