WebSocket: vad är det, full-duplex kommunikationsprotokoll och hur det fungerar

Vad är WebSocket?

WebSocket — är ett kommunikationsprotokoll som fungerar över TCP och ger en full-duplex kanal mellan klient och server. Det standardiserades av IETF som RFC 6455 år 2011 och stöds av alla moderna webbläsare, mobila plattformar och serverramverk.

Till skillnad från HTTP, där klienten initierar en begäran och får ett svar, tillåter WebSocket båda parter att skicka meddelanden när som helst efter att anslutningen har upprättats. Detta gör det idealiskt för scenarier som kräver omedelbar leverans av data: chattar, aviseringar, gemensam dokumentredigering.

WebSocket-protokollet använder HTTP-port 80 eller HTTPS-port 443 för den initiala handskakningen, varefter det växlar till sitt eget protokoll med minimal rubrik — endast 2 byte istället för 800+ byte i HTTP. Denna egenskap ger en betydande prestandafördel vid ett stort antal meddelanden.

Protokollets nyckelegenskaper

En WebSocket-anslutning börjar med en HTTP Upgrade-begäran, varefter protokollet växlar till binärt ramformat. Storleken på en ram varierar från 2 byte till 2^63 byte, vilket möjliggör överföring av både korta textmeddelanden och stora binära data. Meddelandefragmentering, maskering av data från klient till server och ping/pong för att upprätthålla anslutningen stöds.

Hur fungerar WebSocket?

Processen för att upprätta en WebSocket-anslutning består av två steg: handskakning och dataöverföring. I handskakningssteget skickar klienten en HTTP-förfrågan med rubriken Upgrade: websocket, och servern bekräftar protokollväxlingen med status 101 Switching Protocols. Därefter går anslutningen över till full-duplex överföringsläge.

Varje meddelande i WebSocket delas upp i ramar. En ram innehåller opcode (text, binär data, stängning, ping/pong), nyttolastlängd och en maskeringsnyckel för data från klienten. En ram kan fragmenteras — kontrollramar (ping/pong) kan skickas mellan meddelandefragment, vilket förhindrar anslutningsbrott vid lång överföring.

const ws = new WebSocket('wss://example.com/chat')

ws.addEventListener('open', () => {
    console.log('Anslutning upprättad')
    ws.send('Hej server!')
})

ws.addEventListener('message', (event) => {
    console.log('Mottaget:', event.data)
})

ws.addEventListener('close', () => {
    console.log('Anslutning stängd')
})

I exemplet ovan skapar klienten ett WebSocket-objekt och anger den säkra URL:en wss://. Efter att anslutningen öppnats skickas ett välkomstmeddelande och message-hanteraren tar emot svar från servern. Vid stängning aktiveras close-hanteraren — detta är viktigt för återanslutning vid nätverksavbrott.

WebSocket vs HTTP: jämförelse

Den största skillnaden mellan WebSocket och HTTP ligger i interaktionsmodellen. HTTP fungerar enligt schemat begäran-svar: klienten initierar en begäran, servern returnerar ett svar, anslutningen stängs. WebSocket å andra sidan etablerar en permanent kanal genom vilken båda parter kan initiera överföring när som helst.

För applikationer som kräver låg latens och konstant dataflöde är WebSocket betydligt effektivare. HTTP Long Polling — ett alternativ där servern håller begäran öppen tills data dyker upp — skapar extra belastning på servern och ökar minnesförbrukningen på grund av flera samtidiga anslutningar.

Enligt High Performance Browser Networking (Grigorik, O’Reilly) minskar WebSocket nätverksfördröjningar i realtidsscenarier med 40–60% jämfört med HTTP Long Polling, och serverbelastningen minskar 3–5 gånger tack vare eliminering av upprepade handskakningar.

Var används WebSocket

Tack vare låg latens och dubbelriktad kommunikation används WebSocket i ett brett spektrum av applikationer. Nyckelscenarier inkluderar omedelbart meddelandeutbyte, tillståndssynkronisering i spel och överföring av marknadsdata i finansiella system.

Chattar och meddelandetjänster

