Websocket met Node.js

Webapplicaties zijn aan het veranderen en evolueren, dit maakt de behoeften van gebruikers anders dan toen het eerste verbindingsprotocol op het netwerk werd gecreëerd. Bijgevolg is het protocol HTTP is in de loop der jaren geëvolueerd, maar heeft nog geen realtime niveau bereikt, zoals een verbinding TCP tussen twee teams.
Deze beperkingen zijn niet alleen schadelijk voor ontwikkelaars en gebruikers, maar zijn een bron van motivatie en creativiteit geworden, waardoor oplossingen zijn ontstaan ​​waarmee we niet alleen een transmissiesysteem in realtime kunnen nabootsen, maar ook door middel van HTTP doe het bijna native.
WebsocketDit is waar de Websocket, een relatief nieuw protocol dat alleen wordt ondersteund door de modernste browsers, waardoor we HTTP van al zijn beperkingen kunnen ontdoen en zo effectief kunnen communiceren via headers KRIJGEN.
Websocket Het bevindt zich nog in een periode van actieve rijping, dus het is heel goed mogelijk dat we het niet in nieuwe oplossingen zullen vinden, gelukkig in Node.js we hebben al een aantal tools waarmee we ze kunnen hanteren zonder te vertrouwen op onze vindingrijkheid om tools op een lager niveau te bouwen.
VereistenDit is een geavanceerde zelfstudie, dus we hebben eerst een functionele installatie nodig van: Node.js In ons systeem kunnen we deze tutorial bekijken voordat we er verder in gaan, bovendien hebben we beheerdersrechten nodig om de bibliotheken te kunnen installeren die we gaan gebruiken. We moeten bekend zijn met de concepten van: JavaScript bijvoorbeeld Bel terug en anonieme functies. Eindelijk moeten we een teksteditor hebben zoals Sublieme tekst waarmee we de verschillende codes in de voorbeelden kunnen schrijven.
Om te beginnen met het maken van een applicatie waarmee we kunnen gebruiken: Websockets We moeten eerst een kleine structuur bouwen, dit is heel eenvoudig maar noodzakelijk, deze structuur zal bestaan ​​uit:
1- Een map waarin we de bestanden van ons project zullen opslaan.
2- Een bestand met de naam server.js, zal dit bestand, zoals de naam aangeeft, de server zijn waarmee we de verbinding in realtime tot stand gaan brengen met behulp van de Websockets.
3- Een bestand met de naam klant.html, dit bestand zal de interface zijn om via de browser met onze server te communiceren, het is noodzakelijk om hetzelfde te hebben zodat we de bijbehorende informatie kunnen verzenden en ontvangen.
Omdat we onze structuur nu hebben gedefinieerd, kunnen we beginnen met het nemen van een paar regels code, hiervoor moeten we beginnen met het installeren van een externe bibliotheek met de naam ws in onze omgeving, aangezien dit degene is waarmee we het betreffende protocol kunnen gebruiken. Om deze bibliotheek te installeren, hoeven we alleen onze console te openen Node.js, we bevinden ons in de map waar onze bestanden zullen zijn en we plaatsen de volgende opdracht:

 npm installeer ws

Wanneer we het uitvoeren, kunnen we het volgende resultaat zien in onze opdrachtconsole:

Zodra we de bibliotheek hebben geïnstalleerd, kunnen we ons werk voortzetten, nu in ons bestand server.js We moeten de volgende code schrijven, laten we eerst kijken waar het uit bestaat, dan zullen we het uitleggen:

 var WSServer = vereisen ('ws') Server, wss = nieuwe WSServer ({port: 8085}); wss.on ('verbinding', functie (socket) {socket.on ('bericht', functie (msg) {console.log ('Ontvangen:', msg, '\ n', 'Van IP:', socket . upgradeReq.connection.remoteAddress); if (msg === 'Hallo') {socket.send ('Ja, het werkt!');}}); socket.on ('close', function (code, desc) {console .log ('Offline:' + code + '-' + desc);});});

