W dzisiejszym świecie aplikacji internetowych komunikacja w czasie rzeczywistym stała się nieodłącznym elementem interaktywnych usług online. WebSocket JS to technologia, która umożliwia dwukierunkową komunikację między klientem a serwerem, co pozwala na tworzenie dynamicznych i responsywnych aplikacji. W tym artykule wyjaśnimy, czym są WebSockety i jak wykorzystać je w JavaScript i Node.js. Przedstawimy również krok po kroku, jak zbudować prostą aplikację chatową, demonstrując praktyczne zastosowanie tej technologii.
JavaScript – co to jest i jak zacząć naukę?
Czym są WebSockety?
WebSocket to protokół komunikacyjny, który umożliwia utrzymanie stałego połączenia między klientem a serwerem przez jedno gniazdo TCP. W przeciwieństwie do tradycyjnych połączeń HTTP, gdzie klient musi inicjować każde żądanie, WebSocket pozwala na dwukierunkową komunikację w czasie rzeczywistym. Dzięki temu zarówno klient, jak i serwer mogą wysyłać dane w dowolnym momencie, bez konieczności ciągłego nawiązywania nowych połączeń.
WebSocket API jest dostępne w większości nowoczesnych przeglądarek, co ułatwia integrację tej technologii w aplikacjach webowych.
Dokumentacja WebSocket API na MDN Web Docs
Jak działa protokół WebSocket?
Proces komunikacji z użyciem protokołu WebSocket rozpoczyna się od tzw. handshake WebSocket, który jest specjalnym żądaniem HTTP. Po ustanowieniu połączenia, komunikacja odbywa się za pomocą ramek WebSocket (WebSocket frames), które mogą zawierać dane w formacie tekstowym lub binarnym.
Stan połączenia WebSocket można monitorować za pomocą właściwości readyState, która informuje o aktualnym statusie połączenia.
Frontend Master 2026 · Kodożercy
Pisz kod, nie tylko prompty
Frontend Master 2026 to pakiet sześciu kursów Kodożerców (HTML, CSS, JavaScript, Git) w polskim wideo z 12-miesięcznym dostępem. Fundamenty frontu od pierwszej linijki kodu do deploy.
Wchodzę w to →
Implementacja WebSocket w Node.js
Aby stworzyć serwer WebSocket w Node.js, możemy skorzystać z biblioteki ws, która jest lekką i wydajną implementacją serwera i klienta WebSocket.
Instalacja biblioteki ws
npm install wsTworzenie serwera WebSocket
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('Nowe połączenie WebSocket');
ws.on('message', function incoming(message) {
console.log('Otrzymano wiadomość: %s', message);
// Odesłanie wiadomości do wszystkich klientów
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', function close() {
console.log('Połączenie WebSocket zamknięte');
});
ws.on('error', function error(error) {
console.log('Błąd WebSocket:', error);
});
});W powyższym kodzie tworzymy WebSocketServer nasłuchujący na porcie 8080. Obsługujemy zdarzenia:
connection– nawiązanie nowego połączenia.message– otrzymanie wiadomości od klienta.close– zamknięcie połączenia.error– wystąpienie błędu.
Implementacja klienta WebSocket w JavaScript
Po stronie klienta korzystamy z wbudowanego WebSocket API dostępnego w przeglądarce.
Tworzenie połączenia WebSocket
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function(event) {
console.log('Połączenie WebSocket otwarte');
};
socket.onmessage = function(event) {
console.log('Otrzymano wiadomość:', event.data);
// Wyświetlenie wiadomości w interfejsie użytkownika
};
socket.onclose = function(event) {
console.log('Połączenie WebSocket zamknięte');
};
socket.onerror = function(error) {
console.log('Błąd WebSocket:', error);
};
// Wysłanie wiadomości
function wyslijWiadomosc(wiadomosc) {
if (socket.readyState === WebSocket.OPEN) {
socket.send(wiadomosc);
}
}Obsługujemy zdarzenia:
onopen– po otwarciu połączenia.onmessage– po otrzymaniu wiadomości od serwera.onclose– po zamknięciu połączenia.onerror– w przypadku błędu.
Budowa aplikacji chatowej – krok po kroku
1. Przygotowanie środowiska
Upewnij się, że masz zainstalowane Node.js i npm.
Utwórz nowy folder projektu i zainicjuj go poleceniem
npm init -y.
2. Instalacja zależności
Zainstaluj bibliotekę ws:
npm install wsOficjalna strona biblioteki ws na GitHubie
3. Tworzenie serwera WebSocket
Utwórz plik server.js i wklej kod serwera z poprzedniej sekcji.
4. Tworzenie klienta HTML
Utwórz plik index.html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Chat WebSocket</title>
</head>
<body>
<h1>Chat WebSocket</h1>
<div id="wiadomosci"></div>
<input type="text" id="wiadomoscInput" placeholder="Wpisz wiadomość">
<button id="wyslijBtn">Wyślij</button>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
console.log('Połączenie WebSocket otwarte');
};
socket.onmessage = function(event) {
const wiadomosciDiv = document.getElementById('wiadomosci');
const nowaWiadomosc = document.createElement('p');
nowaWiadomosc.textContent = event.data;
wiadomosciDiv.appendChild(nowaWiadomosc);
};
socket.onclose = function() {
console.log('Połączenie WebSocket zamknięte');
};
socket.onerror = function(error) {
console.log('Błąd WebSocket:', error);
};
const wyslijBtn = document.getElementById('wyslijBtn');
wyslijBtn.addEventListener('click', function() {
const wiadomoscInput = document.getElementById('wiadomoscInput');
const wiadomosc = wiadomoscInput.value;
if (wiadomosc) {
socket.send(wiadomosc);
wiadomoscInput.value = '';
}
});
</script>
</body>
</html>5. Uruchomienie serwera HTTP
Aby serwować plik HTML, możemy użyć prostego serwera HTTP. Zainstalujmy pakiet http-server:
npm install -g http-serverUruchom serwer w katalogu projektu:
http-server
6. Testowanie aplikacji
Uruchom
server.jspoleceniemnode server.js.Otwórz przeglądarkę i przejdź do adresu
http://localhost:8080.Otwórz drugą kartę lub przeglądarkę i połącz się do tej samej strony.
Wpisz wiadomość i obserwuj, jak jest przesyłana między klientami w czasie rzeczywistym.
Zaawansowane funkcje WebSocket
Obsługa binarnego typu danych
WebSocket pozwala na przesyłanie danych binarnych. Można ustawić właściwość binaryType na 'arraybuffer' lub 'blob'.
socket.binaryType = 'arraybuffer';Monitorowanie stanu połączenia
Właściwość readyState informuje o aktualnym stanie połączenia:
0 – CONNECTING
1 – OPEN
2 – CLOSING
3 – CLOSED
if (socket.readyState === WebSocket.OPEN) {
// Połączenie jest otwarte
}Użycie subprotokołów WebSocket
Subprotokoły WebSocket pozwalają na rozszerzenie funkcjonalności protokołu. Można je określić podczas tworzenia połączenia.
const socket = new WebSocket('ws://localhost:8080', 'chat-protocol');Bezpieczeństwo i optymalizacja
Bezpieczne połączenia WebSocket
Używaj protokołu wss:// zamiast ws:// do nawiązywania bezpiecznych połączeń przez TLS/SSL.
const socket = new WebSocket('wss://secure.example.com');Obsługa błędów i zamykanie połączeń
Obsługuj zdarzenia onerror i onclose, aby zapewnić stabilność aplikacji.
socket.onclose = function(event) {
console.log('Kod zamknięcia:', event.code);
console.log('Powód zamknięcia:', event.reason);
};Utrzymywanie połączenia (Keep-alive)
Aby utrzymać połączenie, można wysyłać regularne wiadomości typu ping/pong.
Alternatywy dla WebSocket
Chociaż WebSocket jest potężnym narzędziem, istnieją również inne technologie umożliwiające komunikację w czasie rzeczywistym, takie jak:
Server-Sent Events (SSE)
Long Polling
WebRTC
Podsumowanie
WebSocket w JavaScript i Node.js to potężne narzędzie umożliwiające tworzenie aplikacji komunikujących się w czasie rzeczywistym. Dzięki prostocie implementacji i wsparciu w nowoczesnych przeglądarkach, WebSocket staje się standardem w budowaniu interaktywnych aplikacji webowych. Mamy nadzieję, że ten artykuł pomógł Ci zrozumieć podstawy i zachęcił do eksperymentowania z własnymi projektami.
Zapraszamy do dalszego zgłębiania technologii webowych i tworzenia własnych aplikacji w czasie rzeczywistym z wykorzystaniem WebSocket w JavaScript i Node.js. Twoja przygoda z programowaniem dopiero się zaczyna!
