Esempi di programmazione Node.js WebSocket

I WebSockets sono un’eccellente scelta tecnologica quando state progettando la vostra app in tempo reale. Immaginate un’interfaccia utente di un’app dove si vedono i prezzi delle azioni in tempo reale. Più velocemente un utente viene a conoscenza del cambiamento del prezzo di un’azione, più velocemente può reagire ed eseguire un ordine di acquisto o di vendita. Il denaro è sulla linea.

Stock Ticker con PubNub e Golang

Cos’è un WebSocket?

WebSocket è il proprio protocollo di livello 7, simile a HTTP. I WebSockets creano una connessione full-duplex per inviare messaggi dal client al server, o dal server al client in qualsiasi istante. Questo modello è di gran lunga superiore alla richiesta-risposta HTTP quando un’applicazione richiede ai sistemi di ottenere gli ultimi dati ASAP.

Quando dovrei scrivere codice WebSocket?

Oltre a un’applicazione di monitoraggio di azioni o criptovalute in tempo reale, altri casi d’uso comuni in tempo reale per i WebSockets sono:

  • App per chat
  • Tracciamento in diretta della posizione su una mappa
  • Interazione in diretta con il pubblico
  • Invio di offerte per aste online
  • Aggiornamento dei dispositivi IoT
  • Orchestrazione delle chiamate WebRTC

I WebSockets creano una connessione socket TCP tra più dispositivi o processi. Una funzionalità simile può essere implementata utilizzando HTTP Long Polling o utilizzando un servizio come PubNub. Esaminiamo un po’ di programmazione di base di socket e WebSocket con Node.js.

Esempio di socket in Node.js

Diciamo che hai bisogno di scrivere un’applicazione server, e hai scelto Node.js come linguaggio di programmazione. I tuoi utenti possono essere qualsiasi tipo di client, come un browser web, un’app mobile, un dispositivo IoT, un client Node.js, o qualsiasi cosa che conosca il TCP.

Hai bisogno di servire risorse ai tuoi utenti su HTTP, ma hai anche bisogno di fornire loro flussi per la messaggistica bidirezionale. Possiamo realizzare tutto questo in una singola app server Node.js!

Il codice del video, e anche questo articolo è disponibile nel mio Node.js WebSocket Examples GitHub Repository.

Prima andremo su un po’ di codice semplice socket, seguito dal codice WebSocket. Se servite già delle risorse con qualcosa come Express.js, Hapi, o la libreria HTTP nativa di Node.js, possiamo saltare nel codice socket.

Codice JavaScript del server socket

// Node.js socket server scriptconst net = require('net');// Create a server objectconst server = net.createServer((socket) => { socket.on('data', (data) => { console.log(data.toString()); }); socket.write('SERVER: Hello! This is server speaking.
'); socket.end('SERVER: Closing connection now.
');}).on('error', (err) => { console.error(err);});// Open server on port 9898server.listen(9898, () => { console.log('opened server on', server.address().port);});

Questo script esegue un server socket Node.js sulla porta 9898. Ogni volta che un client si connette a questa app server (IP_ADDRESS:9898) il server invia al client una stringa sul socket aperto. Dice “SERVER: Ciao! Qui è il server che parla”. Ogni volta che il client invia dei dati al server, lo script Node.js registra il contenuto nel gestore dell’evento ‘data’.

Codice JavaScript del socket client

Qui abbiamo il nostro script Node.js socket client, che può connettersi al socket server Node.js di cui sopra.

// Node.js socket client scriptconst net = require('net');// Connect to a server @ port 9898const client = net.createConnection({ port: 9898 }, () => { console.log('CLIENT: I connected to the server.'); client.write('CLIENT: Hello this is client!');});client.on('data', (data) => { console.log(data.toString()); client.end();});client.on('end', () => { console.log('CLIENT: I disconnected from the server.');});

Lo script client cerca di connettersi a localhost:9898. Se la connessione ha successo, allora il client invia una stringa al server sul socket aperto. Dice “CLIENT: Ciao questo è il client!” Ogni volta che il server invia dei dati al client, il client li registra nel gestore di eventi ‘data’.

Questo è l’aspetto dell’output per gli script socket Node.js client e server in esecuzione sulla linea di comando.

Interazione tra server Node.js Socket e client sulla linea di comando

Esempio di WebSocket Node.js

Scrivere codice socket è divertente, ma quando si cerca di implementarlo in un browser web, è piuttosto complicato. Questo problema è stato affrontato da tutti i principali browser nella loro azione per supportare il protocollo WebSocket fuori dalla scatola! In questo modo, le pagine web che usano i socket possono caricarsi molto velocemente perché le librerie front-end per gestire il protocollo sono già nelle applicazioni del browser. Non c’è bisogno di recuperare grandi librerie JS ogni volta che un utente visita la pagina web della tua app in tempo reale.

Node.js WebSocket Server

Scambiamo il nostro codice del server Node.js per il codice del server WebSocket! In questo modo, saremo in grado di servire facilmente i nostri utenti del browser web. Andremo su alcuni JS vanilla per WebSockets che possono essere implementati in qualcosa come un’applicazione React.js.