Het eerste wat we doen is de bibliotheek nodig hebben ws die we zojuist hebben geïnstalleerd en onmiddellijk in dezelfde instructie bel je klas Server, dan maken we een instantie waarmee we een server gaan maken die op de poort draait 8085Deze poort kan alles zijn waar we toegang toe hebben, in dit geval wordt 8085 gebruikt zodat er geen conflict is met andere services die zich momenteel in deze testomgeving bevinden.
Omdat we onze instantie nu hebben gedefinieerd, gaan we de methode toepassen.Aan () voor de verbindingsgebeurtenis, dan in de Bel terug daaruit passeren we een object genaamd stopcontact, hiermee zullen we de berichten van de klant ontvangen en hebben we een routine geschreven die als we het woord ontvangen "Hallo" de server zal een bericht retourneren, waar we op zijn beurt ook iets in de opdrachtconsole zullen afdrukken. Ten slotte, als we de verbinding verbreken, hebben we slechts één bericht op de console.
Zodra we onze server hebben, is het tijd om onze client te bouwen, want deze in het bestand klant.html we gaan een structuur definiëren waar we html-tags gaan plaatsen en a JavaScript die zal functioneren als een link naar onze server. Laten we eens kijken hoe ons bestand eruit ziet:

 Websockets Client Verzenden

Het onderdeel HTML is vrij eenvoudig, we hebben een teksttype-invoer en een verzendknop, evenals een div output genaamd, dat is wie de informatie van de server zal ontvangen om deze aan de gebruiker te tonen. Het interessante komt in het label waar het eerste wat we doen is een object van het type maken WebSocket en wij geven de route aan waar je die moet vinden, in ons geval is dat de localhost: 8085 en zodat we kunnen zien dat wat we deden in de server.js. Vervolgens koppelen we onze verzend-, tekst- en uitvoerelementen aan variabelen die we kunnen gebruiken.
Wat we vervolgens doen, is elk van de methoden definiëren die we van de server kunnen ontvangen, dus elke keer dat we iets verzenden, wordt het opgenomen in onze uitvoer, allemaal dankzij de methode versturen (). De andere methode die we gebruiken is de onbericht () die alleen wordt geactiveerd als onze server reageert en we voegen het resultaat toe aan onze HTML.
Ten slotte gebruiken we de methoden sluiten () Y fout (), de eerste geeft ons een bericht wanneer de verbinding met de Websocket wordt gestopt of gesloten, en de tweede informeert ons in het geval er een fout is opgetreden. Hiermee hoeven we alleen de server in onze console te starten en ons voorbeeld aan het werk te zetten, hiervoor gebruiken we het volgende commando:

 node server.js

Hiermee wordt de server gestart, maar om de functionaliteit van onze code te verifiëren, moeten we ons client.html-bestand in onze browser naar keuze uitvoeren en iets in het tekstvak schrijven en op de verzendknop drukken, dit zal communicatie genereren met de websocket en we kunnen de reactie per console zien:

In de afbeelding kunnen we zien hoe de opdrachtconsole het ontvangen bericht afdrukt, zelfs het IP-adres registreert van waaruit het de gegevens ontvangt, dit was wat we in ons bestand hebben geprogrammeerd server.js, waar we ook aangaven dat als we het woord "Hallo" zouden ontvangen, we een antwoordbericht zouden sturen dat precies is wat we in het browservenster in dezelfde afbeelding zien. Als we nu de browser verversen, is de verbinding verbroken, dit wordt ook geregistreerd door onze applicatie, laten we eens kijken:

Als we ten slotte de verbinding in onze console sluiten met CTRL + C Om de server te stoppen, activeert onze browser de error handler en daar zien we een nieuw bericht:

Als we waarnemers zijn geweest, hebben we misschien iets belangrijks opgemerkt, op geen enkel moment om reacties te ontvangen, hebben we de browser moeten vernieuwen of een verzoek hebben ingediend Ajax, alles is direct bidirectioneel geweest met WebSockets, dit is wat realtime wordt genoemd.
Wat we hebben laten zien is een van de meest rudimentaire en handmatige manieren die er zijn, maar het werkt voor ons om te weten hoe de workflow is, maar de echte functionaliteit die klaar is voor productieomgevingen wordt bereikt met de bibliotheek socket.io, doet dit hetzelfde als in de tutorial, maar veel compacter en minder foutgevoelig door de ontwikkelaar, waardoor we ons alleen kunnen concentreren op de logica van de applicatie en niet zozeer op het technische gedeelte ervan.
Voor installatie: socket.io we moeten gewoon een npm installeren socket.io en hiermee zullen we vanuit de repository de nieuwste stabiele versie van de bibliotheek downloaden, waarmee we onze ontwikkeling kunnen starten.
Hiermee hebben we deze tutorial afgerond, waarmee we een belangrijke stap hebben gezet binnen Node.js door te weten hoe u de Websockets, wordt deze technologie elke dag belangrijker, omdat het ons helpt toepassingen te maken die op het web nooit waren bedacht. Het is ook belangrijk dat we onszelf documenteren over het protocol, omdat het een manier is om het potentieel te begrijpen van wat we kunnen bereiken door simpelweg applicaties te ontwikkelen.