🚀 WebSocket, NodeJS ed Emoji in 10 minuti (forse 15 😉)

Lo scopo finale è quello di creare un canale WebSocket che sia in grado di mandare lo stesso messaggio in real-time a più client connessi al medesimo WebSocket Server.

Cosa è una WebSockect

Una WebSocket viene utilizzata per creare un canale bidirezionale che permette di instaurare una comunicazione real-time tra Client e Server

(1 min) Creiamo il progetto (NodeJS)

Se avete già installato NodeJS avete già tutto il necessario, altrimenti (Nodejs).

$ npm init -y

(3 min) Come aprire una WebSocket Server

Per questo progetto utilizzeremo la Libreria ws che ci permetterà di implementare una WebSocket lato Client e Server in modo semplice e immediato. Installiamo la libreria con il comando:

$ npm install ws

Creiamo su un file ws.js un semplice WebSocket Server nel quale viene aperta la porta 8080 in attesa di nuove connessioni.

const WebSocket = require("ws");
const wss = new WebSocket.Server({port: 8080});
module.exports = wss;

Creiamo un file server.js e importiamo il modulo ("./ws"). Utilizziamo il metodo .on di wss per intercettare gli eventi di connessione che producono delle WebSocket, ovvero, i canali di comunicazione tra il server e chi si è connesso alla WebSocket.

Ogni qual volta viene scatenato l’evento di connessione e di conseguenza il Client si connette al Server Websocket viene aggiunto il canale di comunicazione tra Server e Client all’array connectedClients.

const wss = require("./ws");
const connectedClients = [];
wss.on("connection", ws => { connectedClients.push(ws);});

Creiamo un nuovo file generator.js che utilizzeremo per generare una stringa di 4 emoji casuali da un array di emoji. Definiamo una funzione generator che prende come parametro un oggetto composto dalla funzione callback, che come vedremo in seguito si occuperà di inviare la stringa ai Client connessi, e dal maxTime che definisce l’intervallo di tempo tra un invio e l’altro.

const dictionary = ["😎", "🥝", "🚀", "💥", "🐳", "⚽️", "💩", "🔌", "🐛"];

function generator({ callback, maxTime }) {  
let emoString = generateRandom();  
callback(emoString);  

setInterval(() => {    emoString = generateRandom();  
callback(emoString);  }, Math.floor(Math.random() * maxTime));

function generateRandom() {    
return `${pickEmojii()}${pickEmojii()}${pickEmojii()}${pickEmojii()}`;  }

function pickEmojii() {    return dictionary[Math.floor(Math.random() * dictionary.length)];  }}

module.exports = generator;

Quindi nel file server.js importiamo il modulo  ("./generator"). E richiamiamo la funzione generator, passiamo l'oggetto come parametro e definiamo le proprietà maxTime e callback.

( 3 min ) Gestire l'aggiornamento su tutti i client

Ragionamento che spiega come modificare il server per aggiornare tutti i ws ogni volta che la emoString cambia

Nella callback andremo a scorrere l’array connectedClients e per ogni connessione invieremo la stessa stringa di emoji.

Il file server.js  quindi apparirà in questo modo:

const wss = require("./ws");
const generator = require("./generator");
const connectedClients = [];

wss.on("connection", ws => {  
connectedClients.push(ws);
});

generator({  maxTime: 20000,  callback: emoji => {    		         			connectedClients.forEach(ws => {
      ws.send(emoji);     
     });  
}});

Quindi  per avviare il server che sarà in ascolto sulla porta 8080, da terminale eseguire il comando:

$ node server.js

(3 min ) il Client (w/StackBlitz )

StackBlitz è un editor online per Web apps.

Su StackBlitz, si possono creare nuovi progetti e ottenere l'embed code dal link "Share" nella barra di navigazione in questo modo:

Il lato Client della websocket è su StackBlitz
Con il file  index.js creiamo la connessione WebSocket sulla porta 8080, socket.addEventListener si mette in ascolto della realizzazione dell’evento message. Con l’ event.data prendiamo i dati dell’evento, e quindi il contenuto del messaggio. All’interno di .data sarà presente la stringa di emoji inviata dal Server.

// Import stylesheets
import "./style.css";

// Write Javascript code!
const appDiv = document.getElementById("app");
// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080/");

// Connection opened
socket.addEventListener("open", function(event) {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", function(event) {
  appDiv.innerHTML = event.data;
});

creiamo un file index.html per la visualizzazione delle emoji:

Risultato finale:

( 1 min ) Compiacersi del lavoro fatto  💪🏻

+ (ngrok, codice sorgente e bonus vari)

Per esporre il nostro localhost utilizzeremo Ngrok. Ngrok ti consente di esporre su Internet un server web in esecuzione sul tuo computer locale. Basta dire a Ngrok su quale porta il tuo server Web è in ascolto con il comando:

$  ngrok http 8080

In questo modo viene creato un tunnel tra il server messo a disposizione da Ngrok e l’eseguibile che gira sulla tua macchina localmente. Tutto quello che arriva sull’host di Ngrok viene girato sulla porta 8080.

all'avvio Ngrok, verrà visualizzata un'interfaccia utente nel tuo terminale con l'URL pubblico del tunnel e altre informazioni sullo stato delle connessioni effettuate.

Nella parte inferiore della User Interface sono presenti tutte le chiamate HTTP che vengono effettuate dai client.

+ Nei prossimi episodi

Creare un gioco con i Ws