집 >PHP 프레임워크 >Workerman >Workerman을 사용하여 실시간 데이터 시각화 시스템을 구현하는 방법

Workerman을 사용하여 실시간 데이터 시각화 시스템을 구현하는 방법

WBOY원래의: 2023-11-07 08:48:14751검색

Workerman은 PHP를 기반으로 개발된 고성능 PHP 소켓 프레임워크로 네트워크 애플리케이션 개발에 사용되며 효율성, 안정성, 확장성의 장점을 가지고 있습니다. 가장 큰 특징은 높은 동시성을 지원하고 수백만 개의 TCP 연결을 처리할 수 있다는 점입니다.

이 기사에서는 Workerman을 사용하여 WebSocket 서버를 구축하는 방법, JavaScript의 WebSocket API를 사용하여 실시간 데이터를 얻는 방법 및 Workerman을 사용하여 실시간 데이터 시각화 시스템을 구현하는 방법을 소개합니다. 도구 라이브러리 D3.js를 사용하여 시각적 차트를 그립니다.

Workerman 설치

Workerman 설치는 매우 간단합니다. 설치는 Composer를 사용하는 것이 좋습니다. 터미널에서 다음 작업을 수행합니다.

composer require workerman/workerman

WebSocket 서버 구축

WebSocket 서버를 구축하는 단계는 다음과 같습니다.

WebSocket 서버 파일 server.php를 생성합니다. 코드는 다음과 같습니다.

require_once __DIR__ . '/vendor/autoload.php';  

use WorkermanWorker;
use WorkermanLibTimer;
use WorkermanConnectionTcpConnection;

$ws_worker = new Worker("websocket://0.0.0.0:2346");

$ws_worker->onConnect = function (TcpConnection $connection) {
    echo "client connected
";
};

$ws_worker->onMessage = function (TcpConnection $connection, $data) {
    $connection->send(json_encode(array(
        'value' => rand(1, 100)
    )));
};

$ws_worker->onClose = function (TcpConnection $connection) {
    echo "client closed
";
};

$ws_worker->onWorkerStart = function (Worker $ws_worker) {
    // 每隔1秒钟向所有客户端推送一次随机数据
    Timer::add(1, function () use ($ws_worker) {
        foreach ($ws_worker->connections as $connection) {
            $connection->send(json_encode(array(
                'value' => rand(1, 100)
            )));
        }
    });
};

Worker::runAll();

코드는 주로 다음 기능을 구현합니다.

클라이언트 연결 종료 이벤트를 수신합니다. , 정기적으로 모든 클라이언트에 무작위 데이터를 푸시합니다.
터미널에서 WebSocket 서버 실행:
```
php server.php start
```
JavaScript를 사용하여 실시간 데이터 가져오기

JavaScript의 WebSocket API를 사용하여 브라우저에서 실시간 데이터를 가져오는 코드는 다음과 같습니다.

var ws = new WebSocket('ws://localhost:2346');  

ws.onmessage = function (event) {  
    var data = JSON.parse(event.data);  
    console.log(data.value);  
}

코드는 주로 다음 기능을 구현합니다.

WebSocket 연결을 생성합니다.

서버로부터 데이터를 수신하면 데이터를 구문 분석하여 콘솔에 출력합니다.

D3.js를 사용하여 브라우저에서 시각적 차트를 그리는 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Realtime Data Visualization</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>  
    var data = [];

    var width = 800;
    var height = 500;

    var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    var xScale = d3.scaleLinear()
        .range([0, width])
        .domain([0, 10]);

    var yScale = d3.scaleLinear()
        .range([height, 0])
        .domain([0, 100]);

    var line = d3.line()
        .x(function (d) {
            return xScale(d.index);
        })
        .y(function (d) {
            return yScale(d.value);
        });

    var path = svg.append('path')
        .attr('fill', 'none')
        .attr('stroke', 'steelblue')
        .attr('stroke-width', '1');

    var shift = 0;
    ws.onmessage = function (event) {
        var dataItem = JSON.parse(event.data);

        // 添加新数据
        data.push({
            index: shift,
            value: dataItem.value
        });

        // X轴平移
        if (shift >= 10) {
            shift--;
        }

        // 更新数据的X轴位置
        data.forEach(function (d) {
            d.index = d.index + 1;
        });

        // 更新路径数据
        path.attr('d', line(data));

        shift++;
    };
</script>
</body>
</html>

코드는 주로 다음 기능을 구현합니다.

SVG 요소 생성 ;

규모 정의

경로 요소 추가

이제 Workerman, JavaScript, D3.js를 사용하여 실시간 데이터 시각화 시스템을 구현하기 위한 모든 코드가 완성되었습니다. 브라우저에서 HTML 파일을 열면 지속적으로 푸시되는 난수를 나타내는 지속적으로 업데이트되는 꺾은선형 차트를 볼 수 있습니다.

위 내용은 Workerman을 사용하여 실시간 데이터 시각화 시스템을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript composer html 并发 JS 事件 websocket Workerman

성명：

이전 기사：Workerman 개발: TCP 프로토콜 기반 원격 파일 관리 시스템 구현 방법다음 기사：Workerman 개발: TCP 프로토콜 기반 원격 파일 관리 시스템 구현 방법