useWebSocket

Live Demo

Connect to a WebSocket server, send messages, and see automatic reconnection in action. Try disconnecting and sending messages - they'll be queued and sent automatically on reconnection!

Code Examples

Basic Usage

import { useWebSocket, WebSocketStatus } from "@uiblock/hooks";

export default function Chat() {
  const { status, lastMessage, send } = useWebSocket(
    'wss://your-websocket-server.com'
  );

  const sendMessage = (text: string) => {
    send(JSON.stringify({ type: 'message', text }));
  };

  return (
    <div>
      <div>Status: {status}</div>
      {lastMessage && <div>Last: {lastMessage.data}</div>}
      <button onClick={() => sendMessage('Hello!')}>
        Send
      </button>
    </div>
  );
}

With Reconnection Logic

import { useWebSocket } from "@uiblock/hooks";
import { useState } from "react";

export default function RealtimeData() {
  const [data, setData] = useState([]);

  const { status, send, reconnect } = useWebSocket(
    'wss://api.example.com/stream',
    {
      reconnect: true,
      reconnectAttempts: 10,
      reconnectInterval: 5000,
      onOpen: () => {
        console.log('Connected!');
        // Subscribe to data stream
        send(JSON.stringify({ action: 'subscribe' }));
      },
      onMessage: (event) => {
        const message = JSON.parse(event.data);
        setData(prev => [...prev, message]);
      },
      onClose: () => {
        console.log('Disconnected');
      },
      onError: () => {
        console.error('WebSocket error');
      }
    }
  );

  return (
    <div>
      <div>Status: {status}</div>
      <button onClick={reconnect}>Reconnect</button>
      <ul>
        {data.map((item, i) => (
          <li key={i}>{JSON.stringify(item)}</li>
        ))}
      </ul>
    </div>
  );
}

Message Queue

import { useWebSocket } from "@uiblock/hooks";

export default function MessageQueue() {
  const { status, send, messageQueue } = useWebSocket(
    'wss://api.example.com/ws'
  );

  // Messages sent while disconnected are queued
  const sendMessage = (msg: string) => {
    send(msg);
    // If disconnected, message is added to queue
    // When reconnected, all queued messages are sent automatically
  };

  return (
    <div>
      <div>Status: {status}</div>
      {messageQueue.length > 0 && (
        <div>
          {messageQueue.length} message(s) queued
        </div>
      )}
      <button onClick={() => sendMessage('Hello')}>
        Send Message
      </button>
    </div>
  );
}

Manual Control

import { useWebSocket } from "@uiblock/hooks";
import { useState } from "react";

export default function ManualControl() {
  const [url, setUrl] = useState<string | null>(null);

  const { 
    status, 
    connect, 
    disconnect, 
    reconnect 
  } = useWebSocket(url);

  const handleConnect = () => {
    setUrl('wss://api.example.com/ws');
  };

  const handleDisconnect = () => {
    setUrl(null);
    disconnect();
  };

  return (
    <div>
      <div>Status: {status}</div>
      <button onClick={handleConnect}>Connect</button>
      <button onClick={handleDisconnect}>Disconnect</button>
      <button onClick={reconnect}>Reconnect</button>
    </div>
  );
}

Custom Reconnection Logic

import { useWebSocket } from "@uiblock/hooks";

export default function CustomReconnect() {
  const { status } = useWebSocket(
    'wss://api.example.com/ws',
    {
      reconnect: true,
      reconnectAttempts: 5,
      reconnectInterval: 3000,
      shouldReconnect: (event) => {
        // Only reconnect for specific close codes
        // 1000 = normal closure, don't reconnect
        // 1006 = abnormal closure, reconnect
        return event.code !== 1000;
      },
      onOpen: () => {
        console.log('Connected');
      },
      onClose: (event) => {
        console.log(`Closed with code: ${event.code}`);
      }
    }
  );

  return <div>Status: {status}</div>;
}

Chat Application

import { useWebSocket, WebSocketStatus } from "@uiblock/hooks";
import { useState } from "react";

interface ChatMessage {
  user: string;
  text: string;
  timestamp: string;
}

export default function ChatApp() {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [input, setInput] = useState('');

  const { status, send } = useWebSocket(
    'wss://chat.example.com',
    {
      onMessage: (event) => {
        const message = JSON.parse(event.data);
        setMessages(prev => [...prev, message]);
      }
    }
  );

  const sendMessage = () => {
    if (input.trim()) {
      send(JSON.stringify({
        user: 'Me',
        text: input,
        timestamp: new Date().toISOString()
      }));
      setInput('');
    }
  };

  const isConnected = status === WebSocketStatus.CONNECTED;

  return (
    <div>
      <div>
        {messages.map((msg, i) => (
          <div key={i}>
            <strong>{msg.user}:</strong> {msg.text}
          </div>
        ))}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
        disabled={!isConnected}
      />
      <button onClick={sendMessage} disabled={!isConnected}>
        Send
      </button>
    </div>
  );
}

API Reference

💡 Use Cases

• Real-time chat applications
• Live data streaming (stock prices, sports scores)
• Collaborative editing tools
• Gaming applications
• IoT device monitoring
• Live notifications
• Real-time dashboards