PHP と Vue.js でリアルタイム更新を伴うリアルタイム統計グラフを実装する方法-PHPチュートリアル-php.cn

PHP と Vue.js でリアルタイム更新を伴うリアルタイム統計グラフを実装する方法

王林

リリース： 2023-08-17 09:32:01

オリジナル

915 人が閲覧しました

PHP と Vue.js でリアルタイム更新を伴うリアルタイム統計グラフを実装する方法

PHP および Vue.js でリアルタイムに更新される統計グラフを実装する方法

概要
インターネットの継続的な発展に伴い、リアルタイムの更新された統計グラフの需要が増加しています。タイムデータも増えていますので、どんどん来てください。リアルタイム統計グラフにより、データの変化をリアルタイムに監視し、意思決定を強力にサポートします。この記事では、PHPとVue.jsを使って、リアルタイムに更新されるリアルタイム統計グラフを実装する方法を紹介します。

テクノロジースタック
リアルタイムで更新される統計グラフを実装する場合、PHP はバックグラウンドデータの処理と送信を担当し、フロントエンドフレームワークとしての Vue.js はリアルタイムデータの処理を担当します。チャートのレンダリングと更新。

手順

WebSocket サービスのインストールと構成
リアルタイム更新を実現する鍵は、WebSocket テクノロジを使用することです。 Ratchet を使用して、単純な WebSocket サーバーを実装できます。 PHP プロジェクトで次のコマンドを実行してインストールします。

$ composer require cboden/ratchet

ログイン後にコピー

インストールが完了したら、WebSocket サーバークラスを作成し、Ratchet の WebSocketServerInterface を継承し、onMessage、onOpen、onClose などのメソッドを実装できます。。具体的な実装については、Ratchet の公式ドキュメントを参照してください。

WebSocket サービスの開始と実行
WebSocket サービスは、PHP プロジェクトのエントリファイルで開始できます。新しいメッセージがある場合、メッセージは WebSocket を通じてフロントエンドにプッシュされます。

// 入口文件 index.php

use RatchetServerIoServer;
use MyWebSocketServer;

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

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

ログイン後にコピー

フロントエンドページのデザイン
Vue.js を使用してフロントエンドページを構築するには、まず Vue.js ライブラリと Chart.js (優れたチャートライブラリ）。次に、Vue インスタンスの data プロパティで初期グラフデータを定義します。

<!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>

ログイン後にコピー

バックエンドのデータ処理とプッシュ
WebSocket サーバーがデータを受信した後、データを処理し、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();
    }
}

ログイン後にコピー

結論
上記の手順により、リアルタイムに更新されるリアルタイム統計グラフを実装することができました。 PHP はデータの処理とプッシュを担当し、Vue.js はリアルタイムでのチャートのレンダリングと更新を担当します。このリアルタイムデータ表示方法は、リアルタイムモニタリング、データ分析などの分野で広く使用され、意思決定のためのタイムリーかつ正確なデータサポートを提供します。

以上がPHP と Vue.js でリアルタイム更新を伴うリアルタイム統計グラフを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。