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.

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 ws

Tworzenie 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 ws

Oficjalna 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-server

Uruchom serwer w katalogu projektu:

http-server

6. Testowanie aplikacji

• Uruchom server.js poleceniem node 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!