Phenquestions
Il protocollo WebSocket consente la comunicazione bidirezionale tra un client e un server. Questo processo è simile al modo in cui avvengono le chiamate sul telefono: prima stabilisci una connessione e poi puoi iniziare a comunicare tra loro. Il protocollo WebSocket viene utilizzato quasi ovunque, dai browser game multiplayer alle applicazioni di chat.
Questo articolo mostra come creare un protocollo WebSocket e utilizzarlo per comunicare con più utenti.
Prerequisiti
Prima di passare al processo di creazione e utilizzo di un protocollo WebSocket, devi prima installare alcune cose necessarie per questo processo. La prima cosa che devi installare è Node.js, una piattaforma lato server che converte il linguaggio di programmazione JavaScript in codice macchina che ti consente di eseguire JavaScript direttamente sul tuo computer. Per installare Nodo.js, gli utenti Windows possono semplicemente andare al nodo ufficiale.js e fai clic sul pulsante verde LTS che si trova al centro dello schermo.
Per gli utenti Linux e macOS, fare clic su Download sezione nel sottotitolo del sito web.
Dopo aver aperto il Download sezione, vedrai i file di installazione per tutte e tre le principali piattaforme. Seleziona un pacchetto supportato dal tuo sistema.
Esegui il programma di installazione fornito con i file scaricati e Node.js verrà installato sul tuo computer. Per verificare se il programma è stato installato, apri il terminale ed emetti il seguente comando:
$ nodo -v
Dopo aver installato Node.js, ora hai accesso a vari moduli JavaScript, che renderanno il tuo lavoro più efficiente a lungo termine. Apri la directory in cui desideri creare l'architettura client e server, quindi apri il terminale all'interno di quella directory ed esegui il seguente comando:
$ npm init -y
Questo comando viene utilizzato per creare il pacchetto.json che ti consente di configurare e installare diversi Node.js pacchetti. Installa il pacchetto del protocollo WebSocket emettendo il seguente comando nel terminale:
$ npm installazione ws
Crea tre file, chiamati indice.html, cliente.js e server.js. Come indicato dai nomi, questi file JavaScript sono l'architettura client e server del nostro protocollo WebSocket. Ora possiamo finalmente iniziare a scrivere il codice delle nostre applicazioni client e server.
Creazione di un server WebSocket
Per creare un server WebSocket, inizieremo scrivendo il codice per il server. Apri il server.js file che hai creato all'interno del tuo editor di testo o IDE nella sezione precedente e inserisci le seguenti righe all'interno del file.
const WebSocket = require('ws');const ws = nuovo WebSocket.Server( porta: 8080 );
console.log("Server avviato");
wow.on('connessione', (wss) =>
console.log("Un nuovo cliente connesso")
wss.send('Benvenuto nel server!');
wss.on('messaggio', (messaggio) =>
console.log('Server ricevuto: $messaggio');
wss.send('Ho ricevuto il tuo messaggio: ' + messaggio);
);
);
Ora spiegheremo cosa sta facendo ogni linea in modo più dettagliato.
Codice Spiegazione Code
Come accennato in precedenza, ci sono alcuni moduli integrati disponibili in Node.js che rendono il tuo lavoro molto più semplice. Per importare questi moduli, useremo il richiedere parola chiave.
const WebSocket = require('ws');const ws = nuovo WebSocket.Server( porta: 8080 );
console.log("Server avviato");
La prima riga è usata per importare il Nodo.js modulo WebSocket. Utilizzando questo modulo, nella riga successiva, creiamo il nostro server WebSocket, che è in ascolto sulla porta 8080. Il console.registro() line è semplicemente lì per farci sapere che il server è stato avviato. Vedrai questo apparire all'interno del tuo terminale quando esegui il seguente comando nel terminale:
$ nodo server
Nella riga successiva, stiamo stabilendo una connessione tra il server e il client.
wow.on('connessione', (wss) =>console.log("Un nuovo cliente connesso")
);
Dopo che è stata stabilita una connessione, il wss.la riga send() invia un messaggio al client. In questo caso, il messaggio è "Benvenuto nel server."
wss.send('Benvenuto nel server!');Infine, il wss.on ('messaggio') è per il server per ricevere il messaggio dal client. Per conferma, il server invia questo messaggio al client nell'ultima riga.
wss.on('messaggio', (messaggio) =>console.log('Server ricevuto: $messaggio');
wss.send('Ho ricevuto il tuo messaggio: ' + messaggio);
);
Creazione di un client WebSocket
Per il lato client, abbiamo bisogno sia dell'indice.html e il client.js file. Certo, puoi semplicemente aggiungere il contenuto dal client.js nel tuo indice.html, ma preferisco tenerli separati. Diamo prima un'occhiata al cliente.codice js. Apri il file e inserisci le seguenti righe all'interno del file:
const socket = new WebSocket('ws://localhost:8080');presa.addEventListener('open', () =>
console.log('Connesso al server!');
);
presa.addEventListener('messaggio', (msg) =>
console.log('Cliente ricevuto: $msg.dati');
);
const sendMsg = () =>
presa.send('Come va amigo!');
Codice Spiegazione Code
Come con il server.js, creeremo un nuovo WebSocket in ascolto sulla porta 8080, che può essere visto nel host locale:8080 sezione del codice.
const socket = new WebSocket('ws://localhost:8080');Nella riga successiva, addEventListener fa ascoltare al tuo cliente tutti gli eventi che stanno accadendo attualmente. In questo caso, sarebbe la creazione e l'avvio del server. Una volta stabilita la connessione, il client invia un messaggio al terminale.
presa.addEventListener('open', () =>console.log('Connesso al server!');
);
Ancora una volta, il cliente ascolta tutti gli eventi in corso. Quando il server invia un messaggio, il client lo riceve e quindi visualizza il messaggio nel terminale.
presa.addEventListener('messaggio', (msg) =>console.log('Cliente ricevuto: $msg.dati');
);
Le ultime righe sono semplicemente una funzione in cui il client invia un messaggio al server. Lo collegheremo a un pulsante nel nostro file html per una migliore comprensione di come funziona.
const sendMsg = () =>presa.send('Come va amigo!');
Preparazione di un file HTML
Infine, apri l'indice.html e aggiungi un riferimento al tuo cliente.js al suo interno. Nel mio caso, aggiungerò semplicemente le seguenti righe di codice:
Come puoi vedere nelle righe sottostanti, src (all'interno del tag script) si riferisce al file javascript del client. La funzione sendMsg, che è stata creata nel client.js, è stato anche collegato alla funzione onClick del pulsante.
Mettere tutto insieme
Ora puoi iniziare a testare la tua architettura client e server. Innanzitutto, apri il terminale ed esegui il seguente comando per avviare il tuo server:
$ nodo server
Dopo aver avviato il tuo server, apri la directory in cui il tuo indice.html è presente e fai doppio clic su di esso per aprirlo nel tuo browser. Vedrai apparire il seguente messaggio nel terminale che indica che un client si è connesso:
Puoi anche controllare i messaggi inviati dal server al client premendo il pulsante destro del mouse e quindi aprendo il Ispezionare finestra. In questa finestra, fai clic su Console sezione, e potrai vedere i messaggi inviati dal server.
Dopo aver fatto clic sul pulsante, sia il server che il client saranno in grado di inviare e ricevere messaggi l'uno dall'altro.
server:
Cliente:
Voilà, la tua connessione WebSocket è stata stabilita!
Conclusione
Il protocollo WebSocket è un modo eccellente per stabilire la comunicazione tra un client e un server. Questo protocollo è utilizzato in diversi campi, inclusi giochi browser multiplayer, sistemi di chat di varie piattaforme di social media e persino processi di collaborazione tra programmatori.
