SSE — mi ez, Server-Sent Events és egyirányú streamelés

Mi az SSE?

SSE (Server-Sent Events) — technológia, amely lehetővé teszi a web szerver számára, hogy a kapcsolat létrejötte után bármikor adatokat küldjön a kliensnek. A WHATWG szabványosította a HTML Living Standard részeként, és a text/event-stream MIME típust használja. Az SSE támogatja a szöveges adatok továbbítását az üzenetazonosító, az eseménytípus és az újracsatlakozási késleltetés megadásának lehetőségével.

A WebSocket-től eltérően, amely kétirányú protokollt és upgrade kérést igényel, az SSE normál HTTP-n működik. A szerver beállítja a Content-Type: text/event-stream fejlécet, adatokat küld darabokban, és nyitva tartja a kapcsolatot. A kliens a böngésző EventSource API-ján keresztül fogadja az adatokat, amely automatikusan elemzi a folyamot és eseményeket generál.

A CanIUse (2025) adatai szerint az EventSource API globálisan a böngészők 97,5%-ában támogatott. Nem támogatott az Internet Explorerben és néhány mobil böngészőben (Samsung Internet 7.0 verzióig). Ezekre az esetekre vannak polyfill-ek, amelyek XHR streaming segítségével emulálják az EventSource-t. Az SSE nem működik HTTP/1.1 pipelining-gal, de teljesen kompatibilis a HTTP/2 server push-szal.

Történet és szabványosítás

SSE 2009-ben került javaslatra a HTML5 specifikáció részeként Server-Sent DOM Events néven. Az első implementáció az Opera 9.0-ban jelent meg, majd a Firefox 6.0-ban (2011), a Chrome 9.0-ban (2011) és a Safari 5.0-ban (2010). 2015-ben a specifikáció külön szakaszba került a HTML Living Standard-en belül. Az egy évtizedes története ellenére az SSE kevésbé népszerű, mint a WebSocket az egyirányú jellege miatt.

Hogyan működik az SSE

Az SSE működési mechanizmusa a következő: a kliens létrehoz egy EventSource példányt a szerver végpont URL-jével. A böngésző GET kérést küld az Accept: text/event-stream fejléccel. A szerver 200 OK státusszal és a Content-Type: text/event-stream fejléccel válaszol, majd elkezdi küldeni az adatokat event-stream formátumban. A kapcsolat nyitva marad, amíg a szerver termináló jelet nem küld, vagy a kliens meg nem hívja a close()-t.

A szerver oldalán az adatok darabokban kerülnek elküldésre (chunked transfer encoding). Minden adatblokk egy szöveges üzenet, amely mezősorokból áll (event, data, id, retry). A szerver bármikor küldhet üzeneteket, ami az SSE-t ideálissá teszi az értesítések és állapotfrissítések számára. A kapcsolat nem igényel állandó heartbeat csomagcserét (mint a WebSocket), bár a retry mező szabályozza az újracsatlakozás gyakoriságát.

A teljesítménytesztek (2024) adatai szerint az SSE akár 10 000 üzenetet is képes másodpercenként továbbítani kapcsolatonként 256 bájtos üzenetméret mellett. A szerver oldalán minden SSE kapcsolat körülbelül 5–10 KB memóriát fogyaszt, ami lehetővé teszi, hogy egyetlen szerver 50 000+ egyidejű kapcsolatot támogasson 1 GB RAM-mal. Ez jelentősen kevesebb, mint a WebSocket esetében a bináris protokoll hiánya miatt.

Event-stream formátum

Text/event-stream formátum — egyszerű szöveges protokoll, ahol minden üzenet elnevezett mezőkből áll, amelyeket újsor karakterek választanak el. Minden mező „MezőNév: érték” formátumú. Az üzeneteket két újsor karakter ( ) választja el.

Támogatott mezők: event (esemény típusa, alapértelmezett message), data (adatkarakterlánc, lehet többsoros), id (utolsó eseményazonosító, Last-Event-ID-ben tárolva), retry (újracsatlakozási idő ezredmásodpercben). A megjegyzések kettősponttal (:) kezdődnek, és az elemző figyelmen kívül hagyja őket, de használhatók heartbeat-re.

Példa event-stream folyamra

: heartbeat comment
event: update
data: {"user": "Alice", "action": "typing"}
id: 1001

event: notification
data: {"type": "info", "text": "New version available"}
data: {"type": "action", "url": "/upgrade"}
retry: 3000

event: close
data: Session ended

EventSource API a kliens oldalán

EventSource API — a böngésző beépített interfésze az SSE fogadásához. A kapcsolat létrehozásához elegendő meghívni a konstruktort a végpont URL-jével. Az EventSource automatikusan létrehozza a kapcsolatot, kezeli az újracsatlakozást, és elemzi a bejövő üzeneteket JavaScript eseményekké.

EventSource események: open (kapcsolat létrejött), message (üzenet érkezett event megadása nélkül), error (kapcsolati hiba). Egyéni eseményekhez (event: custom) használható az addEventListener az esemény nevével. Az EventSource automatikusan elküldi a Last-Event-ID fejlécet újracsatlakozáskor, lehetővé téve a szerver számára a folyam folytatását a megszakítás pontjától.

