PHP と WebSocket を使用してリアルタイムデータ視覚化アプリケーションを構築する方法-PHPチュートリアル-php.cn

PHP と WebSocket を使用してリアルタイムデータ視覚化アプリケーションを構築する方法

PHPz

リリース： 2023-12-17 13:02:01

オリジナル

892 人が閲覧しました

PHP と WebSocket を使用してリアルタイムデータ視覚化アプリケーションを構築する方法

PHP と WebSocket を使用してリアルタイムデータ視覚化アプリケーションを作成する方法

現在、インターネットの発展とスマートデバイスの普及により、時間データ視覚化アプリケーションはあらゆる分野で使用されており、その重要性はますます高まっています。リアルタイムのデータ視覚化は、データの傾向やパターンをより深く理解するのに役立つだけでなく、リアルタイムの意思決定のサポートも提供します。この記事では、PHP と WebSocket テクノロジを使用してリアルタイムデータ視覚化アプリケーションを作成する方法を紹介し、具体的なコード例を示します。

まず、WebSocket テクノロジーを理解する必要があります。 WebSocket は、単一の TCP 接続を介した全二重通信用のプロトコルであり、HTTP プロトコルよりもオーバーヘッドが低く、効率が高くなります。現在、ほとんどの最新ブラウザは WebSocket をネイティブにサポートしているため、WebSocket を使用したリアルタイムデータアプリケーションの開発が容易になります。

PHP と WebSocket を使用してリアルタイムデータ視覚化アプリケーションを作成する手順は次のとおりです。

WebSocket サーバーをセットアップします

まず、 WebSocket サーバーをセットアップし、クライアント接続とメッセージを処理する必要があります。 Ratchet や PHP-WebSocket などの既存の WebSocket サーバーを使用することも、socket_create() や socket_bind()## などの PHP の組み込み WebSocket サーバー関数を使用することもできます。＃など。

以下は、PHP 組み込み関数を使用して WebSocket サーバーを作成するためのサンプルコードです。

// 创建并绑定Socket
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_bind($socket, '0.0.0.0', 8080);
socket_listen($socket);

// 监听连接
$clients = [$socket];
while (true) {
    $read = $clients;
    socket_select($read, $write, $except, null);

    foreach ($read as $client) {
        if ($client === $socket) {
            // 接受新连接
            $newClient = socket_accept($socket);
            $clients[] = $newClient;
        } else {
            // 处理客户端消息
            $data = socket_read($client, 1024);
            // 根据接收到的消息进行相应处理
            // ...
        }
    }
}

ログイン後にコピー

実際のアプリケーションでは、次のような特定のニーズに応じてサーバーを拡張および最適化できます。認証メカニズムと永続性の追加、ストレージなど

次に、WebSocket サーバーに接続してリアルタイムデータを受信するクライアントアプリケーションを作成する必要があります。 PHP では、

new WebSocket() を使用して WebSocket 接続を作成し、onmessage イベントを使用して受信したデータを処理できます。

以下は、PHP を使用して WebSocket クライアントを作成するサンプルコードです:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<script>
    var websocket = new WebSocket('ws://localhost:8080');

    websocket.onopen = function() {
        // 连接成功后发送消息
        websocket.send('Hello, server!');
    };

    websocket.onmessage = function(event) {
        // 收到服务器发送的消息后进行处理
        var data = event.data;
        // 进行数据可视化处理
        // ...
    };

    websocket.onclose = function() {
        // 连接关闭后的处理
        console.log('Connection closed');
    };
</script>

</body>
</html>

ログイン後にコピー

上記のコードでは、操作を簡素化するために jQuery ライブラリを使用し、

websocket.send( ) メソッドは WebSocket サーバーにメッセージを送信します。

最後に、受信したリアルタイムデータに基づいて可視化処理を実行する必要があります。特定のニーズに応じて、Chart.js、Echarts などのさまざまなデータ視覚化ライブラリを使用してリアルタイムデータを表示できます。

以下は、Chart.js を使用してリアルタイムデータを表示するサンプルコードです:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
    <canvas id="chart" width="400" height="400"></canvas>
    <script>
        var ctx = document.getElementById('chart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Real-time Data',
                    data: [],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        websocket.onmessage = function(event) {
            var data = event.data;
            // 更新数据和标签
            chart.data.labels.push(new Date().toLocaleTimeString());
            chart.data.datasets[0].data.push(data);
            chart.update();
        };
    </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、Chart.js ライブラリを使用して折れ線グラフを描画し、# を使用します。 ##chart.data.labels.push()

メソッドと chart.data.datasets[0].data.push() メソッドを使用してデータを更新します。上記の手順により、PHP と WebSocket を使用してリアルタイムデータ視覚化アプリケーションを作成できます。 WebSocket サーバーはリアルタイムデータを受信すると、接続されているすべてのクライアントにデータを送信し、クライアントの Web ページにデータを視覚的に表示します。この種のリアルタイムデータ視覚化アプリケーションには、監視システム、リアルタイム天気予報、その他のシナリオでの幅広い応用の可能性があります。

以上がPHP と WebSocket を使用してリアルタイムデータ視覚化アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。