Paano Gumawa ng Mga Koneksyon sa WebSocket sa Node.js?

Paano Gumawa Ng Mga Koneksyon Sa Websocket Sa Node Js



Ang WebSocket ay karaniwang isang protocol na ginagamit ng mga developer sa kanilang aplikasyon upang paganahin ang buong duplex na komunikasyon sa pagitan ng client at server side. Ang ganitong uri ng komunikasyon ay nagpapahintulot sa mga user na makipag-ugnayan sa server sa real-time nang walang anumang pagkaantala. Sa ngayon, ang protocol na ito ay ginagamit sa halos bawat web application upang magbigay ng mas magandang karanasan ng user.

Inilalarawan ng artikulong ito ang pamamaraan upang lumikha ng mga koneksyon sa webSocket sa Node.js.

Paano Gumawa ng Mga Koneksyon sa WebSocket sa Node.js?

Ang koneksyon sa WebSocket ay binubuo ng dalawang bahagi: development sa client side at server side. Ang dummy website ay kailangan ding gumawa ng kung saan gumaganap bilang daluyan sa pagitan ng magkabilang panig. Sa pamamagitan ng paggamit nito, nailipat ang mga mensahe mula sa magkabilang panig. Bisitahin ang mga hakbang sa ibaba para sa paglikha ng WebSocket sa NodeJs.







Hakbang 1: Pag-set up ng NodeJs Environment

Sa tulong ng ' cd 'utos, dumaan sa folder ng proyekto at sa loob nito isagawa ang utos' npm init -y ” para i-install ang default na mga module ng NodeJs:



npm init - at

Matapos isagawa ang utos sa itaas, ang bagong file na pinangalanang ' package.json ” na nag-iimbak ng pangunahing impormasyong nauugnay sa proyektong nagagawa:







Hakbang 2: Pag-install ng WebSocket Module

Upang gamitin ang WebSocket protocol ang module na pinangalanang ' ws ” ay kailangang mai-install sa proyekto ng NodeJs. Ang utos para sa pag-install ay ipinasok sa ibaba:



npm i-install ang ws

Ang output sa ibaba ay nagpapakita ng ' ws ” ay na-install sa nais na direktoryo ng NodeJs:

Hakbang 3: Pag-set up ng WebSocket Server

Upang i-setup ang server side ng webSocket protocol, lumikha ng bagong “ .js 'I-type ang file sa loob ng folder ng proyekto na may pangalan' sa panig ng server ” at ipasok ang nakasaad sa ibaba na code:

const wsObj = nangangailangan ( 'ws' ) ;

const ws = bago wsObj. server ( { daungan : 3000 } ) ;

console. log ( 'Nagsimula na ang Linux Server' ) ;

Ang paliwanag para sa code sa itaas ay ang mga sumusunod:

  • Una, sa tulong ng ' nangangailangan() 'paraan, ang' ws 'Ang module na naka-install na sa seksyon sa itaas ay mai-import sa loob ng kasalukuyang ' serverSide.js ” file.
  • Susunod, tawagan ang ' Server() 'paraan gamit ang object ng ' ws ” module na pinangalanang “ wsObj ” at ipasa ang port number ng “ 3000 ” upang simulan ang server sa tinukoy na port ng Localhost.
  • Gayundin, magpakita ng ilang random na mensahe sa console window upang kumpirmahin na nagsimula ang server mula sa dulo ng server.

Hakbang 4: Pag-set up ng WebSocket Client

Gumawa ng isa pang file na may pangalang ' Side ng kliyente ” para i-set up ang client side na nakakonekta sa server. Ipasok ang code sa ibaba upang i-set up ang pangunahing bahagi ng kliyente na nagpapakita ng random na mensahe kapag nakakonekta sa server:

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

obj. addEventListener ( 'bukas' , ( ) => {

console. log ( 'Ikaw ay Nakakonekta sa Linuxhint Server!' ) ;

} ) ;

Ang paglalarawan para sa block ng code sa itaas:

  • Una, lumikha ng isang bagong bagay para sa ' WebSocket() ” protocol na pinakikinggan sa Localhost na mayroong port number na “ 3000 ”.
  • Pagkatapos, iimbak ang bagong bagay sa variable na pinangalanang ' obj ”.
  • Pagkatapos nito, ilakip ang tagapakinig ng kaganapan ng ' bukas ' kasama nito ' obj ”. Ang tagapakinig ng kaganapang ito ay magsasagawa ng isang hindi kilalang function kapag ang server ay na-load sa Localhost na may ibinigay na numero ng port.
  • Nagpapakita ang function ng isang random na mensaheng nauugnay sa koneksyon sa ibabaw ng console.

Hakbang 5: Paglikha ng Webpage

Sa loob ng direktoryo ng proyekto, lumikha ng ' .html 'type file na may pangalan ng ' index ” na naglalaman ng pangunahing istruktura ng HTML kasama ang nag-iisang script na tag para i-import ang “ clientSide.js ” file:

DOCTYPE html >

< html lang = 'sa' >

< ulo >

< meta charset = 'UTF-8' >

< pamagat > Kliyente pamagat >

ulo >

< katawan >

< h1 > Website ng Linuxhint h1 >

katawan >

< script src = 'clientSide.js' > script >

html >

Hakbang 6: Pagpapatupad

Buksan ang ' index.html ” sa webpage nang direkta mula sa direktoryo. Pagkatapos, lumipat sa terminal o command prompt at isagawa ang sumusunod na command:

node serverSide

Ang output na mensahe ay nagpapakita na ang server ay nagsimula na.

Ngayon nang hindi isinasara ang server, maglakbay sa index.html at buksan ito sa web browser. Doon lalabas ang mensahe ng tagumpay ng koneksyon sa console window:

Ang output ay nagpapakita na ang koneksyon ay naitatag sa pagitan ng client at server side. Ipinaliwanag ng blog na ito ang proseso ng paglikha ng koneksyon sa webSocket sa NodeJs.

Konklusyon

Upang lumikha ng koneksyon sa webSocket sa NodeJs, lumikha ng bagong proyekto ng NodeJs at i-install ang ' ws ” module sa pamamagitan ng pagpapatakbo ng “ npm i-install ang ws ” utos. Ngayon, lumikha ng isang file para sa panig ng server at sa loob nito ay i-import ang ' ws ” modyul. Gamitin ang module na ito upang lumikha ng isang WebSocket server sa port ' 3000 ”. Lumikha ng isa pang file para sa panig ng kliyente kung saan kailangan mong tukuyin ang isang bagong bagay para sa ' WebSocket ' pinangalanan ' obj 'at gawin itong makinig sa port' 3000 ”. Inilarawan ng blog na ito ang pamamaraan upang magtatag ng koneksyon sa WebSocket sa NodeJs.