Przykładowy program WebSocket
Protokół WebSocket pozwala na dwukierunkową komunikację między klientem a serwerem. Ten proces jest podobny do sposobu, w jaki odbywają się połączenia na telefon: najpierw nawiązujesz połączenie, a następnie możesz zacząć komunikować się ze sobą. Protokół WebSocket jest używany prawie wszędzie - od gier przeglądarki dla wielu graczy po aplikacje do czatu.
W tym artykule pokazuje, jak utworzyć protokół WebSocket i użyć go do komunikacji z wieloma użytkownikami.
Wymagania wstępne
Przed przejściem do procesu tworzenia i korzystania z protokołu WebSocket najpierw musisz zainstalować kilka rzeczy, które są wymagane do tego procesu. Pierwszą rzeczą, którą musisz zainstalować, jest węzeł.JS, platforma po stronie serwera, która konwertuje język programowania JavaScript w kod maszynowy, który umożliwia uruchamianie JavaScript bezpośrednio na komputerze. Aby zainstalować węzeł.JS, użytkownicy systemu Windows mogą po prostu przejść do oficjalnego węzła.Strona internetowa JS i kliknij przycisk Zielonego LTS znaleziony na środku ekranu.
Dla użytkowników Linux i MacOS kliknij Pliki Sekcja w podlecie strony internetowej.
Po otwarciu Pliki sekcja, zobaczysz pliki instalacyjne dla wszystkich trzech głównych platform. Wybierz pakiet obsługiwany przez system.
Uruchom instalator dostarczany z pobrymi plikami i węzłem.JS zostanie zainstalowany na twoim komputerze. Aby sprawdzić, czy program został zainstalowany, otwórz terminal i wydać następujące polecenie:
$ node -v
Po zainstalowaniu węzła.JS, masz teraz dostęp do różnych modułów JavaScript, co sprawi, że Twoja praca będzie bardziej wydajna. Otwórz katalog, w którym chcesz utworzyć architekturę klienta i serwera, a następnie otwórz terminal w tym katalogu i uruchom następujące polecenie:
$ npm init -y
To polecenie służy do utworzenia pakietu.plik JSON, który umożliwia skonfigurowanie i instalację innego węzła.Pakiety JS. Zainstaluj pakiet protokołu WebSocket, wydając następujące polecenie w terminalu:
$ npm instaluj WS
Utwórz trzy pliki, o nazwie indeks.HTML, klient.JS i serwer.JS. Jak wskazują nazwy, te pliki JavaScript są architekturą klienta i serwera naszego protokołu WebSocket. Teraz możemy w końcu zacząć pisać kod naszych aplikacji klienta i serwerów.
Tworzenie serwera WebSocket
Aby utworzyć serwer WebSocket, zaczniemy od napisania kodu dla serwera. Otworzyć serwer.JS plik, który utworzyłeś w edytorze tekstu lub IDE w poprzedniej sekcji i wprowadź następujące wiersze wewnątrz pliku.
const WebSocket = wymaga („WS”);const WS = nowy WebSocket.Serwer (port: 8080);
konsola.log („Serwer uruchomiony”);
WS.on („połączenie”, (WSS) =>
konsola.Log („Nowy klient podłączony”)
WSS.Wyślij („Witamy na serwerze!');
WSS.ON („Message”, (wiadomość) =>
konsola.log ('otrzymano serwer: $ message');
WSS.Wyślij („dostałem wiadomość:” + wiadomość);
);
);
Teraz wyjaśnimy, co każda linia robi bardziej szczegółowo.
Wyjaśnienie kodu
Jak wspomniano wcześniej, w węźle dostępnych jest kilka wbudowanych modułów.JS, które ułatwiają Twoją pracę. Aby zaimportować te moduły, użyjemy wymagać Słowo kluczowe.
const WebSocket = wymaga („WS”);const WS = nowy WebSocket.Serwer (port: 8080);
konsola.log („Serwer uruchomiony”);
Pierwsza linia służy do importowania węzła.Moduł JS WebSocket. Korzystając z tego modułu w następnym wierszu, tworzymy nasz serwer WebSocket, który słucha na porcie 8080. konsola.dziennik() Linia jest po prostu po to, aby nas poinformować, że serwer się zaczął. Zobaczysz to w terminalu po uruchomieniu następującego polecenia w terminalu:
$ Node Server
W następnym wierszu nawiązujemy połączenie między serwerem a klientem.
WS.on („połączenie”, (WSS) =>konsola.Log („Nowy klient podłączony”)
);
Po ustanowieniu połączenia WSS.Wiersz wyślij () wysyła wiadomość do klienta. W takim przypadku wiadomość jest „Witamy na serwerze."
WSS.Wyślij („Witamy na serwerze!');Wreszcie WSS.na („komunikat”) jest dla serwera, który odbiera wiadomość od klienta. W celu potwierdzenia serwer wysyła tę wiadomość z powrotem do klienta w ostatnim wierszu.
WSS.ON („Message”, (wiadomość) =>konsola.log ('otrzymano serwer: $ message');
WSS.Wyślij („dostałem wiadomość:” + wiadomość);
);
Tworzenie klienta WebSocket
Po stronie klienta potrzebujemy zarówno indeksu.plik HTML i klient.plik JS. Oczywiście możesz po prostu dodać treść od klienta.plik JS w twoim indeksie.plik HTML, ale wolę ich oddzielić. Najpierw spójrzmy na klienta.Kod JS. Otwórz plik i wprowadź następujące wiersze wewnątrz pliku:
const socket = new WebSocket ('WS: // LocalHost: 8080');gniazdo elektryczne.addEventListener („Open”, () =>
konsola.log („podłączony do serwera!');
);
gniazdo elektryczne.addEventListener („Message”, (msg) =>
konsola.log („Otrzymano klient: $ msg.dane');
);
const sendmsg = () =>
gniazdo elektryczne.Wyślij („Jak idzie amigo!');
Wyjaśnienie kodu
Jak z serwerem.JS, utworzymy nowy WebSocket, który słucha portu 8080, który można zobaczyć w Localhost: 8080 sekcja kodu.
const socket = new WebSocket ('WS: // LocalHost: 8080');W następnej linii, addEventListener Sprawia, że Twój klient słucha wszelkich wydarzeń, które się obecnie dzieje. W takim przypadku byłoby to tworzenie i uruchomienie serwera. Po ustaleniu połączenia klient wysyła komunikat do terminala.
gniazdo elektryczne.addEventListener („Open”, () =>konsola.log („podłączony do serwera!');
);
Po raz kolejny klient słucha wszelkich obecnie wydarzeń. Gdy serwer wysyła wiadomość, klient odbiera to, a następnie wyświetla wiadomość w terminalu.
gniazdo elektryczne.addEventListener („Message”, (msg) =>konsola.log („Otrzymano klient: $ msg.dane');
);
Ostatnie kilka wierszy to po prostu funkcja, w której klient wysyła wiadomość do serwera. Podłączymy to z przyciskiem w naszym pliku HTML, aby lepiej zrozumieć, jak to działa.
const sendmsg = () =>gniazdo elektryczne.Wyślij („Jak idzie amigo!');
Przygotowanie pliku HTML
Na koniec otwórz indeks.plik HTML i dodaj odniesienie do klienta.plik js w nim. W moim przypadku po prostu dodam następujące wiersze kodu:
Jak widać w poniższych wierszach, src (wewnątrz znacznika skryptu) odnosi się do pliku JavaScript klienta. Funkcja sendmsg, która została utworzona w kliencie.plik JS, został również podłączony do funkcji OnClick przycisku.
Składając wszystko razem
Możesz teraz rozpocząć testowanie architektury klienta i serwera. Najpierw otwórz terminal i uruchom następujące polecenie, aby uruchomić serwer:
$ Node Server
Po uruchomieniu serwera otwórz katalog, w którym indeks.Plik HTML jest obecny i kliknij go dwukrotnie, aby otworzyć go w przeglądarce. W terminalu pojawi się następujący komunikat stwierdzający, że klient podłączył się:
Możesz także sprawdzić wiadomości wysyłane z serwera do klienta, naciskając przycisk kliknięcia prawym przyciskiem myszy, a następnie otwierając Sprawdzać okno. W tym oknie kliknij Konsola sekcja i będziesz mógł zobaczyć wiadomości wysyłane z serwera.
Po kliknięciu przycisku zarówno serwer, jak i klient będą mogli wysyłać i odbierać wiadomości do siebie i od siebie.
serwer:
Klient:
Voilà, twoje połączenie WebSocket zostało ustanowione!
Wniosek
Protokół WebSocket to doskonały sposób na nawiązanie komunikacji między klientem a serwerem. Ten protokół jest używany w kilku dziedzinach, w tym w grach wieloosobowych, systemach czatu różnych platform mediów społecznościowych, a nawet procesów współpracy między programistami.