Websocket z Node.js

Aplikacje webowe zmieniały się i ewoluowały, co sprawia, że ​​potrzeby użytkowników są inne niż wtedy, gdy w sieci powstawał pierwszy protokół połączenia. W konsekwencji protokół HTTP ewoluował przez lata, ale nie osiągnął jeszcze poziomu czasu rzeczywistego, takiego jak połączenie TCP między dwoma zespołami.
Te ograniczenia, zamiast szkodzić programistom i użytkownikom, stały się źródłem motywacji i kreatywności, generując rozwiązania, które pozwalają nam nie tylko emulować system transmisji w czasie rzeczywistym, ale także poprzez HTTP rób to prawie natywnie.
Gniazdo siecioweTo tutaj Gniazdo sieciowe, stosunkowo nowy protokół, który jest obsługiwany tylko przez najnowocześniejsze przeglądarki, co pozwala nam na pozbycie się wszystkich ograniczeń HTTP i dzięki temu możemy skutecznie komunikować się za pośrednictwem nagłówków DOSTWAĆ.
Gniazdo sieciowe Jest jeszcze w okresie aktywnego dojrzewania, więc bardzo możliwe, że nie znajdziemy go w nowych rozwiązaniach, na szczęście w Node.js mamy już kilka narzędzi, które pozwalają nam obsługiwać je bez konieczności polegania na naszej pomysłowości w tworzeniu narzędzi niższego poziomu.
WymaganiaJest to zaawansowany samouczek, więc najpierw będziemy potrzebować funkcjonalnej instalacji Node.js W naszym systemie możemy zapoznać się z tym samouczkiem, zanim przejdziemy dalej, dodatkowo będziemy potrzebować uprawnień administratora, aby móc zainstalować biblioteki, z których będziemy korzystać. Musimy znać pojęcia JavaScript na przykład oddzwonić i funkcje anonimowe. Wreszcie musimy mieć edytor tekstu, taki jak Wzniosły tekst to pozwala nam napisać różne kody, które są w przykładach.
Aby rozpocząć tworzenie aplikacji, która pozwala nam korzystać Gniazda sieciowe Najpierw musimy zbudować małą strukturę, jest to bardzo proste, ale konieczne, ta struktura będzie się składać z:
1- Folder, w którym będziemy przechowywać pliki naszego projektu.
2- plik o nazwie serwer.js, plik ten, jak sama nazwa wskazuje, będzie serwerem, przez który będziemy nawiązywać połączenie w czasie rzeczywistym za pomocą Gniazda sieciowe.
3- plik o nazwie klient.html, plik ten będzie interfejsem do komunikacji z naszym serwerem przez przeglądarkę, konieczne jest posiadanie tego samego, abyśmy mogli wysyłać i odbierać odpowiednie informacje.
Ponieważ mamy już zdefiniowaną naszą strukturę, możemy zacząć brać kilka linijek kodu, w tym celu musimy zacząć od zainstalowania zewnętrznej biblioteki o nazwie ws w naszym środowisku, ponieważ to właśnie ono pozwoli nam korzystać z danego protokołu. Aby zainstalować tę bibliotekę, wystarczy otworzyć naszą konsolę Node.js, znajdujemy się w folderze, w którym będą nasze pliki i umieszczamy następujące polecenie:

 npm zainstaluj ws

Gdy go wykonamy, w naszej konsoli poleceń możemy zobaczyć następujący wynik:

Po zainstalowaniu biblioteki możemy kontynuować naszą pracę, teraz w naszym pliku serwer.js Musimy napisać następujący kod, najpierw zobaczmy, z czego się składa, a potem go wyjaśnimy:

 var WSServer = require ('ws').Serwer, wss = new WSServer ({port: 8085}); wss.on ('connection', function (socket) {socket.on ('message', function (msg) {console.log ('Received:', msg, '\ n', 'from IP:', socket). upgradeReq.connection.remoteAddress); if (msg === 'Witaj') {socket.send ('Tak, to działa!');}}); socket.on ('zamknij', funkcja (kod, opis) {konsola .log („Offline:” + kod + „-” + opis);});});

Pierwszą rzeczą, którą robimy, jest wymaganie biblioteki ws że właśnie zainstalowaliśmy i natychmiast w tej samej instrukcji zadzwoń do swojej klasy serwer, następnie tworzymy instancję, za pomocą której zamierzamy stworzyć serwer działający na porcie 8085Ten port może być tym, do czego mamy dostęp.W tym przypadku używany jest 8085, aby nie było konfliktu z innymi usługami, które są obecnie w tym środowisku testowym.
Ponieważ zdefiniowaliśmy naszą instancję, teraz zastosujemy tę metodę.na () dla zdarzenia połączenia, a następnie w oddzwonić z niego mijamy obiekt o nazwie gniazdo elektryczne, dzięki temu będziemy otrzymywać wiadomości od klienta i napisaliśmy rutynę, że jeśli otrzymamy słowo "Cześć" serwer zwróci komunikat, w którym z kolei wypiszemy również coś w konsoli poleceń. Na koniec, jeśli zamkniemy połączenie, na konsoli pojawi się tylko jeden komunikat.
Kiedy już mamy nasz serwer, czas na zbudowanie naszego klienta, dla niego w pliku klient.html zdefiniujemy strukturę, w której będziemy umieszczać tagi html i a JavaScript który będzie działał jako link do naszego serwera. Zobaczmy, jak wygląda nasz plik:

 Prześlij klienta Websockets

