Базовый composable: ```javascript // composables/useWebSocket.js import { ref, onUnmounted } from 'vue' export function useWebSocket(url, options = {}) { const { autoReconnect = true, reconnectDelay = 1000, maxReconnectAttempts = 10, heartbeatInterval = 30000 } = options const data = ref(null) const status = ref('CLOSED') // CONNECTING | OPEN | CLOSED const error = ref(null) let ws = null let reconnectAttempts = 0 let reconnectTimer = null let heartbeatTimer = null const listeners = new Map() function connect() { if (ws?.readyState === WebSocket.OPEN) return status.value = 'CONNECTING' ws = new WebSocket(url) ws.onopen = () => { status.value = 'OPEN' error.value = null reconnectAttempts = 0 startHeartbeat() } ws.onmessage = (event) => { try { const parsed = JSON.parse(event.data) data.value = parsed // Вызываем конкретные обработчики по типу const handler = listeners.get(parsed.type) if (handler) handler(parsed.payload) } catch { data.value = event.data } } ws.onerror = (event) => { error.value = event } ws.onclose = () => { status.value = 'CLOSED' stopHeartbeat() if (autoReconnect && reconnectAttempts < maxReconnectAttempts) { const delay = reconnectDelay * Math.pow(2, reconnectAttempts) reconnectTimer = setTimeout(() => { reconnectAttempts++ connect() }, delay) } } } function send(messageData) { if (ws?.readyState !== WebSocket.OPEN) { console.warn('WebSocket не подключён') return } ws.send( typeof messageData === 'string' ? messageData : JSON.stringify(messageData) ) } function on(type, handler) { listeners.set(type, handler) } function off(type) { listeners.delete(type) } function close() { clearTimeout(reconnectTimer) stopHeartbeat() reconnectAttempts = maxReconnectAttempts // Не реконнектиться ws?.close() } function startHeartbeat() { heartbeatTimer = setInterval(() => { send({ type: 'ping' }) }, heartbeatInterval) } function stopHeartbeat() { clearInterval(heartbeatTimer) } connect() onUnmounted(() => { close() }) return { data, status, error, send, on, off, close, connect } } ``` Использование в компоненте -- чат: ```vue ``` Глобальный WebSocket через provide/inject (один сокет на всё приложение): ```javascript // plugins/websocket.js import { ref } from 'vue' const WS_KEY = Symbol('ws') export function createWebSocketPlugin(url) { return { install(app) { const ws = ref(null) const status = ref('CLOSED') const handlers = new Map() function connect() { const socket = new WebSocket(url) socket.onopen = () => { status.value = 'OPEN' ws.value = socket } socket.onmessage = (event) => { const { type, payload } = JSON.parse(event.data) const callbacks = handlers.get(type) || [] callbacks.forEach(cb => cb(payload)) } socket.onclose = () => { status.value = 'CLOSED' setTimeout(connect, 3000) } } function send(data) { ws.value?.send(JSON.stringify(data)) } function on(type, callback) { if (!handlers.has(type)) handlers.set(type, []) handlers.get(type).push(callback) // Возвращаем функцию отписки return () => { const cbs = handlers.get(type) const idx = cbs.indexOf(callback) if (idx !== -1) cbs.splice(idx, 1) } } connect() app.provide(WS_KEY, { status, send, on }) } } } export function useGlobalWebSocket() { return inject(WS_KEY) } ``` ```javascript // main.js import { createWebSocketPlugin } from './plugins/websocket' app.use(createWebSocketPlugin('wss://api.example.com/ws')) ``` ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Чат** -- двусторонний обмен сообщениями, typing indicators, online-статус 🔹 **Live-дашборд** -- обновление метрик в реальном времени, пуш-данных с сервера 🔹 **Совместное редактирование** -- синхронизация курсоров, operational transforms --- ## Частые ошибки ```javascript // ❌ Не закрываешь сокет при размонтировании -- утечка соединений const ws = new WebSocket(url) // компонент размонтировался, а сокет жив // ✅ Закрывай в onUnmounted onUnmounted(() => ws.close()) // ❌ Нет автореконнекта -- один разрыв и приложение мертво const ws = new WebSocket(url) ws.onclose = () => console.log('Disconnected') // и всё? // ✅ Реконнект с exponential backoff ws.onclose = () => { setTimeout(connect, delay * Math.pow(2, attempts)) } // ❌ Создаёшь новый WebSocket в каждом компоненте // -- 10 компонентов = 10 соединений // ✅ Один глобальный сокет через provide/inject или Pinia ``` --- ## Резюме | Задача | Решение | |---|---| | Базовый WS | composable с connect/send/on/close | | Реконнект | Exponential backoff + счётчик попыток | | Глобальный сокет | provide/inject plugin | | Keep-alive | Heartbeat (ping каждые 30 сек) | | Очистка | `onUnmounted` + `close()` | ---

Как работать с WebSocket в Vue-приложении?