SSE

Szerver által küldött események (SSE) a webfejlesztésben

A Szerver által küldött események (Server-Sent Events, SSE) egy webes technológia, amely lehetővé teszi a szerver számára, hogy valós idejű adatokat küldjön a kliensnek egy egyszerű, egyirányú kapcsolat segítségével.

Az SSE segítségével a kliens egy HTTP-kapcsolatot nyit a szerver felé, amelyen keresztül a szerver folyamatosan küldhet frissítéseket anélkül, hogy a kliensnek új kéréseket kellene indítania.

Hogyan működik az SSE?

1. Kapcsolat létrehozása: A kliens egy HTTP-kérést küld a szervernek egy adott végpontra.
2. Állandó kapcsolat: A szerver válaszként egy olyan HTTP-választ küld, amelynek a tartalom típusa text/event-stream. Ez a kapcsolat nyitva marad.
3. Adatok küldése: A szerver az adatokat speciális formátumban küldi a kliensnek, amely eseményeket tartalmaz.
4. Események kezelése: A kliens oldalon az eseményeket JavaScript segítségével lehet kezelni, például az EventSource API-val.

Az SSE előnyei

• Egyszerűség: Könnyen implementálható mind kliens, mind szerver oldalon.
• Hatékony erőforrás-kezelés: Csak egyetlen HTTP-kapcsolatot használ, csökkentve a hálózati terhelést.
• Automatikus újracsatlakozás: Az SSE kliens automatikusan újracsatlakozik, ha a kapcsolat megszakad.
• HTTP alapú: Mivel HTTP-t használ, kompatibilis a meglévő hálózati infrastruktúrával, beleértve a proxykat és a tűzfalakat.

SSE használata a kliens oldalon

A böngészőkben az SSE-t az EventSource objektum segítségével lehet használni.

Példa:

// Kapcsolat létrehozása a szerverrel
const source = new EventSource('/sse-endpoint');

// Üzenetek fogadása
source.onmessage = function(event) {
  console.log('Üzenet érkezett:', event.data);
};

// Egyedi események kezelése
source.addEventListener('customEvent', function(event) {
  console.log('Egyedi esemény:', event.data);
});

// Hiba kezelése
source.onerror = function() {
  console.error('Hiba történt az SSE kapcsolatban');
};

SSE implementálása a szerver oldalon

A szerver oldalon az SSE implementációja a következő lépéseket tartalmazza:

1. HTTP fejlécek beállítása:

• Content-Type: text/event-stream
• Cache-Control: no-cache
• Connection: keep-alive

1. Adatküldés megfelelő formátumban:

• Minden üzenetnek új sorral (\n\n) kell végződnie.
• Használható kulcsszavak: data:, event:, id:, retry:.

Példa:

retry: 10000
event: customEvent
data: {"message": "Hello, világ!"}

SSE vs. WebSocket

Jellemző	SSE	WebSocket
Kommunikáció iránya	Egyirányú (szerver → kliens)	Kétirányú (full-duplex)
Protokoll	HTTP	Új protokoll (ws://, wss://)
Komplexitás	Egyszerű implementáció	Összetettebb
Böngésző támogatás	Széles körű, de IE nem támogatja	Széles körű
Újracsatlakozás	Beépített támogatás	Külön implementálandó
Használati esetek	Élő frissítések, értesítések	Chat alkalmazások, játékok

Mikor érdemes az SSE-t választani?

• Ha csak a szervertől a kliens felé történő valós idejű adatküldésre van szükség.
• Ha egyszerű és könnyen karbantartható megoldást szeretnénk.
• Ha fontos a HTTP alapú kommunikáció a hálózati kompatibilitás miatt.

Korlátok és megfontolások

• Egyirányú kommunikáció: Nem alkalmas olyan alkalmazásokhoz, amelyekben a kliensnek is aktívan kell adatokat küldenie a szervernek valós időben.
• Böngésző kompatibilitás: Internet Explorer nem támogatja natívan az SSE-t.
• Maximális kapcsolatok: Egyes böngészők korlátozzák az egyidejűleg nyitott SSE kapcsolatok számát.

Gyakorlati példa

Szerver (Node.js Express):

app.get('/sse-endpoint', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    Connection: 'keep-alive',
  });

  const intervalId = setInterval(() => {
    res.write(`data: ${JSON.stringify({ message: 'Friss adat' })}\n\n`);
  }, 1000);

  req.on('close', () => {
    clearInterval(intervalId);
  });
});

Kliens:

const source = new EventSource('/sse-endpoint');

source.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log(data.message);
};

Összegzés

Az SSE egy hatékony és egyszerű eszköz a valós idejű, egyirányú adatkommunikációhoz a webalkalmazásokban. Ideális választás olyan alkalmazásokhoz, ahol a szervernek rendszeresen kell frissítéseket küldenie a kliensnek, például élő hírcsatornák, értesítések vagy valós idejű adatok megjelenítése esetén.

További források:

• MDN Web Docs – Server-sent events
• Can I Use – Server-Sent Events

Ha bármilyen további kérdése van az SSE-vel kapcsolatban, szívesen segítek!