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

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

WBOY

풀어 주다： 2023-11-07 08:48:14

원래의

742명이 탐색했습니다.

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

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();

로그인 후 복사

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

php server.php start

로그인 후 복사

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

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

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

로그인 후 복사

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

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

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>

로그인 후 복사