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;

class Websocket은 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의 네 가지 WebSocket 이벤트 함수를 구현했습니다.

3. 프론트엔드 구현

프런트엔드 구현에서는 React를 사용하여 기본 페이지 프레임워크를 구축하고 WebSocket을 통해 백엔드와 통신하여 데이터 변경 사항을 실시간으로 표시해 보겠습니다.

1. React 컴포넌트 생성

먼저 시각적 애플리케이션의 진입 컴포넌트로 React 컴포넌트 Index를 생성해야 합니다. 이 구성 요소에서는 WebSocket을 통해 통신을 설정하고 데이터 업데이트 알림을 받은 후 setState 메서드를 통해 페이지의 렌더링 데이터를 업데이트합니다. 구체적인 코드 구현은 다음과 같습니다:

import React from 'react';

import { w3cwebsocket as WebSocket } from 'websocket';

class Index 확장 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 기본 인덱스;

위 코드에서는 먼저 WebSocket 라이브러리를 통해 WebSocket 모듈을 도입하고 백엔드에서 받은 데이터를 저장하기 위해 생성자에서 상태 객체를 초기화했습니다. componentDidMount() 함수에서는 WebSocket의 onmessage 이벤트를 통해 데이터 수신 및 렌더링 업데이트 작업을 수행합니다. 마지막으로, 실시간 업데이트되는 데이터 테이블을 렌더링하기 위해 renderTableData() 함수를 사용합니다.

2. React 애플리케이션 빌드

Index 구성 요소 생성이 완료되면 ReactDOM.render 메서드를 통해 페이지에 마운트해야 합니다. 구체적인 구현 코드는 다음과 같습니다.

'react'에서 React 가져오기;

'react-dom'에서 ReactDOM 가져오기;
'./Index'에서 인덱스 가져오기;

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

이 코드 블록에서는 ReactDOM.render() 함수를 통해 Index 구성 요소를 루트 노드에 렌더링합니다.

4. 요약

지금까지 PHP와 React를 사용하여 동적 데이터 시각화 애플리케이션 구축 구현을 완료했습니다. WebSocket을 통해 통신을 구축함으로써 프런트엔드와 백엔드 간의 실시간 데이터 전송 및 표시를 실현합니다. 이 애플리케이션은 다양한 비즈니스 요구 사항을 충족하기 위해 더 많은 기능과 세부 정보를 구현하고 확장하는 템플릿 애플리케이션으로 사용할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 여러분에게 도움이 되길 바랍니다.

위 내용은 PHP와 React를 사용하여 실시간으로 데이터 변경 사항을 표시하는 동적 데이터 시각화 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!