Część HTML jest dość proste, mamy wejście typu tekstowego i przycisk przesyłania, a także div zwane wyjściem, czyli kto otrzyma informacje z serwera, aby pokazać je użytkownikowi. Ciekawa rzecz pojawia się w etykiecie, gdzie pierwszą rzeczą, którą robimy, jest stworzenie obiektu tego typu WebSocket a my wskazujemy trasę tam, gdzie trzeba ją znaleźć, w naszym przypadku jest to Lokalny Gospodarz: 8085 i tak możemy zobaczyć, że to, co zrobiliśmy w serwer.js. Następnie łączymy nasze elementy wysyłania, tekstu i wyjścia ze zmiennymi, których możemy użyć.
Następnie definiujemy każdą z metod, które możemy otrzymać z serwera, więc za każdym razem, gdy coś wyślemy, zostanie to zapisane w naszym wyjściu, wszystko dzięki metodzie wysłać (). Inną metodą, której używamy, jest onwiadomość () który jest aktywowany tylko wtedy, gdy nasz serwer odpowie i dodamy wynik w naszym HTML.
Wreszcie używamy metod włączzamknij () Tak błąd (), pierwszy daje nam komunikat, gdy połączenie z Gniazdo sieciowe jest zatrzymany lub zamknięty, a drugi informuje nas w przypadku wystąpienia błędu. Dzięki temu musimy tylko uruchomić serwer w naszej konsoli i uruchomić nasz przykład, do tego używamy następującego polecenia:

 node server.js

Spowoduje to uruchomienie serwera, ale aby zweryfikować funkcjonalność naszego kodu musimy uruchomić nasz plik client.html w wybranej przez nas przeglądarce i napisać coś w polu tekstowym i nacisnąć przycisk wysyłania, to wygeneruje komunikację z gniazdo sieciowe a odpowiedź widzimy na konsoli:

Na obrazku widzimy, jak konsola poleceń drukuje otrzymaną wiadomość, nawet rejestruje adres IP, z którego otrzymuje dane, to właśnie zaprogramowaliśmy w naszym pliku serwer.js, gdzie wskazaliśmy również, że jeśli otrzymamy słowo „Hello”, wyślemy wiadomość zwrotną, która jest właśnie tym, co widzimy w oknie przeglądarki na tym samym obrazie. Teraz, jeśli odświeżymy przeglądarkę, połączenie jest zerwane, jest to również rejestrowane przez naszą aplikację, zobaczmy:

Wreszcie, jeśli zamkniemy połączenie w naszej konsoli za pomocą CTRL + C Aby zatrzymać serwer, nasza przeglądarka odpala program obsługi błędów i tam zobaczymy nową wiadomość:

Jeśli byliśmy obserwatorami, być może zauważyliśmy coś ważnego, w żadnym momencie, aby otrzymać odpowiedzi, nie musieliśmy odświeżyć przeglądarki lub złożyć żądania Ajaks, wszystko było dwukierunkowe bezpośrednio z Gniazda sieciowe, to się nazywa w czasie rzeczywistym.
To, co pokazaliśmy, jest jednym z najbardziej podstawowych i ręcznych sposobów, jakie istnieją, jednak działa, że ​​wiemy, jak wygląda przepływ pracy, ale prawdziwą funkcjonalność gotową do środowisk produkcyjnych uzyskuje się dzięki bibliotece gniazdo.io, robi to samo, co zrobiliśmy w samouczku, ale w znacznie bardziej zwartej i mniej podatnej na błędy dewelopera, co pozwala nam skupić się tylko na logice aplikacji, a nie na jej technicznej części.
Do instalacji gniazdo.io musimy tylko zrobić npm zainstaluj gniazdo.io a dzięki temu z repozytorium pobierzemy najnowszą stabilną wersję biblioteki, która pozwoli nam rozpocząć rozwój.
W ten sposób zakończyliśmy ten samouczek, w którym zrobiliśmy ważny krok wewnątrz Node.js wiedząc, jak korzystać z Gniazda sieciowe, ta technologia staje się coraz ważniejsza każdego dnia, ponieważ pomaga nam tworzyć aplikacje, o których nigdy nie myślano w sieci. Ważne jest również, abyśmy sami udokumentowali protokół, ponieważ jest to sposób na zrozumienie potencjału tego, co możemy osiągnąć po prostu tworząc aplikacje.