Programma di esempio WebSocket
Il protocollo WebSocket consente di verificarsi comunicazioni a due vie tra un client e un server. Questo processo è simile al modo in cui si verificano le chiamate sul telefono: prima, si stabilisce una connessione e quindi puoi iniziare a comunicare tra loro. Il protocollo WebSocket viene utilizzato quasi ovunque - dai giochi del browser 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, è necessario prima installare alcune cose necessarie per questo processo. La prima cosa che devi installare è il nodo.JS, una piattaforma lato server che converte il linguaggio di programmazione JavaScript in codice macchina che consente di eseguire JavaScript direttamente sul tuo computer. Per installare il nodo.JS, gli utenti di Windows possono semplicemente andare al nodo ufficiale.Sito Web JS e fare clic sul pulsante Green LTS trovato al centro dello schermo.
Per gli utenti di Linux e MacOS, fare clic su Download sezione nel sotto-testatore del sito Web.
Dopo aver aperto il Download Sezione, vedrai i file di installazione per tutte e tre le piattaforme principali. Seleziona un pacchetto supportato dal sistema.
Esegui l'installatore fornito con i file scaricati e nodo.JS verrà installato sul tuo computer. Per verificare se il programma è stato installato, aprire il terminale e emettere il seguente comando:
$ nodo -v
Dopo aver installato il nodo.JS, ora hai accesso a vari moduli JavaScript, il che renderà il tuo lavoro più efficiente a lungo termine. Apri la directory in cui si desidera creare l'architettura client e server, quindi aprire il terminale all'interno di quella directory ed eseguire il seguente comando:
$ npm init -y
Questo comando viene utilizzato per creare il pacchetto.file json che consente di configurare e installare nodo diverso.pacchetti JS. Installa il pacchetto di protocolli WebSocket emettendo il seguente comando nel terminale:
$ npm Installa WS
Crea tre file, chiamati indice.HTML, client.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 immettere le seguenti righe all'interno del file.
const websocket = requisite ('ws');const ws = new WebSocket.Server (port: 8080);
console.log ("server avviato");
Ws.on ('connection', (wss) =>
console.Log ("un nuovo client connesso")
WSS.Invia ('Benvenuti al server!');
WSS.on ('message', (message) =>
console.log ('server ricevuto: $ messaggio');
WSS.Invia ('Ottieni il tuo messaggio:' + messaggio);
);
);
Ora spiegheremo cosa sta facendo ogni riga in modo più dettagliato.
Spiegazione del codice
Come accennato in precedenza, ci sono alcuni moduli integrati disponibili nel nodo.js che rendono il tuo lavoro molto più semplice. Per importare questi moduli, useremo il richiedere parola chiave.
const websocket = requisite ('ws');const ws = new WebSocket.Server (port: 8080);
console.log ("server avviato");
La prima riga viene utilizzata per importare il nodo.Modulo JS WebSocket. Utilizzando questo modulo, nella riga successiva, creiamo il nostro server WebSocket, che sta ascoltando sulla porta 8080. IL console.tronco d'albero() La linea è semplicemente lì per farci sapere che il server è iniziato. Vedrai che appare nel tuo terminale quando si esegue il seguente comando nel terminale:
$ node server
Nella riga successiva, stiamo stabilendo una connessione tra il server e il client.
Ws.on ('connection', (wss) =>console.Log ("un nuovo client connesso")
);
Dopo che è stata stabilita una connessione, il WSS.La riga di invio () invia un messaggio al client. In questo caso, il messaggio è “Benvenuto sul server."
WSS.Invia ('Benvenuti al server!');Finalmente, il WSS.su ('messaggio') è che il server riceva il messaggio dal client. Per conferma, il server invia questo messaggio al client nell'ultima riga.
WSS.on ('message', (message) =>console.log ('server ricevuto: $ messaggio');
WSS.Invia ('Ottieni il tuo messaggio:' + messaggio);
);
Creazione di un client WebSocket
Per il lato client, abbiamo bisogno sia dell'indice.file html e client.file js. Naturalmente, puoi semplicemente aggiungere il contenuto dal client.file js nel tuo indice.file html, ma preferisco tenerli separati. Per prima cosa diamo 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 ('Message', (msg) =>
console.log ('client ricevuto: $ msg.dati');
);
const sendMSg = () =>
PRESA.Invia ('come sta andando Amigo!');
Spiegazione del codice
Come con il server.JS, creeremo un nuovo websocket che sta ascoltando la porta 8080, che può essere vista nel Localhost: 8080 sezione del codice.
const socket = new WebSocket ('ws: // localhost: 8080');Nella riga successiva, addEventlistener fa ascoltare il tuo cliente a tutti gli eventi che stanno accadendo. In questo caso, creerebbe e avrà l'avvio del server. Una volta stabilita la connessione, il client emette un messaggio al terminale.
PRESA.addEventListener ('Open', () =>console.log ('connesso al server!');
);
Ancora una volta, il cliente ascolta qualsiasi evento attualmente in corso. Quando il server invia un messaggio, il client lo riceve e quindi visualizza il messaggio nel terminale.
PRESA.addEventListener ('Message', (msg) =>console.log ('client ricevuto: $ msg.dati');
);
Le ultime righe sono semplicemente una funzione in cui il client sta inviando un messaggio al server. Lo collegheremo a un pulsante nel nostro file HTML per una migliore comprensione di come funziona.
const sendMSg = () =>PRESA.Invia ('come sta andando Amigo!');
Preparazione di un file HTML
Infine, apri l'indice.file html e aggiungi un riferimento al tuo client.file 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 client. La funzione SendMSG, creata nel client.File JS, è stato anche collegato alla funzione OnClick del pulsante.
Mettere tutto insieme
Ora puoi iniziare a testare l'architettura del tuo client e server. Innanzitutto, aprire il terminale ed eseguire il seguente comando per avviare il server:
$ node server
Dopo aver avviato il server, apri la directory in cui l'indice.Il file HTML è presente e fai doppio clic su di esso per aprirlo nel browser. Vedrai che il seguente messaggio viene visualizzato nel terminale affermando che un client ha connesso:
È inoltre possibile controllare i messaggi inviati dal server al client premendo il pulsante del tasto destro e aprire il Ispezionare finestra. In questa finestra, fare clic su Console sezione e sarai in grado di vedere i messaggi inviati dal server.
Una volta 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 connessione WebSocket è stata stabilita!
Conclusione
Il protocollo WebSocket è un modo eccellente per stabilire la comunicazione tra un client e un server. Questo protocollo viene utilizzato in diversi campi, tra cui giochi di browser multiplayer, sistemi di chat di varie piattaforme di social media e persino processi di collaborazione tra i programmatori.