Painel de aplicativos em tempo real com Yii2, Node.js, MySQL e Chart.js

Neste artigo, criaremos um painel que pode exibir gráficos a partir de dados em tempo real. Os dados que usamos como simulações são a população de uma cidade. Se você atualizar os dados dos residentes, adicioná-los ou excluí-los, o gráfico será alterado em tempo real sem a necessidade de atualizar a página.

Antes de começarmos, precisamos nos preparar:

1. Webserver está instalado, consulte Como configurar o Virtual Host XAMPP no Windows 10
   .
2. O Yii2 está instalado, consulte Como instalar o Yii2 Advanced via Composer
   .
3. O Node.js já está instalado, consulte Criar aplicativos em tempo real com o Nodes.js
   .
4. Chart.js.

Etapas para criar um painel de controle de aplicativo em tempo real com Yii2, Node.js, MySQL e Chart.js

A. Criar uma tabela com o MySQL

Crie tabelas com o nome “city” e colunas com os nomes “id” e “population”. Ou é mais fácil executar os seguintes scripts sql.

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

B. Criar um servidor Node.js

1. Configure um servidor Node.js como em Criando aplicativos em tempo real com Nodes.js.
2. No arquivo “server.js”, o que precisamos criar é uma “API” que atualizará os dados no gráfico que criamos com o Chart.js depois que os dados forem armazenados com sucesso pelo Yii.
3. Quando o usuário abre a página do painel pela primeira vez, verificamos se os dados iniciais do gráfico do painel estão disponíveis; caso contrário, o Yii enviará os dados iniciais.

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

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

3. Em seguida, criaremos uma “API” que atualizará os dados sobre as operações de crud no 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');
});

4. Script completo do arquivo 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);
    }
});