Maison > Article > développement back-end > Comment implémenter des graphiques statistiques en temps réel avec des mises à jour en temps réel en PHP et Vue.js

Comment implémenter des graphiques statistiques en temps réel avec des mises à jour en temps réel en PHP et Vue.js

王林original: 2023-08-17 09:30:14932parcourir

Aperçu
Avec le développement continu d'Internet, la demande de données en temps réel augmente également. Les graphiques statistiques en temps réel nous permettent de suivre l'évolution des données en temps réel et fournissent un solide support à la prise de décision. Cet article explique comment utiliser PHP et Vue.js pour implémenter un graphique statistique en temps réel qui se met à jour en temps réel.

Pile technologique
Lors de la mise en œuvre de graphiques statistiques mis à jour en temps réel, PHP est responsable du traitement et de la transmission des données d'arrière-plan, tandis que Vue.js, en tant que framework front-end, est responsable du rendu et de la mise à jour en temps réel des graphiques.

Étapes

Installer et configurer le service WebSocket
La clé pour obtenir des mises à jour en temps réel est d'utiliser la technologie WebSocket. Nous pouvons utiliser Ratchet pour implémenter un simple serveur WebSocket. Exécutez la commande suivante dans le projet PHP pour installer :

$ composer require cboden/ratchet

Une fois l'installation terminée, nous pouvons créer une classe de serveur WebSocket, hériter de l'interface WebSocketServerInterface de Ratchet et implémenter des méthodes telles que onMessage, onOpen et onClose. Pour une implémentation spécifique, veuillez vous référer à la documentation officielle de Ratchet.

Démarrer et exécuter le service WebSocket
Vous pouvez démarrer le service WebSocket dans le fichier d'entrée du projet PHP. Lorsqu'il y a un nouveau message, le message est poussé vers le front-end via WebSocket.

// 入口文件 index.php

use RatchetServerIoServer;
use MyWebSocketServer;

require dirname(__FILE__) . '/vendor/autoload.php';

$server = IoServer::factory(
    new MyWebSocketServer(),
    8080
);
$server->run();

Conception de page front-end
Pour utiliser Vue.js pour créer une page front-end, vous devez d'abord présenter la bibliothèque Vue.js et Chart.js (une excellente bibliothèque de graphiques). Ensuite, définissez quelques données initiales du graphique dans la propriété data de l'instance Vue.

<!DOCTYPE html>
<html>
<head>
    <title>实时统计图表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div id="app">
        <canvas id="chart"></canvas>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                chartData: {
                    labels: [],
                    datasets: []
                }
            },
            mounted() {
                this.initChart();
                this.listenWebSocket();
            },
            methods: {
                initChart() {
                    // 使用Chart.js初始化图表
                    // 可以根据需要自定义图表的样式和数据
                    // 请参考Chart.js的官方文档
                },
                listenWebSocket() {
                    let socket = new WebSocket("ws://localhost:8080");
                    socket.onmessage = (event) => {
                        // 当有新的数据推送时，更新chartData
                        this.chartData.labels.push(event.data.label);
                        this.chartData.datasets.push({
                            label: event.data.label,
                            data: event.data.value
                        });

                        // 更新图表
                        this.updateChart();
                    };
                },
                updateChart() {
                    // 使用Chart.js更新图表
                    // 可以根据需要自定义图表的样式和数据
                    // 请参考Chart.js的官方文档
                }
            }
        });
    </script>
</body>
</html>

Traitement et transmission des données backend
Une fois que le serveur WebSocket a reçu les données, nous devons traiter les données, puis transmettre les données vers le front-end via WebSocket.

// MyWebSocketServer.php

use RatchetConnectionInterface;
use RatchetMessageComponentInterface;

class MyWebSocketServer implements MessageComponentInterface
{
    protected $clients;

    public function __construct()
    {
        $this->clients = new SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn)
    {
        $this->clients->attach($conn);
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send(json_encode([
                    'label' => $msg['label'],
                    'value' => $msg['value']
                ]));
            }
        }
    }

    public function onClose(ConnectionInterface $conn)
    {
        $this->clients->detach($conn);
    }

    public function onError(ConnectionInterface $conn, Exception $e)
    {
        $conn->close();
    }
}

Conclusion
Grâce aux étapes ci-dessus, nous avons réussi à mettre en œuvre un graphique statistique en temps réel qui se met à jour en temps réel. PHP est responsable du traitement des données et du push, tandis que Vue.js est responsable du rendu et de la mise à jour des graphiques en temps réel. Cette méthode d'affichage des données en temps réel peut être largement utilisée dans la surveillance en temps réel, l'analyse des données et d'autres domaines pour fournir une aide rapide et précise aux données pour la prise de décision.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser PHP et Vue.js pour implémenter la liaison de données pour les graphiques statistiquesArticle suivant：Comment utiliser PHP et Vue.js pour implémenter la liaison de données pour les graphiques statistiques

Articles Liés

Voir plus