SSE — vad är det, Server-Sent Events och enkelriktad strömning

Vad är SSE?

SSE (Server-Sent Events) — teknik som gör att webbservern när som helst efter att anslutningen upprättats kan skicka data till klienten. Den är standardiserad av WHATWG som en del av HTML Living Standard och använder MIME-typen text/event-stream. SSE stöder överföring av textdata med möjlighet att ange meddelande-ID, händelsetyp och återanslutningsfördröjning.

Till skillnad från WebSocket, som kräver ett tvåvägsprotokoll och en uppgraderingsbegäran, fungerar SSE över vanlig HTTP. Servern ställer in rubriken Content-Type: text/event-stream, skickar data i delar och håller anslutningen öppen. Klienten tar emot data via webbläsarens EventSource API, som automatiskt parsar strömmen och genererar händelser.

Enligt CanIUse (2025) stöds EventSource API globalt i 97,5 % av webbläsarna. Det stöds inte i Internet Explorer och vissa mobila webbläsare (Samsung Internet upp till version 7.0). För dessa fall finns polyfills som emulerar EventSource via XHR-strömning. SSE fungerar inte med HTTP/1.1-pipelining men är helt kompatibel med HTTP/2 server push.

Historia och standardisering

SSE föreslogs som en del av HTML5-specifikationen 2009 under namnet Server-Sent DOM Events. Den första implementationen dök upp i Opera 9.0, sedan i Firefox 6.0 (2011), Chrome 9.0 (2011) och Safari 5.0 (2010). 2015 separerades specifikationen till en egen sektion i HTML Living Standard. Trots en tioårig historia är SSE mindre populär än WebSocket på grund av sin enkelriktade natur.

Hur SSE fungerar

SSE:s funktionsmekanism är följande: klienten skapar en EventSource-instans med serverns slutpunkts-URL. Webbläsaren skickar en GET-begäran med rubriken Accept: text/event-stream. Servern svarar med status 200 OK och rubriken Content-Type: text/event-stream, varefter den börjar skicka data i event-stream-format. Anslutningen förblir öppen tills servern skickar en termineringssignal eller klienten anropar close().

På serversidan skickas data i delar (chunked transfer encoding). Varje datablock är ett textmeddelande som består av fältrader (event, data, id, retry). Servern kan skicka meddelanden när som helst, vilket gör SSE idealiskt för notifieringar och statusuppdateringar. Anslutningen kräver inget konstant heartbeat-paketutbyte (som WebSocket), även om fältet retry styr återanslutningsfrekvensen.

Enligt prestandatester (2024) ger SSE ett genomflöde på upp till 10 000 meddelanden per sekund per anslutning vid en meddelandestorlek på 256 byte. På serversidan förbrukar varje SSE-anslutning cirka 5–10 KB minne, vilket gör att en enda server kan stödja 50 000+ samtidiga anslutningar med 1 GB RAM. Detta är betydligt mindre än WebSocket på grund av avsaknaden av ett binärt protokoll.

Event-stream-format

Text/event-stream-format — ett enkelt textprotokoll där varje meddelande består av namngivna fält separerade med nyradstecken. Varje fält har formatet “Fältnamn: värde”. Meddelanden separeras med två nyradstecken ( ).

Stödda fält: event (händelsetyp, standard är message), data (datasträng, kan vara flerradig), id (senaste händelse-ID, lagras i Last-Event-ID), retry (återanslutningstid i millisekunder). Kommentarer börjar med kolon (:) och ignoreras av parsern, men kan användas för heartbeat.

Exempel på event-ström

: 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 på klientsidan

EventSource API — webbläsarens inbyggda gränssnitt för att ta emot SSE. För att skapa en anslutning räcker det att anropa konstruktorn med slutpunktens URL. EventSource upprättar automatiskt anslutningen, hanterar återanslutning och parsar inkommande meddelanden till JavaScript-händelser.

EventSource-händelser: open (anslutning upprättad), message (meddelande mottaget utan angiven event), error (anslutningsfel). För anpassade händelser (event: custom) kan addEventListener med händelsenamnet användas. EventSource skickar automatiskt rubriken Last-Event-ID vid återanslutning, vilket gör att servern kan återuppta strömmen från den avbrutna punkten.

