Per creare grafici nelle nostre pagine web, siamo abituati ad usare librerie esterne in Javascript.

Anche giustamente, visto che ce ne sono alcune spettacolari.

Ma in verità possiamo creare grafici anche per conto nostro, usando HTML, Canvas e Javascript (ovviamente).

Ho cominciato a studiarmi un pò Mustache per Javascript, caricando i dati tramite AJAX.

Oltre a Mustache.js, avremmo bisogno anche di jQuery; infine useremo un file di template esterno (giusto per fare un esempio più completo.

Mustache.js lo potete scaricare da GitHub (ho dovuto copiarlo in locale, il caricamento remoto non mi funzionava).

Specifichiamo cha parliamo della versione di 2 di Vue.js.

Lo sto cominciando a vedere adesso, quindi non so quante differenze ci siano con la versione 1.

Comunque, vediamo come effettuare richieste AJAX e di conseguenza riepire una tabella.

Socket.io ha la possibilità di inviare messaggi a tutti i client connessi (broadcasting) in maniera veramente easy.

Penso sia più facile visualizzare un esempio; partiamo dal Javascript:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var clients = 0;

app.get('/', function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});

io.on('connection', function (socket) {
    clients++;
    io.sockets.emit('broadcast', {description: clients + ' clients connected!'});
    socket.on('disconnect', function () {
        clients--;
        io.sockets.emit('broadcast', {description: clients + ' clients connected!'});
    });
});

http.listen(3000, function () {
    console.log('listening on *:3000');
});

Con Socket.io è possibile intercettare / emettere eventi, ed agire di conseguenza.

Ne vediamo tre esempi.

Il primo riguarda l'evento message, che è un evento built-in del framework:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});

io.on('connection', function (socket) {
    console.log('A user connected');

    setTimeout(function () {
        socket.send("Messaggio dopo 3 secondi");
    }, 3000);

    socket.on('disconnect', function () {
        console.log('A user disconnected');
    });

});

http.listen(3000, function () {
    console.log('listening on *:3000');
});