Ovaj se članak usredotočuje na razumijevanje koncepta WebSockets u Node.js za uspostavljanje pristupnika za dvosmjernu komunikaciju u stvarnom vremenu.
WebSockets
Websockets su vrsta komunikacijskog kanala koji stvara dvosmjerne kanale za informacije putem jedne i dugotrajne komunikacije. Nije poput uobičajene dvosmjerne komunikacije na internetu, omogućuje i korisniku i poslužitelju slanje poruka kad god žele. Tehnika koja se koristi je WebSocket rukovanje, proces koji uspostavlja glatku vezu između poslužitelja i korisnika, što im omogućuje dijeljenje informacija naprijed i natrag bez ikakvih problema.
Pogledajmo neke od pogodnosti WebSocketa prije nego što krenemo u uspostavljanje vlastitog.
Prednosti WebSockets
WebSockets nudi brojne prednosti u odnosu na tradicionalni HTTP:
Brža brzina
Kada je korisnik postavio WebSocket, veza ostaje otvorena cijelo vrijeme i nema potrebe za pokretanjem ili zaustavljanjem veze, što sve čini bržim bez ikakvog kašnjenja.
Učinkovito korištenje resursa
WebSockets učinkovito koriste resurse računala. Budući da se ne gubi vrijeme na pokretanje ili zaustavljanje veze za svaki zahtjev, računalo radi optimalnije.
Instant ažuriranja
Ako korisnik izrađuje aplikaciju koja treba odmah prenijeti informacije u stvarnom vremenu poput razgovora, sportskih rezultata itd. WebSockets osiguravaju da informacije putuju brzo.
Sada kada bolje razumijemo što pokušavamo uspostaviti, izgradimo vlastiti WebSocket u Node.js.
Kako uspostaviti i koristiti WebSocket u Node.js?
Slijedite korake u nastavku kako biste uspješno postavili WebSocket na svom uređaju:
Korak 1: Postavite razvojno okruženje
Prije uspostavljanja WebSocketa potrebno je instalirati neke preduvjetne pakete i module.
Instalirajte sljedeće pakete na svoj uređaj:
npm init -ynpm instalirati ws
Funkcioniranje ovih naredbenih linija je sljedeće:
- “ npm init -y ” inicijalizira novi Node.js projekt. ' -i ” naredba znači da što se može izdiktirati kao istinito u računalnom jeziku. Također osigurava da će koristiti sve pakete i module u json datoteka. The paket.json sadrži sve informacije o Node.js projektu kao što su ovisnosti, moduli i druge postavke.
- Nakon što je projekt inicijaliziran, korisnik može pokrenuti drugu naredbu za instaliranje ' ws ” paket. Pruža osnovni API koji stvara Websocket za poslužitelje i klijente.
Ove dvije naredbe postavljaju razvojno okruženje za uspostavljanje WebSocketa i komunikaciju informacija u stvarnom vremenu.
package.json datoteku u Node.js
Datoteka pakackge.json ima sve prateće funkcije za projekt Node.js.
Sadržaj datoteke package.json bit će ovakav:
Okvir crvene boje na gornjoj slici prikazuje verziju vaše instalirane biblioteke ws(WebSocket).
Nakon postavljanja razvojnog okruženja, prijeđite na izradu WebSocketa.
Korak 2: Stvaranje WebSocket poslužitelja
Za izradu WebSocket poslužitelja kreirajte datoteku u uređivaču koda s ekstenzijom .js i bilo kojim željenim nazivom.
Ispod je kod za datoteku poslužitelja:
konst WebSocket = zahtijevati ( 'ws' ) ;konst http = zahtijevati ( 'http' ) ;
konst poslužitelj = http. createServer ( ) ;
konst wss = novi WebSocket. poslužitelj ( { poslužitelj } ) ;
wss. na ( 'veza' , ( ws ) => {
konzola. log ( 'Klijent povezan' ) ;
ws. na ( 'poruka' , ( poruka ) => {
konzola. log ( `Primljeno : $ { poruka } ` ) ;
wss. klijentima . za svakoga ( ( klijent ) => {
ako ( klijent !== ws && klijent. readyState === WebSocket. OTVOREN ) {
klijent. poslati ( poruka ) ;
}
} ) ;
} ) ;
ws. na ( 'Zatvoriti' , ( ) => {
konzola. log ( 'Klijent prekinut' ) ;
} ) ;
} ) ;
poslužitelj. slušati ( 3000 , ( ) => {
konzola. log ( 'Poslužitelj sluša http://localhost:3000' ) ;
} ) ;
Funkcije koje obavlja gornji kod su:
- “ const WebSocket = require('ws') ' i ' const http = require('http') ” uvozi potrebne ugrađene module za rukovanje HTTP zahtjevima.
- “const server = http.createServer()” stvara osnovni poslužitelj u Node.js.
- “ const wss = novi WebSocket.Server({ server}) ” stvara WebSocket na kreiranom HTTP poslužitelju. Za slušanje dolaznih poruka WebSocketa, postavlja se web socket poslužitelj.
- “ on('connection', (ws) => { … }) ” se izvršava kada klijent uspostavi WebSocket vezu. Primjer ' ws ” stvara se koja predstavlja vezu.
- “ on(‘poruka’, (poruka) => { … }) ” Ovaj kod se izvršava kada se poruka (od povezanog klijenta) primi na poslužitelj. Zapisuje primljenu poruku i zatim je emitira svim povezanim klijentima.
- “ clients.forEach((client) => { … }) ” prelazi preko svih povezanih klijenata i šalje poruku svakom klijentu ako je WebSocket veza otvorena.
- ' on(‘close’, () => { … }) ” kod se izvršava kada se klijent odspojio s WebSocket veze i pošalje poruku poslužitelju koja pokazuje da se klijent odspojio.
- “ slušaj(3000, () => { … }) ” pokreće HTTP poslužitelj da sluša na portu 3000. Nakon što je poslužitelj pokrenut, prikazuje se poruka da poslužitelj sada sluša „http://localhost:3000/”. Users can have some other port that is listening to the connections.
Sada kada je naš WebSocket kreiran, testirajmo ga sa strane klijenta.
Korak 3: Kreirajte klijenta za testiranje stvorenog WebSocketa
Sada izradite osnovnu HTML datoteku koja se pokreće na web stranici kako biste testirali WebSocket. Stvorite index.html datoteku i koristite kod ispod:
< html samo = 'u' >
< glava >
< meta skup znakova = 'UTF-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1.0' >
< titula > WebSocket Chat < / titula >
< / glava >
< tijelo >
< ulazni tip = 'tekst' iskaznica = 'messageInput' rezerviranog mjesta = 'Upišite poruku...' >
< dugme na klik = 'Pošalji poruku()' > Poslati < / dugme >
< ul iskaznica = 'chatMessages' >< / ul >
< skripta >
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('Spojen na poslužitelj');
});
ws.addEventListener('message', (event) => {
const chatMessages = document.getElementById('chatMessages');
const messageItem = document.createElement('li');
messageItem.textContent = event.data;
chatMessages.appendChild(messageItem);
});
funkcija sendMessage() {
const messageInput = document.getElementById('messageInput');
const poruka = messageInput.value;
ako (poruka) {
ws.send(poruka);
messageInput.value = '';
}
}
< / skripta >
< / tijelo >
< / html >
Funkcioniranje gornjeg koda je sljedeće:
- Napisan je osnovni format koda za HTML.
- “ ” stvara okvir za unos na HTML web-stranici s rezerviranim mjestom koje označava poruku u koju korisnik može upisati poruku.
- “ ” šalje upisanu poruku od korisnika na poslužitelj.
- “
- “