useWebSocket()

The useWebSocket() hook manages WebSocket connections, providing automatic reconnection and state management. It includes functions to send messages and callbacks for different WebSocket events.

Import

import { useWebSocket } from 'react-haiku';

Usage

import { useWebSocket } from './path-to-your-hook';

export const WebSocketComponent = () => {
  const { lastMessage, status, sendMessage } = useWebSocket(
    'wss://example.com/socket',
    {
      maxReconnectAttempts: 5,
      reconnectDelay: (attempt) => Math.min(5000, Math.pow(2, attempt) * 1000),
      onOpen: () => console.log('WebSocket opened!'),
      onMessage: (message) => console.log('Received message:', message),
      onError: (error) => console.error('WebSocket error:', error),
      onClose: (event) => console.log('WebSocket closed:', event),
    },
  );

  return (
    <div>
      <h3>WebSocket Status: {status}</h3>
      <p>Last message: {lastMessage}</p>
      <button onClick={() => sendMessage('Hello WebSocket!')}>
        Send Message
      </button>
    </div>
  );
};

Parameters

• url (string) – The WebSocket URL to connect to.
• options (object) – Optional configuration options:
  • maxReconnectAttempts (number) – Max attempts for reconnection. Default is 5.
  • reconnectDelay (function) – A function to calculate the delay between reconnection attempts. Default is exponential backoff.
  • onOpen (function) – Callback function triggered when the WebSocket connection is opened.
  • onMessage (function) – Callback function triggered when a message is received.
  • onError (function) – Callback function triggered when an error occurs.
  • onClose (function) – Callback function triggered when the WebSocket connection is closed.