How can I use WebSockets in my React application?

How can I use WebSockets in my React application?

You can use the WebSocket API to establish a connection in your React app. First, create a WebSocket instance with the server URL.

Can you show me a code example?

Sure! Here's a simple example:

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

const WebSocketComponent = () => {
    const [messages, setMessages] = useState([]);
    const ws = new WebSocket('ws://your-websocket-url');

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

    return <div>{messages.map((msg, index) => <p key={index}>{msg}</p>)}</div>;
};

This sets up a WebSocket connection and listens for messages.

What if I want to send messages back to the server?

You can use the ws.send() method to send messages. Just call it with the message you want to send, like this:

ws.send('Hello Server!');