Az MDN dokumentáció (2025) szerint az EventSource támogatja a CORS-t és a hitelesítő adatok továbbítását (withCredentials). Egyéni fejlécek vagy kéréstörzs küldéséhez az EventSource nem alkalmas — manuális implementáció szükséges fetch + ReadableStream segítségével. Az EventSource nem támogat bináris adatokat — csak szöveget és JSON-t.

Kliens oldali JavaScript kód

const eventSource = new EventSource('/api/events/stream');

eventSource.addEventListener('open', () => {
    console.log('SSE kapcsolat megnyitva');
});

eventSource.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    console.log('Fogadva:', data);
    renderUpdate(data);
});

eventSource.addEventListener('notification', (event) => {
    const notification = JSON.parse(event.data);
    showNotification(notification.text);
});

eventSource.addEventListener('error', (error) => {
    console.error('SSE hiba:', error);
    // Böngésző automatikus újracsatlakozása
});

// Kapcsolat bezárása
eventSource.close();

SSE vs WebSocket: összehasonlítás

SSE és WebSocket — különböző technológiák valós idejű kommunikációhoz, mindegyiknek megvannak a maga erősségei. A WebSocket kétirányú adatcseréhez (chat-ek, játékok, közös szerkesztés) alkalmas, az SSE egyirányú folyamokhoz a szervertől a kliens felé (értesítések, hírfolyamok, tickerek).

Kulcsfontosságú különbség — a WebSocket upgrade kérést igényel HTTP/1.1-ről a WebSocket protokollra (ws://), amit vállalati proxyk blokkolhatnak. Az SSE normál HTTP-n működik, áthalad minden proxyn, és nem igényel különleges szerver konfigurációt. Az SSE implementációja is egyszerűbb — a szervernek nincs szüksége további könyvtárra, elég a HTTP válasz megfelelő formázása.

Az összehasonlító tesztek (2024) adatai szerint egy szerver folyamaton az SSE 30–50%-kal több kapcsolatot támogat, mint a WebSocket az egyszerűbb protokollnak köszönhetően. Az SSE késleltetése azonban magasabb (50–200 ms szemben a WebSocket 10–50 ms-ával), mert az SSE chunked HTTP-t használ, nem pedig teljes kétirányú folyamot bináris keretekkel.

SSE megvalósítása a szerveren

SSE megvalósítása a szerveren nem igényel könyvtárakat — elég beállítani a megfelelő HTTP fejléceket és elküldeni az adatokat text/event-stream formátumban. Nézzünk egy példát Node.js-ben a beépített http modul használatával. A szerver beállítja a Content-Type és Cache-Control fejléceket, majd minden N másodpercben üzeneteket küld.

Az MDN Web Docs (2025) szerint a kötelező fejlécek az SSE-hez: Content-Type: text/event-stream, Cache-Control: no-cache és Connection: keep-alive. Cache-Control nélkül a böngésző gyorsítótárazhatja az SSE folyamot, ami a kézbesítés leállásához vezet. A Connection: keep-alive kifejezetten jelzi a böngészőnek, hogy tartsa nyitva a kapcsolatot.

Szerver kód Node.js-ben

const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    let eventId = 0;
    const interval = setInterval(() => {
        eventId++;
        res.write(`id: ${eventId}\n`);
        res.write(`event: update\n`);
        res.write(`data: {"idő": "${new Date().toISOString()}", "id":${eventId}}\n\n`);
    }, 2000);

    req.on('close', () => {
        clearInterval(interval);
    });
}).listen(3000);

SSE Pythonban (Flask)

from flask import Response, Flask
import time
import json

app = Flask(__name__)

@app.route('/stream')
def stream():
    def generate():
        event_id = 0
        while True:
            event_id += 1
            data = json.dumps(
                {'ticker': 'AAPL', 'price': 150.25})
            yield f'id: {event_id}\nevent: price\ndata: {data}\n\n'
            time.sleep(1)
    return Response(generate(),
        mimetype='text/event-stream')

SSE mobil alkalmazásokban

SSE használata mobil alkalmazásokban korlátozott az EventSource natív implementációjának hiánya miatt iOS és Android platformokon. Mobil platformokon az SSE külső könyvtárakon keresztül valósítható meg: iOS-en — URLSession segítségével NSURLProtocol-lel, Androidon — OkHttp SSE támogatással (okhttp-sse). A React Native és Flutter számára elérhetők olyan csomagok, amelyek emulálják az EventSource-t.

iOS-en az SSE natív implementációja URLSessionDataDelegate segítségével lehetséges. Az adatok fogadásakor az urlSession(_:dataTask:didReceive:) metódusban az alkalmazás puffereli, majd manuálisan elemzi az event-stream formátumot. Az iOS fejlesztési blog (2024) szerint az SSE akkumulátorfogyasztása iOS-en 40%-kal alacsonyabb, mint az állandó WebSocket kapcsolaté, a heartbeat csomagok hiánya miatt.

Androidon az OkHttp EventSource.Factory osztályt biztosít az SSE folyamokra való feliratkozáshoz. Az Android alkalmazások használhatják az SSE-t értesítésekhez, amikor az FCM nem elérhető, vagy adatok háttérbeli szinkronizálásához. Az SSE Androidon jól működik a WorkManager-rel hosszú élettartamú háttérfeladatokhoz. Az OkHttp dokumentáció (2025) szerint az okhttp-sse támogatja az automatikus újracsatlakozást egyéni listener-rel.