WebSocket har blivit de facto-standard för chattapplikationer. Plattformar som Slack, Telegram Web och WhatsApp Web använder WebSocket för omedelbar meddelandeleverans. Protokollet tillåter att både textmeddelanden och filer skickas via en enda kanal, och ping/pong-mekanismen håller anslutningen aktiv även vid inaktivitet.

Onlinespel

Flerspelarwebbläsar- och mobila spel kräver minimal latens för synkronisering av spelarnas tillstånd. WebSocket överför koordinater, handlingar och händelser i realtid utan fördröjningarna från HTTP-förfrågningar. Ramverk som Socket.IO och Colyseus abstraherar lågnivåarbetet med protokollet och lägger till automatisk återanslutning och rum.

Finansiella applikationer

Börsterminaler och handelsplattformar använder WebSocket för att ta emot kurser i realtid. En fördröjning på några millisekunder kan kosta miljontals dollar, därför tillhandahåller finansiella API:er — till exempel Binance WebSocket Streams, Coinbase Pro — just WebSocket-gränssnitt för marknadsdata.

Mobila appar och IoT

I mobil utveckling används WebSocket via inbyggda API:er: URLSessionWebSocketTask på iOS och OkHttp WebSocket på Android. För Flutter finns biblioteket web_socket_channel och för React Native — react-native-websocket. IoT-enheter använder WebSocket för att skicka telemetri och ta emot kontrollkommandon eftersom protokollet förbrukar mindre energi än konstant HTTP-polling.

WebSocket kodexempel

Låt oss titta på ett exempel på serversidan i Node.js med ws-biblioteket — den mest populära WebSocket-implementeringen för JavaScript. Servern accepterar anslutningar, bearbetar meddelanden och sänder ut dem till alla anslutna klienter.

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })

wss.on('connection', (ws) => {
    console.log('Ny klient ansluten')

    ws.on('message', (data) => {
        console.log('Mottaget:', data.toString())
        ws.send('Servern har tagit emot ditt meddelande')
    })

    ws.on('close', () => {
        console.log('Klient frånkopplad')
    })
})

console.log('WebSocket-server startad på port 8080')

Servern skapar en WebSocket.Server-instans på port 8080 och väntar på anslutningar. Varje ny klient tilldelas ett separat ws-objekt genom vilket servern kan skicka individuella meddelanden. Utsändning av meddelanden till alla klienter görs genom massiv iteration över anslutningsarrayen. Vid ett stort antal klienter (över 1000) rekommenderas att använda bibliotek med klusterstöd som Socket.IO, som lägger till skalning via Redis och automatisk återanslutning.

Skicka meddelanden till alla klienter

wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
        client.send('Meddelande till alla deltagare')
    }
})

Kontroll av readyState före sändning är obligatorisk: om klienten redan har kopplats bort kommer send-anropet att orsaka ett fel. Flaggan WebSocket.OPEN garanterar att anslutningen är aktiv och meddelandet kommer att levereras.

För mobila iOS-applikationer implementeras WebSocket via URLSessionWebSocketTask, tillgänglig från iOS 13. Sessionen skapar en uppgift med URL:en för wss://-protokollet, varefter metoderna send och receive anropas. Mottagning av meddelanden kan organiseras genom kontinuerlig receive-rekursion, som väntar på nästa meddelande efter bearbetning av det föregående, vilket säkerställer kontinuerligt datamottagande utan återanslutning. För Android används OkHttp WebSocket, som erbjuder ett liknande gränssnitt med callbacks onOpen, onMessage, onClosing och onClosed, samt automatisk återanslutning vid anslutningsbrott.

När du arbetar med WebSocket i mobila appar är det viktigt att ta hänsyn till livscykelhantering: när appen går i bakgrunden kan anslutningen brytas av systemet. På iOS måste anslutningen återupprättas vid återgång till förgrunden via delegaten sceneDidBecomeActive. På Android bör Lifecycle-aware-komponenter eller Service användas för att upprätthålla anslutningen. Dessutom rekommenderas att implementera exponential backoff vid återanslutning — öka intervallet mellan försök från 1 till 30 sekunder, för att inte skapa överdriven belastning på servern vid tillfälliga nätverksproblem.