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:

Wyślij wiadomość na serwer

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.

Wyślij wiadomość na serwer

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.