27. WebSocket — komunikacja w czasie rzeczywistym

O czym jest ta prezentacja?

WebSocket — komunikacja w czasie rzeczywistym

HTTP działa na zasadzie żądanie-odpowiedź: klient pyta, serwer odpowiada, połączenie się zamyka. WebSocket otwiera trwały kanał dwukierunkowy. Serwer może wysyłać dane do klienta bez czekania na zapytanie — idealne dla czatów, powiadomień i gier przeglądarkowych.

Kluczowe pytania do odpowiedzi

Czym różni się WebSocket od HTTP polling? — trwałe połączenie vs ciągłe zapytania
Jak nawiązać połączenie WebSocket w JavaScript? — new WebSocket(), eventy
Gdzie używa się WebSocket w praktyce? — czaty, giełdy, gry, dashboardy

Zakres merytoryczny

Problem: potrzeba danych w czasie rzeczywistym
HTTP polling — jak działa i jakie ma wady (opóźnienie, nadmiar zapytań)
Long polling — ulepszone rozwiązanie, wciąż kompromis
Server-Sent Events (SSE) — jednostronne push od serwera
WebSocket — nawiązanie połączenia (handshake), trwały kanał dwukierunkowy
JavaScript WebSocket API: new WebSocket(), onopen, onmessage, send()
Zastosowania: czat, powiadomienia, live dashboard, gry multiplayer

Wymagane elementy wizualne

Schemat porównawczy

HTTP polling vs WebSocket — diagram przepływu danych

Kod JavaScript

Kompletny przykład klienta WebSocket z obsługą eventów

Warianty realizacji

Minimum:

Definicja WebSocket i porównanie z HTTP
JavaScript WebSocket API (4 eventy)
Dwa przykłady zastosowań

Forma: 10 slajdów, 10 minut

Ocena: 3.0

Rozszerzenie:

Polling vs Long polling vs SSE vs WebSocket — tabela porównawcza
Protokół ws:// i wss:// (bezpieczny)
Przykład mini-czatu (klient JS)

Forma: 12–15 slajdów, 12 minut

Ocena: 4.0-5.0

Scenariusze i przykłady

// JavaScript WebSocket Client
const socket = new WebSocket('wss://example.com/chat');

// Połączenie nawiązane
socket.onopen = () => {
    console.log('Połączono z serwerem WebSocket');
    socket.send(JSON.stringify({ type: 'join', room: 'general' }));
};

// Odebrano wiadomość od serwera
socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Wiadomość:', data);

    if (data.type === 'message') {
        const li = document.createElement('li');
        li.textContent = `${data.user}: ${data.text}`;
        document.getElementById('messages').appendChild(li);
    }
};

// Rozłączono
socket.onclose = (event) => {
    console.log('Rozłączono. Kod:', event.code);
};

// Błąd
socket.onerror = (error) => {
    console.error('Błąd WebSocket:', error);
};

// Wysyłanie wiadomości
function sendMessage(text) {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: 'message', text }));
    }
}

// Porównanie: HTTP Polling vs WebSocket
// POLLING (stare rozwiązanie):
setInterval(async () => {
    const res = await fetch('/api/messages');
    const data = await res.json();
    updateUI(data);
}, 1000); // Zapytanie co sekundę - marnowanie zasobów!

// WEBSOCKET (nowoczesne rozwiązanie):
const ws = new WebSocket('wss://example.com/messages');
ws.onmessage = (e) => updateUI(JSON.parse(e.data)); // Reaguje natychmiast

Wskazówki do wystąpienia

Użyj analogii

„Polling to dzwonienie co minutę pytając czy jest list. WebSocket to skrzynka z powiadomieniem SMS.”

Tabela porównawcza

Polling / Long Polling / SSE / WebSocket — latencja, kierunek, złożoność

Zasoby

MDN: WebSocket API Dokumentacja WebSocket w JavaScript

RFC 6455 — WebSocket Protocol Specyfikacja protokołu WebSocket

Ratchet PHP WebSocket Biblioteka WebSocket server dla PHP