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

Question

Aryan Kumar · Answer

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.

forum

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

Can you answer this question?

1 Answers