In questa lezione realizzeremo una piccola applicazione per monitorare in tempo reale gli accessi ad un sito Web, sfruttando WebSocket e la libreria ws di Node.js. Creeremo una homepage finta e, ogni volta che un utente richiederà la pagina, il nostro server WebSocket invierà all'amministratore (che visualizzerà una seconda pagina di amministrazione) una notifica di nuovo accesso.
Per realizzare questo esempio dobbiamo implementare sia un normale server web (facendoci aiutare da httpdispatcher) per fornire l'accesso alla homepage e alla pagina di amministrazione sia un server WS che si appoggierà al server web già esistente per offrire i suoi servizi.
Iniziamo dalla logica client-side della pagina di amministrazione:
var newUser = function(data) {
document.getElementById("table").innerHTML +=
"
"+data.time+"
"+data.id+"
"+data.userAgent+"
";
}
var ws = new WebSocket('ws://localhost:1337');
ws.onmessage = function (event) {
newUser(JSON.parse(event.data));
};Il codice è molto semplice: viene creata una funzione newUser che si occupa di inserire in una tabella una nuova riga inserendo le proprietà timestamp, ip e userAgent del JSON ricevuto e viene istanziato un nuovo oggetto WebSocket (nativo) gestendone la callback onmessage.
I messaggi che vengono scambiati tra client e server sono ovviamente stringhe, quindi nel caso si vogliano passare oggetti complessi, la miglior soluzione è quella di usare JSON.stringify e JSON.parse per "montare" e "smontare" l'oggetto JSON.
La logica server-side non è molto più complessa:
var http = require('http'),
dispatcher = require('httpdispatcher'),
WebSocketServer = require('ws').Server;
dispatcher.setStatic('static');
var adminWS = [ ];
var notify = function(req, res) {
for(c in adminWS)
adminWS[c][/c].send(JSON.stringify({
ip: req.connection.remoteAddress,
userAgent: req.headers['user-agent'],
time: (new Date()).getTime()
}));
}
dispatcher.onGet("/homepage", function(req, res) {
res.end("<h1>Homepage</h1");
notify(req, res);
});
var server = http.createServer(function (req, res) {
dispatcher.dispatch(req, res);
});
server.listen(1337, '127.0.0.1');
var wss = new WebSocketServer({server:server});
wss.on('connection', function(ws) {
adminWS.push(ws);
});Dopo le dovute inclusioni di moduli esterni e la dichiarazione della cartella static viene istanziato l'array adminWS. Questo servirà a contenere le connessioni attive verso gli amministratori che dovranno essere notificati ogniqualvolta un nuovo utente accederà alla home page.
La funzione successiva si occupa appunto di ciclare adminWS e di inviare il messaggio allegando indirizzo ip (req.connection.remoteAddres), userAgent (req.header['user-agent']) e timestamp attuale del server.
Successivamente viene creato l'entry point della finta home page che oltre a ritornare un HTML banale, invoca la funzione notify definita in precedenza.
Il server Web viene poi istanziato e avviato. Per avviare il server WebSocket utilizziamo il costruttore WebSocketServer passando come parametro il server web già istanziato. In questo modo la porta TCP sarà la stessa per i due servizi, quello che cambierà sarà il protocollo (HTTP in un caso e ws in un altro).
Inoltre come callback dell'evento connection viene agganciata una semplice funzione che aggiunge la connessione all'array adminWS.
Ora basterà avviare i server web con node e aprire due tab diverse nel nostro browser (o aprire due browser diversi): da una parte /static/index.html (che rappresenta la pagina di "amministrazione") e dall'altra /homepage. Ad ogni refresh della seconda pagina, la prima verrà notificata del nuovo ingresso.
Tutto il codice è scaricabile in allegato.
Conclusioni
Rispetto al modello long-polling, WebSocket è estremamente più semplice e confortevole grazie ad un API pulita e super comprensibile. Questo deriva dal fatto che WebSocket è stato pensato ed implementato proprio per servizi e applicazioni di questo genere mentre il long-polling è un adattamento di una tecnologia iper affidabile (HTTP) verso un contesto improprio.