Phenquestions
WebSocket'i protokoll võimaldab kliendi ja serveri vahel toimida kahesuunaliselt. See protsess sarnaneb teie telefonikõnede toimumisviisiga: kõigepealt loote ühenduse ja seejärel saate üksteisega suhelda. WebSocket'i protokolli kasutatakse peaaegu kõikjal - alates mitme mängijaga brausermängudest kuni vestlusrakendusteni.
See artikkel näitab, kuidas luua WebSocket-protokoll ja kasutada seda mitme kasutajaga suhtlemiseks.
Eeldused
Enne WebSocket'i protokolli loomise ja kasutamise protsessi jätkamist peate kõigepealt installima mõned selle protsessi jaoks vajalikud asjad. Esimene asi, mida peate installima, on Node.js, serveripoolne platvorm, mis teisendab JavaScripti programmeerimiskeele masinakoodiks, mis võimaldab teil JavaScripti käivitada otse arvutis. Node'i installimiseks.js, Windowsi kasutajad saavad lihtsalt minna ametlikku sõlme.js veebisaidil ja klõpsake ekraani keskel asuval rohelisel nupul LTS.
Linuxi ja macOS-i kasutajate jaoks klõpsake nuppu Allalaadimised jaotis veebisaidi alampäises.
Pärast avamist Allalaadimised jaotises näete kõigi kolme suurema platvormi installifaile. Valige pakett, mida teie süsteem toetab.
Käivitage allalaaditud failidega kaasas olev installer ja Node.js installitakse teie arvutisse. Programmi installimise kontrollimiseks avage terminal ja väljastage järgmine käsk:
$ sõlm -v
Pärast Node'i installimist.js, teil on nüüd juurdepääs erinevatele JavaScripti moodulitele, mis muudavad teie töö pikas perspektiivis tõhusamaks. Avage kataloog, kuhu soovite oma kliendi ja serveri arhitektuuri luua, seejärel avage terminal selles kataloogis ja käivitage järgmine käsk:
$ npm init -y
Seda käsku kasutatakse paketi loomiseks.jsoni fail, mis võimaldab teil seadistada ja installida erinevaid sõlme.js paketid. Installige WebSocket'i protokollipakett, väljastades terminalis järgmise käsu:
$ npm install ws
Looge kolm faili nimega indeks.HTML, klient.js ja server.js. Nagu nimed näitavad, on need JavaScripti failid meie WebSocket'i protokolli kliendi ja serveri arhitektuur. Nüüd saame lõpuks hakata kirjutama oma kliendi- ja serverirakenduste koodi.
WebSocket Serveri loomine
WebSocket-serveri loomiseks kirjutame kõigepealt serveri koodi. Ava server.js fail, mille lõite eelmises jaotises tekstiredaktoris või IDE-s ja sisestage faili järgmised read.
const WebSocket = nõuda ('ws');const ws = uus WebSocket.Server (port: 8080);
konsool.logi ("Server käivitatud");
ws.sisse ('ühendus', (wss) =>
konsool.logi ("Uus klient on ühendatud")
wss.saada ('Tere tulemast serverisse!');
wss.sees ('sõnum', (sõnum) =>
konsool.log ('Server sai: $ message');
wss.send ('Sain oma sõnumi:' + sõnum);
);
);
Nüüd selgitame üksikasjalikumalt, mida iga rida teeb.
Koodi selgitus
Nagu varem mainitud, on Node'is saadaval mõned sisseehitatud moodulid.js, mis muudavad teie töö palju lihtsamaks. Nende moodulite importimiseks kasutame nõuda märksõna.
const WebSocket = nõuda ('ws');const ws = uus WebSocket.Server (port: 8080);
konsool.logi ("Server käivitatud");
Esimest rida kasutatakse sõlme importimiseks.js WebSocket moodul. Selle mooduli abil loome järgmisel real oma WebSocket-serveri, mis kuulab porti 8080. The konsool.logi () rida on lihtsalt selleks, et meile teada anda, et server on käivitatud. Näete seda oma terminali sees, kui käivitate terminalis järgmise käsu:
$ sõlme server
Järgmisel real loome ühenduse serveri ja kliendi vahel.
ws.sisse ('ühendus', (wss) =>konsool.logi ("Uus klient on ühendatud")
);
Pärast ühenduse loomist on wss.send () rida saadab kliendile sõnumi. Sellisel juhul on sõnum „Tere tulemast serverisse.”
wss.saada ('Tere tulemast serverisse!');Lõpuks wss.on (sõnum) on mõeldud serverile kliendilt sõnumi vastuvõtmiseks. Kinnituseks saadab server selle sõnumi kliendile viimasel real tagasi.
wss.sees ('sõnum', (sõnum) =>konsool.log ('Server sai: $ message');
wss.send ('Sain oma sõnumi:' + sõnum);
);
WebSocket'i kliendi loomine
Kliendipoole jaoks vajame mõlemat indeksit.HTML-fail ja klient.js-fail. Muidugi saate sisu lihtsalt kliendilt lisada.js-fail teie registrisse.HTML-fail, kuid eelistan neid eraldi hoida. Vaatame kõigepealt klienti.js kood. Avage fail ja sisestage faili sisse järgmised read:
const socket = uus WebSocket ('ws: // localhost: 8080');pistikupesa.addEventListener ('avatud', () =>
konsool.logi ('Ühendatud serveriga!');
);
pistikupesa.addEventListener ('sõnum', (msg) =>
konsool.log ('Klient sai: $ msg.andmed ');
);
const sendMsg = () =>
pistikupesa.send ('Kuidas läheb amigoks!');
Koodi selgitus
Nagu serveriga.js, loome uue veebipesa, mis kuulab porti 8080, mida saab näha kohalik host: 8080 jaotises kood.
const socket = uus WebSocket ('ws: // localhost: 8080');Järgmisel real, addEventListener paneb teie kliendi kuulama kõiki toimuvaid sündmusi. Sel juhul oleks see serveri loomine ja käivitamine. Kui ühendus on loodud, väljastab klient terminalile teate.
pistikupesa.addEventListener ('avatud', () =>konsool.logi ('Ühendatud serveriga!');
);
Veelkord kuulab klient kõiki praegu toimuvaid sündmusi. Kui server saadab sõnumi, saab klient selle kätte ja kuvab siis sõnumi terminalis.
pistikupesa.addEventListener ('sõnum', (msg) =>konsool.log ('Klient sai: $ msg.andmed ');
);
Viimased read on lihtsalt funktsioon, kus klient saadab serverile sõnumi. Ühendame selle oma HTML-faili nupuga, et paremini mõista, kuidas see toimib.
const sendMsg = () =>pistikupesa.send ('Kuidas läheb amigoks!');
HTML-faili ettevalmistamine
Lõpuks avage register.HTML-fail ja lisage viide oma kliendile.js fail selle sees. Minu puhul lisan lihtsalt järgmised koodiread:
Nagu näete allolevatel ridadel, src (skripti sildi sees) viitab kliendi javascripti failile. Funktsioon sendMsg, mis loodi kliendis.js-fail on ühendatud ka nupu onClick-funktsiooniga.
Kõik kokku panemine
Nüüd saate alustada oma kliendi ja serveri arhitektuuri testimist. Kõigepealt avage terminal ja käivitage oma serveri käivitamiseks järgmine käsk:
$ sõlme server
Pärast serveri käivitamist avage kataloog, kuhu teie register kuulub.HTML-fail on olemas ja topeltklõpsake sellel, et see oma brauseris avada. Näete terminalis järgmist teadet, mis näitab, et klient on ühendanud:
Samuti saate kontrollida serverist kliendile saadetud sõnumeid, vajutades paremklõpsamise nuppu ja seejärel avades Kontrollige aken. Klõpsake selles aknas nuppu Konsool jaotises ja näete serverist saadetud sõnumeid.
Kui klõpsate nupul, saavad nii server kui ka klient üksteisele sõnumeid saata ja vastu võtta.
Server:
Klient:
Voilà, teie WebSocket-ühendus on loodud!
Järeldus
WebSocket'i protokoll on suurepärane viis kliendi ja serveri vahelise side loomiseks. Seda protokolli kasutatakse mitmes valdkonnas, sealhulgas mitme mängijaga brauserimängud, erinevate sotsiaalmeedia platvormide vestlussüsteemid ja isegi kodeerijate koostööprotsessid.