Questo codice usa la libreria nativa “http” di Node.js e un pacchetto WebSocket NPM di terze parti per creare un server WebSocket. Ha la stessa funzionalità dello script socket che abbiamo scritto prima. Questa volta, stiamo usando il protocollo ufficiale WebSocket per inviare bidirezionalmente i nostri dati tra client e server.

// Node.js WebSocket server scriptconst http = require('http');const WebSocketServer = require('websocket').server;const server = http.createServer();server.listen(9898);const wsServer = new WebSocketServer({ httpServer: server});wsServer.on('request', function(request) { const connection = request.accept(null, request.origin); connection.on('message', function(message) { console.log('Received Message:', message.utf8Data); connection.sendUTF('Hi this is WebSocket server!'); }); connection.on('close', function(reasonCode, description) { console.log('Client has disconnected.'); });});

Node.js WebSocket Browser Client

In seguito, abbiamo il nostro file HTML che viene caricato nei browser web dei client. Notate che la classe WebSocket nel browser JS non ha alcuna dichiarazione. Questo perché i browser moderni danno agli sviluppatori l’accesso automatico a questa classe nel loro front-end JavaScript!

<!DOCTYPE html><html><head> <title>WebSocket Playground</title></head><body></body><script>const ws = new WebSocket('ws://localhost:9898/');ws.onopen = function() { console.log('WebSocket Client Connected'); ws.send('Hi this is web client.');};ws.onmessage = function(e) { console.log("Received: '" + e.data + "'");};</script></html>

Possiamo far partire velocemente il nostro divertente esempio di handshake client-server! Ecco come appare l’output per lo script del server e la console JS del browser web:

Node.js WebSocket Full Stack App

Peer-to-Peer Message Passing

Gli esempi precedenti sono implementazioni di codice intuitive per lo sviluppo di applicazioni in tempo reale. E se volessimo trasmettere dati da utente a utente? E se volessimo farlo senza implementare la complicata logica di routing sul nostro server per collegare due o più utenti? Possiamo realizzare tutto questo in modo economico, sicuro e senza dover far girare costose infrastrutture.

Con PubNub abbiamo accesso a un’infrastruttura fantastica, ospitata e in tempo reale. Possiamo scalare infinitamente a qualsiasi volume di utenti. PubNub offre prezzi a basso costo, basati sulle transazioni, con API di messaggistica facili da usare. Diamo un’occhiata a un esempio di messaggistica peer-to-peer. A proposito, questo può anche essere implementato per lo streaming di dati da client a server, o da server a client, oltre al peer-to-peer.

Prima di provare i seguenti script dovete ottenere le vostre chiavi API PubNub gratuite. Funzionano fino a 1 milione di transazioni gratuite al mese, per sempre. Usa questo modulo per ottenere subito le chiavi API gratuite.

PubNub Data Streaming

Possiamo inviare dati in modo bidirezionale tra servizi, client o app server utilizzando la rete globale di flussi di dati PubNub. C’è un SDK per ogni lingua e dispositivo popolare. Ecco il codice base del browser JS o Node.js per utilizzare la rete Pub/Sub. Questo pubblica un messaggio ogni volta che l’utente preme il tasto return.

const PubNub = require('pubnub'); // or in browser: <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.24.4.js"></script>const pubnub = new PubNub({ publishKey: 'your_pubnub_publish_api_key_here', subscribeKey: 'your_pubnub_subscribe_api_key_here'});pubnub.subscribe({ channels: });pubnub.addListener({ message: (pubnubMessage) => { console.log('New Message:', pubnubMessage.message); }});// Use Control + C to end the programprocess.stdin.on('data', (key) => { // When the user presses the return key if (key.toString() === '
') { pubnub.publish({ message: 'Hello from client 1!', channel: 'my_channel' }); }});

Nota che l’oggetto “process” non è accessibile nel browser JS, ma un simile gestore di eventi per la pressione dei tasti può realizzare la stessa funzionalità.

object.addEventListener('keypress',(event) => {});

PubNub Node.js SDK

Qui c’è la documentazione per PubNub JavaScript SDK.

Quando eseguiamo lo script di cui sopra in 2 finestre di terminale, possiamo vedere Pub/Sub in azione in tempo reale. Ho fatto un secondo script con lo stesso codice, tranne che il messaggio pubblicato indica che proviene dal client numero “2”. Assicuratevi di installare il PubNub Node.js SDK prima di provare ad eseguire gli script sulla vostra linea di comando.

npm install pubnub

PubNub Node.js Pub/Sub API Example Screenshot

Questo è tutto. Spero che siate stati in grado di ricavare alcune preziose intuizioni da questo tutorial sullo streaming di dati WebSocket peer-to-peer, client-to-server e server-to-client. Contattateci all’indirizzo [email protected] se avete bisogno di assistenza o se avete delle domande sulla costruzione di un’applicazione in tempo reale. Ci piace sentire le vostre idee!

Per saperne di più sull’implementazione di JavaScript con PubNub, date un’occhiata ai nostri tutorial del blog React Native per il monitoraggio della geolocalizzazione in tempo reale, un’app di chat in tempo reale e altro ancora! C’è anche un post sul blog sulla programmazione dei socket in Python. Grazie per aver letto! Se ti è piaciuto questo post, iscriviti alla nostra newsletter!

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *