PHP と React を使用して、データの変更をリアルタイムで表示する動的データ視覚化アプリケーションを開発します。

今日のデジタル時代では、データの視覚化が重要なツールとなり、あらゆる分野で広く使用されています。複雑なデータを直感的なグラフィックスやチャートに変換し、データの理解と分析を容易にします。データ量とリアルタイム要件の大幅な増加に伴い、より多くの開発者が PHP と React を使用して、データの変更をリアルタイムで表示する動的データ視覚化アプリケーションを構築し始めています。

この記事では、PHP と React を使用してこのようなデータ視覚化アプリケーションを構築するプロセスと、関連する技術的な実装について紹介します。

1. 技術アーキテクチャの概要

まず、このアプリケーションの技術アーキテクチャを理解する必要があります。この記事では、PHP と React を使用してこのアプリケーションを共同開発し、WebSocket を使用してリアルタイム データ プッシュ機能を実装します。具体的なテクノロジーの選択は次のとおりです。

• バックエンド テクノロジー: PHP、MySQL、WebSocket
• フロントエンド テクノロジー: React、WebSocket

2. バックエンドの実装

バックエンドの実装では、PHP と MySQL を使用してデータの読み取りと更新を完了し、WebSocket を介してフロントエンドとバックエンド間のリアルタイムのデータ通信を確立します。

1. データの読み取り

まず、視覚化する必要があるデータを読み取るために、PHP ファイル data.php を定義する必要があります。このファイルでは、SQL クエリ ステートメントを使用して、表示する必要があるデータ セットを取得し、それを配列データ形式に変換できます。

2. WebSocket 通信

PHP では、Ratchet ライブラリを使用して WebSocket 通信を実装できます。具体的なコードの実装は次のとおりです。

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;

class Websocketimplements 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($msg);
        }
    }
}

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

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

}

上記のコードでは、最初に Websocket クラスを定義し、コンストラクターを通じてクライアント接続を保存するオブジェクト ストレージを作成しました。次に、接続イベント、データ受信イベント、終了イベント、例外イベントを処理するために、onOpen、onMessage、onClose、onError という 4 つの WebSocket イベント関数を実装しました。

3. フロントエンドの実装

フロントエンドの実装では、React を使用して基本的なページ フレームワークを構築し、WebSocket を介してバックエンドとの通信を確立し、データの変更を表示します。リアルタイム。

1. React コンポーネントの作成

まず、ビジュアル アプリケーションのエントリ コンポーネントとして React コンポーネント Index を作成する必要があります。このコンポーネントではWebSocketによる通信を確立し、データ更新通知を受け取った後にsetStateメソッドでページの描画データを更新します。具体的なコード実装は次のとおりです。

import React from 'react';
import { w3cwebsocket as WebSocket } from 'websocket';

class Index extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        data: []
    };
}

componentDidMount() {
    const client = new WebSocket('ws://localhost:8088');
    client.onmessage = (message) => {
        const data = JSON.parse(message.data);
        this.setState({ data });
    };
}

renderTableData() {
    // 渲染数据表格
}

render() {
    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>数值</th>
                    </tr>
                </thead>
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
        </div>
    );
}

}

デフォルトのインデックスをエクスポート;

上記のコードでは、最初に WebSocket ライブラリを通じて WebSocket モジュールを導入し、コンストラクターで状態オブジェクトを初期化して次のものを格納しました。最後までに受信したデータ。 ComponentDidMount() 関数では、WebSocket の onmessage イベントを通じてデータの受信とレンダリングの更新操作を実行します。最後に、renderTableData() 関数を使用して、リアルタイムで更新されたデータ テーブルをレンダリングします。

2. React アプリケーションのビルド

Index コンポーネントの作成が完了したら、ReactDOM.render メソッドを通じてそれをページにマウントする必要があります。具体的な実装コードは次のとおりです。

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './Index';

ReactDOM.render(, document.getElementById('root'));

このコード ブロックでは、ReactDOM.render() 関数を通じて Index コンポーネントをルート ノードにレンダリングします。 。

4. 概要

これまでに、PHP と React を使用した動的データ視覚化アプリケーションの構築の実装が完了しました。 WebSocketによる通信を確立することで、フロントエンドとバックエンド間のリアルタイムなデータ送信と表示を実現します。このアプリケーションは、さまざまなビジネス ニーズを満たすために、より多くの機能と詳細を実装および拡張するためのテンプレート アプリケーションとして使用できます。

以上がこの記事の全内容です。ご参考になれば幸いです。

以上がPHP と React を使用して、データの変更をリアルタイムで表示する動的データ視覚化アプリケーションを開発します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。