Denne artikel fokuserer på at forstå konceptet med WebSockets i Node.js for at etablere en gateway til tovejskommunikation i realtid.
WebSockets
Websockets er en type kommunikationskanal, der skaber to-vejs kanaler for information over en enkelt og langvarig kommunikation. Det er ikke som den sædvanlige tovejskommunikation på internettet, det giver både brugeren og serveren mulighed for at sende beskeder, når de vil. Teknikken, der anvendes, er WebSocket-håndtryk, en proces, der etablerer en smidig forbindelse mellem serveren og brugeren, som sætter dem i stand til at dele information frem og tilbage uden problemer.
Lad os se på nogle af fordelene ved WebSockets, før vi dykker ned i at etablere en af vores egne.
Fordele ved WebSockets
WebSockets tilbyder flere fordele i forhold til traditionel HTTP:
Hurtigere hastighed
Når brugeren har sat WebSocket op, forbliver forbindelsen åben hele tiden, og der er ingen grund til at starte eller stoppe forbindelsen, hvilket gør tingene hurtigere uden forsinkelse.
Effektiv ressourceanvendelse
WebSockets bruger ressourcerne på computere effektivt. Da der ikke er spildt tid på at starte eller stoppe forbindelsen for hver anmodning, fungerer computeren mere optimalt.
Øjeblikkelige opdateringer
Hvis brugeren laver en applikation, der straks skal overføre information i realtid som chat, sportsresultater osv. WebSockets sikrer, at informationen går hurtigt.
Nu hvor vi har en bedre forståelse af, hvad vi forsøger at etablere, så lad os bygge vores egen WebSocket i Node.js.
Hvordan etablerer og bruger man en WebSocket i Node.js?
Følg nedenstående trin for at konfigurere en WebSocket på din enhed:
Trin 1: Konfigurer udviklingsmiljøet
Før etablering af en WebSocket er der nogle forudsætningspakker og moduler, der skal installeres.
Installer nedenstående pakker på din enhed:
npm init -ynpm installer ws
Funktionen af disse kommandolinjer er som følger:
- “ npm init -y ” initialiserer et nyt Node.js-projekt. Det ' -og ” kommando betyder ja, som kan dikteres som sand på computersprog. Det sikrer også, at det vil bruge alle pakker og moduler i json fil. Det package.json filen indeholder alle oplysninger om Node.js-projektet, såsom afhængigheder, moduler og andre indstillinger.
- Efter at projektet er blevet initialiseret, kan brugeren køre den anden kommando for at installere ' ws ' pakke. Det giver en base API, der opretter en Websocket til servere og klienter.
Disse to kommandoer sætter et udviklingsmiljø op til at etablere WebSocket og kommunikere information i realtid.
package.json-filen i Node.js
En pakackge.json-fil har alle de understøttende funktioner til Node.js-projektet.
Indholdet af filen package.json vil være sådan:
Den røde farveboks på billedet ovenfor viser versionen af dit ws(WebSocket)-bibliotek installeret.
Efter opsætning af udviklingsmiljøet, fortsæt med at oprette en WebSocket.
Trin 2: Oprettelse af WebSocket Server
For at oprette en WebSocket-server skal du oprette en fil i din kodeeditor med .js-udvidelsen og et hvilket som helst ønskeligt navn.
Nedenfor er koden til serverfilen:
konst WebSocket = kræve ( 'ws' ) ;konst http = kræve ( 'http' ) ;
konst server = http. opretteServer ( ) ;
konst wss = ny WebSocket. Server ( { server } ) ;
wss. på ( 'forbindelse' , ( ws ) => {
konsol. log ( 'Kunde forbundet' ) ;
ws. på ( 'besked' , ( besked ) => {
konsol. log ( `Modtaget : $ { besked } ` ) ;
wss. klienter . for hver ( ( klient ) => {
hvis ( klient !== ws && klient. klarState === WebSocket. ÅBEN ) {
klient. sende ( besked ) ;
}
} ) ;
} ) ;
ws. på ( 'tæt' , ( ) => {
konsol. log ( 'Klient afbrudt' ) ;
} ) ;
} ) ;
server. Hør efter ( 3000 , ( ) => {
konsol. log ( 'Server lytter på http://localhost:3000' ) ;
} ) ;
Funktionerne udført af ovenstående kode er:
- “ const WebSocket = require('ws') ' og ' const http = kræve('http') ” importerer de nødvendige indbyggede moduler til håndtering af HTTP-anmodninger.
- 'const server = http.createServer()' opretter en grundlæggende server i Node.js.
- “ const wss = ny WebSocket.Server({ server }) ” opretter en WebSocket på den oprettede HTTP-server. For at lytte til indgående meddelelser fra WebSocket, konfigurerer den en web-socket-server.
- “ on('forbindelse', (ws) => { … }) ” udføres, når en klient etablerer en WebSocket-forbindelse. Et eksempel' ws ” oprettes som repræsenterer forbindelsen.
- “ on('besked', (meddelelse) => { … }) ” Denne kode udføres, når en besked (fra den tilsluttede klient) modtages til serveren. Den logger den modtagne besked og sender den derefter til alle tilsluttede klienter.
- “ clients.forEach((client) => { … }) ” sløjfer over alle de tilsluttede klienter og sender en besked til hver klient, hvis WebSocket-forbindelsen er åben.
- Det ' on('luk', () => { … }) ” kode udføres, når klienten har afbrudt forbindelsen fra WebSocket-forbindelsen og sender en besked til serveren, der angiver, at klienten har afbrudt forbindelsen.
- “ lyt(3000, () => { … }) ” starter HTTP-serveren til at lytte på port 3000. Når serveren kører, angiver den en meddelelse om, at serveren nu lytter på “http://localhost:3000/”. Users can have some other port that is listening to the connections.
Nu hvor vores WebSocket er blevet oprettet, lad os teste det fra klientens ende.
Trin 3: Opret en klient for at teste den oprettede WebSocket
Opret nu en grundlæggende HTML-fil, der kører på websiden for at teste WebSocket. Opret en index.html fil og brug koden nedenfor:
< html lige = 'i' >
< hoved >
< meta tegnsæt = 'UTF-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1.0' >
< titel > WebSocket Chat < / titel >
< / hoved >
< legeme >
< input type = 'tekst' id = 'meddelelsesinput' pladsholder = 'Skriv en besked...' >
< knap onclick = 'Send besked()' > Sende < / knap >
< ul id = 'chatmeddelelser' >< / ul >
< manuskript >
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('Forbundet til serveren');
});
ws.addEventListener('besked', (begivenhed) => {
const chatMessages = document.getElementById('chatMessages');
const messageItem = document.createElement('li');
messageItem.textContent = begivenhed.data;
chatMessages.appendChild(messageItem);
});
function sendMessage() {
const messageInput = document.getElementById('messageInput');
const besked = messageInput.value;
if (besked) {
ws.send(besked);
messageInput.value = '';
}
}
< / manuskript >
< / legeme >
< / html >
Funktionen af ovenstående kode er som følger:
- Det grundlæggende kodeformat for HTML er skrevet.
- “ ” opretter et inputfelt på HTML-websiden med pladsholderen, der angiver en besked, som brugeren skal skrive en besked.
- “ ” sender den indtastede besked fra brugeren til serveren.
- “
- '