Hogyan hozhatunk létre WebSocket kapcsolatokat a Node.js-ben?

Hogyan Hozhatunk Letre Websocket Kapcsolatokat A Node Js Ben



A WebSocket alapvetően egy protokoll, amelyet a fejlesztők az alkalmazásukban használnak, hogy lehetővé tegyék a teljes duplex kommunikációt a kliens és a szerver oldal között. Ez a fajta kommunikáció lehetővé teszi a felhasználók számára, hogy késedelem nélkül, valós időben kommunikáljanak a szerverrel. Napjainkban ezt a protokollt szinte minden webes alkalmazásban használják a jobb felhasználói élmény biztosítása érdekében.

Ez a cikk a webSocket-kapcsolatok Node.js-ben történő létrehozásának eljárását mutatja be.

Hogyan hozhatunk létre WebSocket kapcsolatokat a Node.js-ben?

A WebSocket kapcsolat két részből áll: fejlesztés a kliens oldalon és a szerver oldalon. A dummy weboldalt is létre kell hozni, amely médiumként működik mindkét oldal között. Használatával az üzenetek mindkét oldalról átvitelre kerülnek. Kövesse az alábbi lépéseket a WebSocket NodeJ-ben történő létrehozásához.







1. lépés: A NodeJs Environment beállítása

A „ CD ' parancsot, menjen át a projekt mappán, és hajtsa végre a parancsot npm init -y ” az alapértelmezett NodeJs modulok telepítéséhez:



npm init - és

A fenti parancs végrehajtása után az új fájl „ package.json ” amely a létrejövő projekttel kapcsolatos alapvető információkat tárolja:







2. lépés: A WebSocket modul telepítése

A WebSocket protokoll használatához a „ ws ” telepíteni kell a NodeJs projektben. A telepítési parancs az alábbiakban található:



npm install ws

Az alábbi kimenet azt mutatja, hogy ' ws ” telepítve van a kívánt NodeJs könyvtárba:

3. lépés: A WebSocket Server beállítása

A webSocket protokoll szerveroldalának beállításához hozzon létre egy új „ .js ' gépelje be a ' nevű fájlt a projekt mappájába' szerver oldal ” és illessze be az alábbi kódot:

const wsObj = igényelnek ( 'ws' ) ;

const ws = új wsObj. szerver ( { kikötő : 3000 } ) ;

konzol. log ( 'Linuxhint szerver elindult' ) ;

A fenti kód magyarázata a következő:

  • Először is a „ igényel() ' módszer, a ' ws A fenti szakaszban már telepített modul importálva lesz az aktuális ' serverSide.js ” fájlt.
  • Ezután hívja meg a „ Szerver() ' módszer a ' objektum használatával ws ' modul neve ' wsObj ' és adja át a ' portszámot 3000 ” a szerver elindításához a Localhost megadott portján.
  • Ezenkívül jelenítsen meg néhány véletlenszerű üzenetet a konzol ablakában, hogy megbizonyosodjon arról, hogy a kiszolgáló elindult a kiszolgáló végéről.

4. lépés: A WebSocket Client beállítása

Hozzon létre egy másik fájlt a következő névvel: ügyfél oldal ” a szerverhez csatlakozó ügyféloldal beállításához. Illessze be az alábbi kódot az alapvető kliensoldal beállításához, amely véletlenszerű üzenetet jelenít meg, amikor csatlakozik a szerverhez:

const obj = új WebSocket ( 'ws://localhost:3000' ) ;

obj. addEventListener ( 'nyisd ki' , ( ) => {

konzol. log ( 'Ön csatlakozik a Linuxhint szerverhez!' ) ;

} ) ;

A fenti kódblokk leírása:

  • Először hozzon létre egy új objektumot a ' WebSocket() 'protokoll, amelyet a Localhost hallgat meg, amelynek portszáma ' 3000 ”.
  • Ezután tárolja az új objektumot a ' nevű változóban obj ”.
  • Ezután csatolja a '' eseményfigyelőt nyisd ki ' ezzel ' obj ”. Ez az eseményfigyelő névtelen funkciót hajt végre, amikor a kiszolgáló betöltődik a Localhostra a megadott portszámmal.
  • A funkció egy véletlenszerű csatlakozással kapcsolatos üzenetet jelenít meg a konzolon.

5. lépés: Weboldal létrehozása

A projektkönyvtárban hozzon létre egy „ .html ' típusú fájl, amelynek neve ' index ', amely tartalmazza a HTML alapvető szerkezetét, valamint az egyetlen script címkét a ' clientSide.js ” fájl:

DOCTYPE html >

< csak html = 'ban ben' >

< fej >

< meta karakterkészlet = 'UTF-8' >

< cím > Ügyfél cím >

fej >

< test >

< h1 > Linuxhint webhely h1 >

test >

< script src = 'clientSide.js' > forgatókönyv >

html >

6. lépés: Végrehajtás

Nyissa meg a „ index.html ” a weboldalon keresztül közvetlenül a címtárból. Ezután lépjen a terminálra vagy a parancssorra, és hajtsa végre az alábbi parancsot:

csomópont szerverSide

A kimeneti üzenet azt mutatja, hogy a szerver elindult.

Most a szerver bezárása nélkül lépjen az index.html oldalra, és nyissa meg a webböngészőn keresztül. A konzol ablakában megjelenik a sikeres csatlakozási üzenet:

A kimenet azt mutatja, hogy a kapcsolat létrejött a kliens és a szerver oldal között. Ez a blog ismerteti a webSocket kapcsolat létrehozásának folyamatát a NodeJs-ben.

Következtetés

WebSocket kapcsolat létrehozásához a NodeJs-ben hozzon létre egy új NodeJs projektet, és telepítse a ' ws ' modul futtatásával a ' npm install ws ” parancsot. Most hozzon létre egy fájlt a kiszolgálóoldal számára, és importálja a „ ws ” modult. Ezzel a modullal WebSocket szervert hozhat létre a ' porton 3000 ”. Hozzon létre egy másik fájlt az ügyféloldalhoz, amelyben meg kell határoznia egy új objektumot a ' WebSocket ' nevezett ' obj 'és hallgassa meg a kikötőben' 3000 ”. Ez a blog bemutatja a WebSocket kapcsolat létrehozásának folyamatát a NodeJ-ben.