Enligt MDN-dokumentation (2025) stöder EventSource CORS och överföring av credentials (withCredentials). För överföring av anpassade rubriker eller begärandekropp är EventSource inte lämpligt — manuell implementering krävs via fetch + ReadableStream. EventSource stöder inte binär data — endast text och JSON.

Klientkod i JavaScript

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

eventSource.addEventListener('open', () => {
    console.log('SSE-anslutning öppnad');
});

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

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

eventSource.addEventListener('error', (error) => {
    console.error('SSE-fel:', error);
    // Automatisk webbläsaråteranslutning
});

// Stäng anslutning
eventSource.close();

SSE vs WebSocket: jämförelse

SSE och WebSocket — olika tekniker för realtidskommunikation, var och en med sina styrkor. WebSocket passar för tvåvägsdatautbyte (chattar, spel, gemensam redigering), SSE för enkelriktade strömmar från server till klient (notifieringar, nyhetsflöden, tickers).

Den viktigaste skillnaden — WebSocket kräver en uppgraderingsbegäran från HTTP/1.1 till WebSocket-protokollet (ws://), vilket kan blockeras av företagsproxyservrar. SSE fungerar över vanlig HTTP, passerar alla proxyservrar och kräver ingen speciell serverkonfiguration. SSE är också enklare att implementera — servern behöver inget extra bibliotek, det räcker att formatera HTTP-svaret korrekt.

Enligt jämförande tester (2024) stöder SSE på en serverprocess 30–50 % fler anslutningar än WebSocket tack vare ett enklare protokoll. SSE:s latens är dock högre (50–200 ms jämfört med 10–50 ms för WebSocket) eftersom SSE använder chunked HTTP, inte en full tvåvägsström med binära ramar.

Implementera SSE på servern

Implementering av SSE på servern kräver inga bibliotek — det räcker att ställa in rätt HTTP-rubriker och skicka data i text/event-stream-format. Låt oss titta på ett exempel i Node.js med den inbyggda http-modulen. Servern ställer in rubrikerna Content-Type och Cache-Control och skickar sedan meddelanden var N:e sekund.

Enligt MDN Web Docs (2025) är de obligatoriska rubrikerna för SSE: Content-Type: text/event-stream, Cache-Control: no-cache och Connection: keep-alive. Utan Cache-Control kan webbläsaren cachelagra SSE-strömmen, vilket leder till att leveransen stoppas. Connection: keep-alive instruerar webbläsaren att hålla anslutningen öppen.

Serverkod i Node.js

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: {"tid": "${new Date().toISOString()}", "id":${eventId}}\n\n`);
    }, 2000);

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

SSE i Python (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 i mobilappar

Användning av SSE i mobilappar begränsas av avsaknaden av en inbyggd EventSource-implementering för iOS och Android. På mobila plattformar implementeras SSE via tredjepartsbibliotek: på iOS — via URLSession med NSURLProtocol, på Android — via OkHttp med SSE-stöd (okhttp-sse). För React Native och Flutter finns paket som emulerar EventSource.

På iOS är inbyggd SSE-implementering möjlig via URLSessionDataDelegate. Vid mottagning av data i metoden urlSession(_:dataTask:didReceive:) samlar appen en buffert och parsar event-stream-formatet manuellt. Enligt iOS-utvecklingsbloggen (2024) är batteriförbrukningen vid SSE på iOS 40 % lägre än vid en konstant WebSocket-anslutning, på grund av avsaknaden av heartbeat-paket.

På Android tillhandahåller OkHttp klassen EventSource.Factory för prenumeration på SSE-strömmar. Android-appar kan använda SSE för notifieringar när FCM inte är tillgängligt eller för datasynkronisering i bakgrunden. SSE på Android fungerar bra med WorkManager för långvariga bakgrundsuppgifter. Enligt OkHttp-dokumentation (2025) stöder okhttp-sse automatisk återanslutning med en anpassad listener.