Utilisez PHP et React pour développer une application de visualisation de données dynamique qui affiche les modifications des données en temps réel

À l'ère numérique d'aujourd'hui, la visualisation des données est devenue un outil important et a été largement utilisée dans tous les horizons. Il peut transformer des données complexes en graphiques et diagrammes intuitifs, rendant les données plus faciles à comprendre et à analyser. Avec l'augmentation substantielle du volume de données et des exigences en temps réel, de plus en plus de développeurs commencent à utiliser PHP et React pour créer des applications de visualisation de données dynamiques afin d'afficher les modifications des données en temps réel.

Cet article vous présentera le processus d'utilisation de PHP et React pour créer une telle application de visualisation de données, ainsi que la mise en œuvre technique associée.

1. Aperçu de l'architecture technique

Tout d'abord, nous devons comprendre l'architecture technique de cette application. Dans cet article, nous utiliserons PHP et React pour développer conjointement cette application, et utiliserons WebSocket pour implémenter la fonction push de données en temps réel. La sélection technologique spécifique est la suivante :

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

2. Implémentation back-end

Dans l'implémentation back-end, nous utilisera PHP et MySQL pour compléter la lecture et la mise à jour des données et établir une communication de données en temps réel entre le front et le back end via WebSocket.

1. Lecture des données

Nous devons d'abord définir un fichier PHP data.php pour lire les données qui doivent être visualisées. Dans ce fichier, nous pouvons utiliser des instructions de requête SQL pour obtenir l'ensemble de données qui doit être affiché et le convertir au format de données de tableau.

2. Communication WebSocket

En PHP, nous pouvons utiliser la bibliothèque Ratchet pour implémenter la communication WebSocket. L'implémentation spécifique du code est la suivante :

use RatchetMessageComponentInterface ;
use RatchetConnectionInterface ;

class Websocket implémente 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();
}

}

Dans le code ci-dessus, nous définissons d'abord la classe Websocket et créons une connexion client de stockage via le constructeur. stockage d'objets. Ensuite, nous avons implémenté quatre fonctions d'événement WebSocket : onOpen, onMessage, onClose et onError, qui sont utilisées pour gérer les événements de connexion, les événements de réception de données, les événements de fermeture et les événements d'exception.

3. Implémentation front-end

Dans l'implémentation front-end, nous utiliserons React pour créer le cadre de page de base et établir la communication avec le back-end via WebSocket pour afficher les modifications des données en temps réel.

1. Créer un composant React

Nous devons d'abord créer un index de composant React comme composant d'entrée de l'application visuelle. Dans ce composant, nous établirons la communication via WebSocket et mettrons à jour les données de rendu de la page via la méthode setState après avoir reçu la notification de mise à jour des données. L'implémentation spécifique du code est la suivante :

importer React depuis 'react';
importer { w3cwebsocket as WebSocket } depuis '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>
    );
}

}

export default Index;

Dans le code ci-dessus, nous avons d'abord introduit le module WebSocket via la bibliothèque WebSocket et initialisé un objet d'état dans le constructeur pour stocker les données reçues du backend. Dans la fonction composantDidMount(), nous effectuons des opérations de réception de données et de mise à jour de rendu via l'événement onmessage de WebSocket. Enfin, nous utilisons la fonction renderTableData() pour restituer la table de données mise à jour en temps réel.

2. Build React application

Après avoir terminé la création du composant Index, nous devons le monter sur la page via la méthode ReactDOM.render. Le code d'implémentation spécifique est le suivant :

importer React depuis 'react';
importer ReactDOM depuis 'react-dom';
importer Index depuis './Index';

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

Dans ce bloc de code, nous rendons le composant Index au nœud racine via la fonction ReactDOM.render().

4. Résumé

Jusqu'à présent, nous avons terminé la mise en œuvre de la création d'une application de visualisation de données dynamique avec PHP et React. En établissant la communication via WebSocket, nous réalisons la transmission et l'affichage de données en temps réel entre le front-end et le back-end. Cette application peut être utilisée comme application modèle pour implémenter et étendre davantage de fonctions et de détails afin de répondre aux différents besoins de l'entreprise.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il vous sera utile.

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!