How to implement a custom hook for handling real-time updates with WebSockets in React



Image not found!!

To implement a custom hook for handling real-time updates with WebSockets in React, you can create a hook that manages the WebSocket connection and provides functions to send and receive messages. Here's a basic example of how to create such a custom hook:

jsx
import { useEffect, useRef, useState } from 'react';

const useWebSocket = (url) => {
  const [messages, setMessages] = useState([]);
  const webSocketRef = useRef(null);

  useEffect(() => {
    // Create WebSocket connection
    webSocketRef.current = new WebSocket(url);

    // Event handler for incoming messages
    webSocketRef.current.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages((prevMessages) => [...prevMessages, message]);
    };

    // Clean up WebSocket connection
    return () => {
      webSocketRef.current.close();
    };
  }, [url]);

  // Function to send messages
  const sendMessage = (message) => {
    if (webSocketRef.current.readyState === WebSocket.OPEN) {
      webSocketRef.current.send(JSON.stringify(message));
    }
  };

  return { messages, sendMessage };
};

export default useWebSocket;

In this custom hook:

  • url: The URL of the WebSocket server.
  • messages: An array of received messages.
  • sendMessage: A function to send messages to the WebSocket server.

You can then use this custom hook in your components like this:

jsx
import React, { useState } from 'react';
import useWebSocket from './useWebSocket';

const Chat = () => {
  const [inputValue, setInputValue] = useState('');
  const { messages, sendMessage } = useWebSocket('ws://localhost:8080');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    sendMessage({ text: inputValue });
    setInputValue('');
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message.text}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" value={inputValue} onChange={handleChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default Chat;

In this example, the Chat component uses the useWebSocket hook to manage the WebSocket connection and handle sending and receiving messages. Adjust the hook and component logic according to your specific use case and WebSocket server implementation.

Category List