Com crear connexions WebSocket a Node.js?

Com Crear Connexions Websocket A Node Js



WebSocket és bàsicament un protocol que utilitzen els desenvolupadors a la seva aplicació per permetre la comunicació dúplex completa entre el client i el servidor. Aquest tipus de comunicació permet als usuaris comunicar-se amb el servidor en temps real sense cap demora. Actualment, aquest protocol s'utilitza en gairebé totes les aplicacions web per oferir una millor experiència d'usuari.

Aquest article il·lustra el procediment per crear connexions webSocket a Node.js.

Com crear connexions WebSocket a Node.js?

La connexió WebSocket consta de dues parts: desenvolupament al costat del client i al costat del servidor. També cal crear el lloc web simulat que actuï com a mitjà entre ambdues parts. En utilitzar-lo, els missatges es transfereixen des d'ambdós costats. Visiteu els passos següents per a la creació de WebSocket a NodeJs.







Pas 1: Configuració de l'entorn NodeJs

Amb l'ajuda de la ' cd ', travessa la carpeta del projecte i dins d'ella executa l'ordre ' npm init -y ” per instal·lar els mòduls NodeJs predeterminats:



npm init - i

Després d'executar l'ordre anterior, el nou fitxer anomenat ' package.json ” que emmagatzema la informació bàsica relacionada amb el projecte es crea:







Pas 2: instal·lació del mòdul WebSocket

Per utilitzar el protocol WebSocket, el mòdul anomenat ' ws ” s'ha d'instal·lar al projecte NodeJs. L'ordre per a la instal·lació s'insereix a continuació:



npm instal·lar ws

La sortida següent mostra ' ws ” s'ha instal·lat al directori NodeJs desitjat:

Pas 3: Configuració del servidor WebSocket

Per configurar el costat del servidor del protocol webSocket, creeu un nou ' .js ' escriviu fitxer dins de la carpeta del projecte amb el nom ' costat del servidor ” i inseriu el codi que s'indica a continuació:

const wsObj = requereixen ( 'ws' ) ;

const ws = nou wsObj. Servidor ( { port : 3000 } ) ;

consola. registre ( 'El servidor Linuxhint ha començat' ) ;

L'explicació del codi anterior és la següent:

  • En primer lloc, amb l'ajuda del ' requerir () mètode, el ws 'El mòdul que ja està instal·lat a la secció anterior s'importa dins de l'actual ' serverSide.js ' dossier.
  • A continuació, invoqueu el ' Servidor () ” mètode utilitzant l'objecte del “ ws ' mòdul anomenat ' wsObj ” i passa el número de port de “ 3000 ” per iniciar el servidor al port especificat de Localhost.
  • A més, mostreu algun missatge aleatori a la finestra de la consola per confirmar que el servidor s'ha iniciat des del final del servidor.

Pas 4: Configuració del client WebSocket

Creeu un altre fitxer amb el nom ' costat del client ” per configurar el costat del client que es connecta al servidor. Inseriu el codi següent per configurar el costat del client bàsic que mostra un missatge aleatori quan es connecta al servidor:

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

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

consola. registre ( 'Esteu connectat al servidor Linuxhint!' ) ;

} ) ;

La descripció del bloc de codi anterior:

  • Primer, creeu un objecte nou per a ' WebSocket() ' protocol que s'escolta al localhost amb el número de port ' 3000 ”.
  • A continuació, emmagatzemeu el nou objecte a la variable anomenada ' obj ”.
  • Després d'això, adjunteu l'oient de l'esdeveniment de ' obert ' amb aquest ' obj ”. Aquest oient d'esdeveniments executarà una funció anònima quan el servidor es carregui a l'host local amb el número de port proporcionat.
  • La funció mostra un missatge aleatori relacionat amb la connexió a la consola.

Pas 5: Creació de la pàgina web

Dins del directori del projecte, creeu un ' .html ' fitxer de tipus ' amb el nom ' índex ' que conté l'estructura bàsica d'HTML juntament amb l'etiqueta de guió única per importar el ' clientSide.js ' dossier:

DOCTYPE html >

< només html = 'en' >

< cap >

< metaconjunt de caràcters = 'UTF-8' >

< títol > Client títol >

cap >

< cos >

< h1 > Lloc web Linuxhint h1 >

cos >

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

html >

Pas 6: Execució

Obriu el ' index.html ” a la pàgina web directament des del directori. A continuació, aneu al terminal o al indicador d'ordres i executeu l'ordre següent:

node del costat del servidor

El missatge de sortida indica que el servidor s'ha iniciat.

Ara sense tancar el servidor, aneu a index.html i obriu-lo a través del navegador web. Allà apareixerà el missatge d'èxit de connexió a la finestra de la consola:

La sortida mostra que la connexió s'ha establert entre el client i el servidor. Aquest bloc ha explicat el procés de creació de la connexió webSocket a NodeJs.

Conclusió

Per crear una connexió webSocket a NodeJs, creeu un nou projecte NodeJs i instal·leu el ' ws ” executant el mòdul “ npm instal·lar ws ' comandament. Ara, creeu un fitxer per al costat del servidor i dins d'ell importeu el ' ws ” mòdul. Utilitzeu aquest mòdul per crear un servidor WebSocket al port ' 3000 ”. Creeu un altre fitxer per al costat del client en el qual necessiteu definir un objecte nou per a ' WebSocket 'anomenat' obj ' i fes-lo escoltar al port ' 3000 ”. Aquest bloc ha il·lustrat el procediment per establir una connexió WebSocket a NodeJs.