forum

Home / DeveloperSection / Forums / Create a React component that displays real-time data using WebSocket for server updates.

Ask Question

Create a React component that displays real-time data using WebSocket for server updates.

Steilla Mitchel22326-Jul-2023

Create a React component that displays real-time data using WebSocket for server updates.

javascriptjavascript reactjs  mern 
Updated on 27-Jul-2023
Steilla Mitchel

Steilla Mitchel

Follow
I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

27-Jul-2023

Sure, here is an example of a React component that displays real-time data using WebSocket for server updates:

JavaScript

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

const RealtimeData = ({ url }) => {
  const [data, setData] = useState([]);
  const [ws, setWs] = useState(null);

  useEffect(() => {
    const ws = new WebSocket(url);
    ws.onopen = () => {
      console.log('Websocket opened');
    };
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setData(data);
    };
    setWs(ws);
  }, []);

  return (
    <div>
      <h2>Real-time Data</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default RealtimeData;

This component uses the useState hook to store the data that is received from the WebSocket connection. The useEffect hook is used to open the WebSocket connection and listen for messages from the server.

The component then uses the WebSocket object to open a connection to the WebSocket server. The onopen event handler is used to log a message to the console when the connection is opened. The onmessage event handler is used to parse the data that is received from the server and store it in the data state variable.

Finally, the component renders a list of the data that is received from the server.

To use this component, you would need to provide the url prop with the URL of the WebSocket server. You could then use the component to display a real-time list of data that is updated by the server.

Here is an example of how you could use the RealtimeData component:

JavaScript

const url = 'ws://localhost:8080/data';

const App = () => {
  return (
    <RealtimeData url={url} />
  );
};

export default App;

This code would open a WebSocket connection to the ws://localhost:8080/data WebSocket server. The component would then listen for messages from the server and update the list of data accordingly.

MindStick Training

Liked By