Базовый composable: ```javascript // composables/useEventSource.js import { ref, onUnmounted } from 'vue' export function useEventSource(url, events = []) { const data = ref(null) const status = ref('CONNECTING') const error = ref(null) const eventSource = ref(null) const listeners = new Map() function connect() { eventSource.value = new EventSource(url) eventSource.value.onopen = () => { status.value = 'OPEN' error.value = null } // Дефолтный обработчик (unnamed events) eventSource.value.onmessage = (event) => { data.value = JSON.parse(event.data) } // Именованные события events.forEach(eventName => { eventSource.value.addEventListener(eventName, (event) => { const parsed = JSON.parse(event.data) data.value = parsed listeners.get(eventName)?.(parsed) }) }) eventSource.value.onerror = () => { status.value = 'CLOSED' error.value = 'Connection lost' // EventSource автоматически пытается реконнектиться } } function on(eventName, handler) { listeners.set(eventName, handler) } function close() { eventSource.value?.close() status.value = 'CLOSED' } connect() onUnmounted(close) return { data, status, error, on, close } } ``` Использование -- уведомления в реальном времени: ```vue ``` SSE через fetch (когда нужны headers, например Authorization): ```javascript // composables/useFetchSSE.js import { ref, onUnmounted } from 'vue' export function useFetchSSE(url, options = {}) { const data = ref(null) const status = ref('CONNECTING') const error = ref(null) let abortController = null async function connect() { abortController = new AbortController() status.value = 'CONNECTING' try { const response = await fetch(url, { headers: { 'Accept': 'text/event-stream', 'Authorization': `Bearer ${options.token}`, ...options.headers }, signal: abortController.signal }) if (!response.ok) throw new Error(`HTTP ${response.status}`) status.value = 'OPEN' const reader = response.body.getReader() const decoder = new TextDecoder() let buffer = '' while (true) { const { done, value } = await reader.read() if (done) break buffer += decoder.decode(value, { stream: true }) const lines = buffer.split('\n\n') buffer = lines.pop() || '' for (const block of lines) { const dataLine = block .split('\n') .find(l => l.startsWith('data: ')) if (dataLine) { try { data.value = JSON.parse(dataLine.slice(6)) options.onMessage?.(data.value) } catch { data.value = dataLine.slice(6) } } } } } catch (err) { if (err.name !== 'AbortError') { error.value = err.message status.value = 'CLOSED' } } } function close() { abortController?.abort() status.value = 'CLOSED' } connect() onUnmounted(close) return { data, status, error, close } } ``` AI-стриминг ответов (типичный кейс с ChatGPT-подобным интерфейсом): ```vue ``` --- ## 📌 Реальные кейсы 🔹 **AI-чат** -- стриминг ответа токен за токеном через SSE (OpenAI, Anthropic API) 🔹 **Live-лента** -- новости, курсы валют, спортивные результаты -- сервер пушит обновления 🔹 **Прогресс обработки** -- загрузил видео, SSE шлёт проценты конвертации --- ## Частые ошибки ```javascript // ❌ EventSource не поддерживает кастомные headers const es = new EventSource('/api/events') // Нельзя передать Authorization // ✅ Для auth используй fetch + ReadableStream const response = await fetch('/api/events', { headers: { Authorization: `Bearer ${token}` } }) // Парси response.body как stream // ❌ Не закрываешь EventSource -- коннект живёт после ухода const es = new EventSource('/sse') // Компонент умер, а connection висит // ✅ Всегда close в onUnmounted onUnmounted(() => es.close()) // ❌ Парсишь весь чанк как один JSON reader.read().then(({ value }) => { JSON.parse(decoder.decode(value)) // Может быть неполный JSON }) // ✅ Буферизуй, сплити по \n\n buffer += decoder.decode(value, { stream: true }) const blocks = buffer.split('\n\n') buffer = blocks.pop() // неполный блок оставляем в буфере ``` --- ## Резюме | SSE vs WebSocket | SSE | WebSocket | |---|---|---| | Направление | Сервер к клиенту | Двустороннее | | Протокол | HTTP | ws:// | | Реконнект | Автоматический | Ручной | | Auth headers | Только через fetch | Через параметры URL | | Подходит для | Стриминг, уведомления | Чат, игры | ---

Как реализовать Server-Sent Events (SSE) в Vue?