How can I use WebSockets with React?

How can I use WebSockets with React?

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

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>
            <h1>WebSocket Messages</h1>
            <ul>
                {messages.map((msg, index) => <li key={index}>{msg}</li>)}
            </ul>
        </div>
    );
};

This will display messages received from the WebSocket server.

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

You can use the send method of the WebSocket instance. For example:

const sendMessage = (message) => {
    ws.send(message);
};

You can call this function whenever you want to send a message.