Echtzeit-Anwendungs-Dashboard mit Yii2, Node.js, MySQL und Chart.js

In diesem Artikel werden wir ein Dashboard erstellen, das Grafiken aus Daten in Echtzeit anzeigen kann. Die Daten, die wir als Simulationen verwenden, sind die Einwohner einer Stadt. Wenn Sie Ihre Einwohnerdaten aktualisieren, hinzufügen oder löschen, wird sich die Grafik in Echtzeit ändern, ohne dass die Seite aktualisiert werden muss.

Bevor wir beginnen, müssen wir uns vorbereiten:

1. Webserver installiert ist, siehe Wie man den virtuellen Host XAMPP in Windows 10 konfiguriert
   .
2. Yii2 installiert ist, siehe Wie man Yii2 Advanced über Composer installiert
   .
3. Node.js ist bereits installiert, siehe Erstellen von Echtzeitanwendungen mit Nodes.js
   .
4. Chart.js.

Schritte zur Erstellung einer Echtzeit-Anwendung Dashboard mit Yii2, Node.js, MySQL und Chart.js

A. Erstellen Sie eine Tabelle mit MySQL

Erstellen Sie Tabellen mit dem Namen „city“ und Spalten mit den Namen „id“ und „population“. Oder es ist einfacher, die folgenden SQL-Skripte auszuführen.

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

B. Erstellen Sie einen Node server.js

1. Einrichten eines Node server.js wie in Erstellung von Echtzeitanwendungen mit Nodes.js.
2. In der Datei „server.js“ müssen wir eine „API“ erstellen, die die Daten im Diagramm aktualisiert, das wir mit Chart.js erstellen, nachdem die Daten erfolgreich von Yii gespeichert wurden.
3. Wenn der Benutzer die Dashboard-Seite zum ersten Mal öffnet, prüfen wir, ob die Anfangsdaten für das Dashboard-Diagramm verfügbar sind. Wenn nicht, sendet Yii die Anfangsdaten.

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

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

3. Als Nächstes werden wir eine „API“ erstellen, die die Daten über rohe Operationen auf Yii aktualisieren wird.

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. Vollständiges Skript der Datei 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);
    }
});