More

    Tableau de bord d’une application en temps réel avec Yii2, Node.js, MySQL et Chart.js

    Dans cet article, nous allons créer un tableau de bord capable d’afficher des graphiques à partir de données en temps réel. Les données que nous utilisons comme simulations sont la population d’une ville. Si vous mettez à jour vos données sur les résidents, que vous les ajoutez ou les supprimez, le graphique changera en temps réel sans qu’il soit nécessaire de rafraîchir la page.

    Avant de commencer, nous devons nous préparer :

    1. Webserver est installé, voir Comment configurer l’hôte virtuel XAMPP dans Windows 10
      .
    2. Yii2 est installé, voir Comment installer Yii2 Advanced via Composer
      .
    3. Node.js est déjà installé, voir Créer des applications en temps réel avec Nodes.js
      .
    4. Chart.js.

    Etapes pour créer un tableau de bord en temps réel avec Yii2, Node.js, MySQL et Chart.js

    Autres articles intéressants

    A. Créer une table avec MySQL

    Créez des tables avec le nom « ville » et des colonnes avec les noms « id » et « population ». Il est également plus facile d’exécuter les scripts SQL suivants.

    CREATE TABLE 'city' (
  'id' CHAR(16) NOT NULL PRIMARY KEY,
  'population' INT(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

    B. Créer un serveur Node.js

    1. Mettre en place un serveur Node.js comme dans Créer des applications en temps réel avec Nodes.js.
    2. Dans le fichier « server.js », nous devons créer une « API » qui mettra à jour les données du graphique que nous avons créé avec Chart.js après que les données aient été stockées avec succès par Yii.
    3. Lorsque l’utilisateur ouvre la page du tableau de bord pour la première fois, nous vérifions si les données initiales pour le graphique du tableau de bord sont disponibles, sinon Yii enverra les données initiales.
    app.post('/status', (req, res) => {
    res.send(isInitData);
});

app.post('/initData', (req, res) => {
    if(!isInitData){
        myData = req.body;
        isInitData=true;
    }
    res.send('success');
});
    1. Ensuite, nous allons créer une « API » qui mettra à jour les données sur les opérations de crud sur Yii.
    app.post('/newData', (req, res) => {
    switch (req.body.actions){
        case "create":
            myData.push({id: req.body.id, population: req.body. population});
            break;
        case "update":
            let i = myData.findIndex(label => label.id === req.body.id);
            myData [i] ={id: req.body.id, population: req.body. population};
            break;
        case "delete":
            let l = myData.findIndex(label => label.id === req.body.id);
            myData.splice(l,1);
            break;
    }
    io.emit('newData', {id: req.body.id, population: req.body. population, actions:req.body.actions});
    res.send('success');
});
    1. Script complet du fichier server.js
    var app = require("express")();
var bodyParser = require('body-parser')
var http = require('http'). Server(app);
var io = require("socket.io")(http,{cors: {origin:"*"}});

var myData = [] ;
var isInitData=false;

http.listen(3000, function () {
    console.log("Listening on 3000");
});

app.use(bodyParser.json({type: 'application/json' }));

app.post('/status', (req, res) => {
    res.send(isInitData);
});

app.post('/initData', (req, res) => {
    if(!isInitData){
        myData = req.body;
        isInitData=true;
    }
    res.send('success');
});

app.post('/newData', (req, res) => {
    switch (req.body.actions){
        case "create":
            myData.push({id: req.body.id, population: req.body. population});
            break;
        case "update":
            let i = myData.findIndex(label => label.id === req.body.id);
            myData [i] ={id: req.body.id, population: req.body. population};
            break;
        case "delete":
            let l = myData.findIndex(label => label.id === req.body.id);
            myData.splice(l,1);
            break;
    }
    io.emit('newData', {id: req.body.id, population: req.body. population, actions:req.body.actions});
    console.log("issuer new data "+req.body.id+" :"+req.body.actions);
    res.send('success');
});

io.on("connection", (socket) => {
    console.log("A user is connected");
    if(isInitData){
        console.log("initial data issuer");
        socket.emit('initialData', myData);
    }
});

    Dernières articles

    Articles Connexes