UseWebSocket

import { useWebSocket } from "@hookraft/usewebsocket"

const { status, messages, lastMessage, send, disconnect, reconnect } = useWebSocket({
  url: "wss://api.example.com/chat",
  onConnect: () => console.log("Connected!"),
  onDisconnect: () => console.log("Disconnected"),
  onMessage: (data) => console.log("Received:", data),
  onError: (err) => console.error("Error:", err),
  reconnect: true,
  reconnectAttempts: 5,
  heartbeat: { message: "ping", interval: 30000 },
})

// Without useWebSocket — 70+ lines of manual work
const wsRef = useRef(null)
const reconnectTimerRef = useRef(null)
const reconnectAttempts = useRef(0)
const messageQueue = useRef([])

const connect = () => {
  wsRef.current = new WebSocket("wss://api.example.com")

  wsRef.current.onopen = () => {
    // flush queue, reset attempts...
  }
  wsRef.current.onclose = () => {
    // reconnect with backoff...
  }
  wsRef.current.onerror = () => { /* ... */ }
  wsRef.current.onmessage = (e) => { /* parse, store... */ }
}

// You write all of this. Every time.

// With useWebSocket — everything handled
const { status, messages, send } = useWebSocket({
  url: "wss://api.example.com",
  reconnect: true,
  heartbeat: { message: "ping", interval: 30000 },
})

import { useState } from "react"
import { useWebSocket } from "@hookraft/usewebsocket"

type ChatMessage = {
  id: string
  user: string
  text: string
  timestamp: number
}

function ChatRoom({ roomId }: { roomId: string }) {
  const [input, setInput] = useState("")

  const { status, messages, send, reconnectCount } = useWebSocket<ChatMessage>({
    url: `wss://api.example.com/chat/${roomId}`,
    reconnect: true,
    reconnectAttempts: 10,
    reconnectInterval: 2000,
    heartbeat: {
      message: "ping",
      interval: 30000,
    },
    queueWhileOffline: true,
    onConnect: () => console.log("Joined room"),
    onDisconnect: () => console.log("Left room"),
    onReconnect: (attempt) => console.log(`Reconnecting... attempt ${attempt}`),
    onReconnectFailed: () => console.log("Could not reconnect"),
  })

  const sendMessage = () => {
    if (!input.trim()) return
    send({
      id: crypto.randomUUID(),
      user: "me",
      text: input,
      timestamp: Date.now(),
    })
    setInput("")
  }

  return (
    <div>
      {/* Connection status */}
      <div>
        <span>{status}</span>
        {status === "reconnecting" && (
          <span>Attempt {reconnectCount}</span>
        )}
      </div>

      {/* Messages */}
      <ul>
        {messages.map((msg) => (
          <li key={msg.id}>
            <strong>{msg.user}:</strong> {msg.text}
          </li>
        ))}
      </ul>

      {/* Input */}
      <div>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
          placeholder="Type a message..."
          disabled={status === "error"}
        />
        <button onClick={sendMessage} disabled={status === "error"}>
          Send
        </button>
      </div>
    </div>
  )
}

import { useWebSocket } from "@hookraft/usewebsocket"

type StockUpdate = {
  symbol: string
  price: number
  change: number
}

function StockTicker() {
  const { lastMessage, status, isConnected } = useWebSocket<StockUpdate>({
    url: "wss://api.example.com/stocks",
    reconnect: true,
    messageLimit: 1, // we only care about the latest price
    onMessage: (data) => console.log(`${data.symbol}: $${data.price}`),
  })

  return (
    <div>
      <span>{isConnected ? "Live" : "Offline"}</span>

      {lastMessage && (
        <div>
          <span>{lastMessage.symbol}</span>
          <span>${lastMessage.price.toFixed(2)}</span>
          <span style={{ color: lastMessage.change >= 0 ? "green" : "red" }}>
            {lastMessage.change >= 0 ? "+" : ""}{lastMessage.change.toFixed(2)}%
          </span>
        </div>
      )}
    </div>
  )
}

import { useWebSocket } from "@hookraft/usewebsocket"

function LiveNotifications() {
  const { status, messages, connect, disconnect, isConnected } = useWebSocket({
    url: "wss://api.example.com/notifications",
    autoConnect: false, // don't connect on mount
    reconnect: true,
  })

  return (
    <div>
      <button onClick={isConnected ? disconnect : connect}>
        {isConnected ? "Turn off live updates" : "Turn on live updates"}
      </button>

      <p>Status: {status}</p>

      <ul>
        {messages.map((msg, i) => (
          <li key={i}>{String(msg)}</li>
        ))}
      </ul>
    </div>
  )
}

import { useWebSocket } from "@hookraft/usewebsocket"

type ServerEvent = {
  type: "message" | "system" | "heartbeat"
  payload: unknown
}

function EventStream() {
  const { messages } = useWebSocket<ServerEvent>({
    url: "wss://api.example.com/events",
    // Custom parser — skip heartbeat messages
    parseMessage: (raw) => {
      try {
        const parsed = JSON.parse(raw) as ServerEvent
        if (parsed.type === "heartbeat") return null // skip
        return parsed
      } catch {
        return null
      }
    },
  })

  return (
    <ul>
      {messages.map((event, i) => (
        <li key={i}>
          [{event.type}] {JSON.stringify(event.payload)}
        </li>
      ))}
    </ul>
  )
}

import { useWebSocket } from "@hookraft/usewebsocket"

function App() {
  const { send, queuedCount, status } = useWebSocket({
    url: "wss://api.example.com",
    queueWhileOffline: true, // default
  })

  return (
    <div>
      <p>Status: {status}</p>
      {queuedCount > 0 && (
        <p>{queuedCount} message(s) queued — will send when connected</p>
      )}

      {/* This works even before the connection opens */}
      <button onClick={() => send({ text: "Hello!" })}>
        Send (queued if offline)
      </button>
    </div>
  )
}

Attempt 1 → wait 2s  → reconnect
Attempt 2 → wait 4s  → reconnect
Attempt 3 → wait 8s  → reconnect
Attempt 4 → wait 16s → reconnect
Attempt 5 → wait 30s → reconnect (max interval)
             ↓
         onReconnectFailed fires
         status → "error"

useWebSocket({
  url: "wss://api.example.com",
  heartbeat: {
    message: "ping",    // what to send
    interval: 30000,    // every 30 seconds
  },
})