Gunakan PHP dan React untuk membangunkan aplikasi visualisasi data dinamik yang memaparkan perubahan data dalam masa nyata

Dalam era digital hari ini, visualisasi data telah menjadi alat penting dan telah digunakan secara meluas dalam semua lapisan masyarakat. Ia boleh mengubah data yang kompleks kepada grafik dan carta intuitif, menjadikan data lebih mudah untuk difahami dan dianalisis. Dengan peningkatan ketara dalam volum data dan keperluan masa nyata, lebih banyak pembangun mula menggunakan PHP dan React untuk membina aplikasi visualisasi data dinamik untuk memaparkan perubahan data dalam masa nyata.

Artikel ini akan memperkenalkan anda kepada proses menggunakan PHP dan React untuk membina aplikasi visualisasi data sedemikian, serta pelaksanaan teknikal yang berkaitan.

1. Gambaran keseluruhan seni bina teknikal

Pertama sekali, kita perlu memahami seni bina teknikal aplikasi ini. Dalam artikel ini, kami akan menggunakan PHP dan React untuk membangunkan aplikasi ini secara bersama, dan akan menggunakan WebSocket untuk melaksanakan fungsi tolak data masa nyata. Pemilihan teknologi khusus adalah seperti berikut:

• Teknologi back-end: PHP, MySQL, WebSocket
• Teknologi front-end: React, WebSocket

2. Pelaksanaan back-end

Dalam pelaksanaan back-end, kami akan menggunakan PHP dan MySQL Lengkapkan pembacaan dan pengemaskinian data, dan mewujudkan komunikasi data masa nyata antara bahagian hadapan dan belakang melalui WebSocket.

1. Pembacaan data

Kita perlu mentakrifkan fail PHP data.php terlebih dahulu untuk membaca data yang perlu divisualisasikan. Dalam fail ini, kita boleh menggunakan pernyataan pertanyaan SQL untuk mendapatkan set data yang perlu dipaparkan dan menukarnya kepada format data tatasusunan.

2. Komunikasi WebSocket

Dalam PHP, kita boleh menggunakan perpustakaan Ratchet untuk melaksanakan komunikasi WebSocket. Pelaksanaan kod khusus adalah seperti berikut:

gunakan RatchetMessageComponentInterface
gunakan RatchetConnectionInterface

kelas Websocket melaksanakan 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();
}

}

dalam kod di atas, kita buat storan dan buat storan terlebih dahulu; penyimpanan objek. Seterusnya, kami melaksanakan empat fungsi acara WebSocket: onOpen, onMessage, onClose dan onError, yang digunakan untuk mengendalikan acara sambungan, acara menerima data, acara penutup dan acara pengecualian.

3. Pelaksanaan bahagian hadapan

Dalam pelaksanaan bahagian hadapan, kami akan menggunakan React untuk membina rangka kerja halaman asas dan mewujudkan komunikasi dengan bahagian belakang melalui WebSocket untuk memaparkan perubahan data dalam masa nyata.

1. Cipta komponen React

Kita perlu mencipta Indeks komponen React sebagai komponen kemasukan aplikasi visual. Dalam komponen ini, kami akan mewujudkan komunikasi melalui WebSocket dan mengemas kini data pemaparan halaman melalui kaedah setState selepas menerima pemberitahuan kemas kini data. Pelaksanaan kod khusus adalah seperti berikut:

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

class Index memanjangkan 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>
    );
}

}

eksport default Index

;

Dalam kod di atas, kami mula-mula memperkenalkan modul WebSocket melalui perpustakaan WebSocket, dan memulakan objek keadaan dalam pembina untuk menyimpan data yang diterima dari bahagian belakang. Dalam fungsi componentDidMount(), kami melaksanakan penerimaan data dan operasi kemas kini pemaparan melalui acara onmessage WebSocket. Akhir sekali, kami menggunakan fungsi renderTableData() untuk memaparkan jadual data dikemas kini masa nyata.

2. Aplikasi Bina React

Selepas melengkapkan penciptaan komponen Indeks, kita perlu melekapkannya pada halaman melalui kaedah ReactDOM.render. Kod pelaksanaan khusus adalah seperti berikut:

import React daripada 'react';
import ReactDOM daripada 'react-dom';
import Indeks daripada './Index';

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

Dalam blok kod ini, kami memberikan komponen Indeks kepada nod akar melalui fungsi ReactDOM.render().

4. Ringkasan

Setakat ini, kami telah menyelesaikan pelaksanaan membina aplikasi visualisasi data dinamik dengan PHP dan React. Dengan mewujudkan komunikasi melalui WebSocket, kami merealisasikan penghantaran dan paparan data masa nyata antara bahagian hadapan dan belakang. Aplikasi ini boleh digunakan sebagai aplikasi templat untuk melaksanakan dan melanjutkan lebih banyak fungsi dan butiran untuk memenuhi keperluan perniagaan yang berbeza.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Gunakan PHP dan React untuk membangunkan aplikasi visualisasi data dinamik yang memaparkan perubahan data dalam masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!