// Базовое использование
const ws = new WebSocket('wss://api.example.com/ws')

ws.onopen = () => {
  console.log('Соединение установлено')
  ws.send(JSON.stringify({ type: 'auth', token: 'abc123' }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log('Получено:', data)
}

ws.onerror = (error) => {
  console.error('Ошибка WebSocket:', error)
}

ws.onclose = (event) => {
  console.log('Соединение закрыто:', event.code, event.reason)
  // Коды: 1000 (норма), 1001 (уходит), 1006 (аварийно), 1011 (ошибка сервера)
}

// Отправка
ws.send(JSON.stringify({ type: 'message', text: 'Привет!' }))

// Закрытие
ws.close()

import { useState, useEffect, useRef, useCallback } from 'react'

function useWebSocket(url) {
  const ws = useRef(null)
  const [status, setStatus] = useState('disconnected')  // connecting | connected | disconnected
  const [messages, setMessages] = useState([])
  const reconnectTimer = useRef(null)
  const reconnectAttempts = useRef(0)

  const connect = useCallback(() => {
    if (ws.current?.readyState === WebSocket.OPEN) return

    setStatus('connecting')
    ws.current = new WebSocket(url)

    ws.current.onopen = () => {
      setStatus('connected')
      reconnectAttempts.current = 0
      console.log('WebSocket подключён')
    }

    ws.current.onmessage = (event) => {
      const data = JSON.parse(event.data)
      setMessages(prev => [...prev, data])
    }

    ws.current.onclose = () => {
      setStatus('disconnected')
      // Экспоненциальный backoff: 1с, 2с, 4с, 8с...
      const delay = Math.min(1000 * 2 ** reconnectAttempts.current, 30000)
      reconnectAttempts.current++
      console.log('Переподключение через ' + delay + 'мс...')
      reconnectTimer.current = setTimeout(connect, delay)
    }

    ws.current.onerror = () => {
      ws.current.close()
    }
  }, [url])

  useEffect(() => {
    connect()
    return () => {
      clearTimeout(reconnectTimer.current)
      ws.current?.close(1000, 'Компонент размонтирован')
    }
  }, [connect])

  const send = useCallback((data) => {
    if (ws.current?.readyState === WebSocket.OPEN) {
      ws.current.send(JSON.stringify(data))
    }
  }, [])

  return { status, messages, send }
}

function ChatRoom({ roomId }) {
  const { status, messages, send } = useWebSocket(
    `wss://api.example.com/chat/${roomId}`
  )
  const [text, setText] = useState('')

  const handleSend = () => {
    if (!text.trim()) return
    send({ type: 'message', text, timestamp: Date.now() })
    setText('')
  }

  return (
    <div>
      <div>Статус: {status}</div>
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i}>{msg.author}: {msg.text}</div>
        ))}
      </div>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && handleSend()}
      />
      <button onClick={handleSend} disabled={status !== 'connected'}>
        Отправить
      </button>
    </div>
  )
}

// Сервер (Node.js)
import { Server } from 'socket.io'
const io = new Server(httpServer)

io.on('connection', (socket) => {
  socket.join('general')  // комнаты

  socket.on('message', (data) => {
    // Отправить всем в комнате кроме себя
    socket.to('general').emit('message', data)
  })

  socket.on('disconnect', () => {
    console.log('Пользователь отключился')
  })
})

// Клиент (React)
import { io } from 'socket.io-client'

function useChatSocket(room) {
  const socket = useRef(null)

  useEffect(() => {
    socket.current = io('https://api.example.com', {
      query: { room },
      reconnectionDelay: 1000,
      reconnectionAttempts: 5,
    })

    socket.current.on('message', handleMessage)

    return () => socket.current.disconnect()
  }, [room])

  const sendMessage = (text) => {
    socket.current.emit('message', { text })
  }

  return { sendMessage }
}

// Экспоненциальный backoff с jitter
function getReconnectDelay(attempt, baseDelay = 1000, maxDelay = 30000) {
  const exponential = baseDelay * Math.pow(2, attempt)
  const capped = Math.min(exponential, maxDelay)
  // Jitter: добавляем случайность, чтобы клиенты не подключались одновременно
  const jitter = Math.random() * 0.3 * capped
  return capped + jitter
}

// attempt=0: ~1000мс, attempt=1: ~2000мс, attempt=2: ~4000мс...