찾다

집  >  기사  >  PHP 프레임워크  >  Workerman 개발: HTTP 프로토콜 기반 실시간 데이터 시각화 시스템 구현 방법

Workerman 개발: HTTP 프로토콜 기반 실시간 데이터 시각화 시스템 구현 방법

PHPz
PHPz원래의
2023-11-07 08:01:001205검색

Workerman 개발: HTTP 프로토콜 기반 실시간 데이터 시각화 시스템 구현 방법

Workerman은 실시간 통신, 메시지 푸시, 데이터 시각화 등의 기능을 빠르게 구축할 수 있는 고성능 PHP 네트워크 통신 프레임워크입니다. 이 기사에서는 Workerman을 사용하여 HTTP 프로토콜 기반의 실시간 데이터 시각화 시스템을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 시스템 설계

이 시스템은 B/S 아키텍처를 채택합니다. 즉, 브라우저(Browser)와 서버(Server)는 HTTP 프로토콜을 통해 통신합니다.

1. 서버 측:

(1) Workerman 프레임워크를 사용하여 HTTP 서버를 설정하고 기본 포트(80)를 수신합니다.

(2) PHP 스크립트를 통해 실시간으로 데이터를 얻고 해당 데이터를 JSON 형식의 브라우저

(3) Websocket 프로토콜을 사용하여 서버와 클라이언트 간의 실시간 통신을 달성합니다. 이는 여러 클라이언트가 동시에 요청을 보내는 상황을 처리하는 데 사용됩니다.

2. 클라이언트:

(1) HTML, CSS 및 JavaScript를 사용하여 데이터 시각화 인터페이스 및 데이터 요청 인터페이스를 포함한 프런트 엔드 페이지를 구축합니다.

(2) 실제 구현을 위해 JavaScript를 통해 서버와 웹소켓 연결을 설정합니다. - 시간 데이터 푸시 및 시각화.

2. 구체적인 구현

1. 서버 측:

(1) Composer를 사용하여 Workerman 프레임워크 설치: 

composer require workerman/workerman

(2) index.php 파일 생성 및 HTTP 서버 구축: 

<?php
require_once __DIR__ . '/vendor/autoload.php';//引入Workerman框架
use WorkermanProtocolsHttpRequest;
use WorkermanProtocolsHttpResponse;
use WorkermanWorker;

$http_worker = new Worker("http://0.0.0.0:80");//监听默认端口80

$http_worker->onMessage = function (Request $request) {
    $path = $request->path();//获取请求路径
    if ($path == '/') {//处理请求，返回HTML页面
        $response_str = file_get_contents(__DIR__ . '/index.html');
        $response = new Response(200, [], $response_str);
        $request->send($response);
    } elseif ($path == '/data') {//处理请求，返回JSON数据
        $data = getData();//获取实时数据
        $response = new Response(200, [], json_encode($data));//将数据转化为JSON格式
        $request->send($response);
    }
};

$http_worker->onWorkerStart = function () {
    global $ws_worker;
    $ws_worker = new Worker("websocket://0.0.0.0:8080");//监听WebSocket端口8080

    $ws_worker->count = 1;//设置Worker进程数

    $ws_worker->onMessage = function ($connection, $data) {
        $message = json_decode($data, true);//接收来自客户端的消息，并解析JSON格式数据
        switch ($message['type']) {
            case 'subscribe':
                //TODO 处理订阅请求，并发送数据
                break;
            case 'unsubscribe':
                //TODO 处理取消订阅请求
                break;
            default:
                break;
        }
    };

    Worker::runAll();//运行HTTP服务器和WebSocket服务器
};

//TODO 获取实时数据
function getData()
{
    return [];
}

(3) WebSocket 프로토콜 구현:

Http 서버가 시작된 후에는 새 WebSocket 서버를 생성하고 클라이언트와 서버 간의 실시간 통신을 위해 지정된 포트를 수신해야 합니다. onMessage 콜백에서는 다양한 메시지 유형에 따라 다양한 요청이 처리되고 실시간 데이터가 구독 클라이언트로 전달됩니다. 

$ws_worker = new Worker("websocket://0.0.0.0:8080");//监听WebSocket端口8080

$ws_worker->count = 1;//设置Worker进程数

$ws_worker->onMessage = function ($connection, $data) {
    $message = json_decode($data, true);//接收来自客户端的消息，并解析JSON格式数据
    switch ($message['type']) {
        case 'subscribe':
            //TODO 处理订阅请求，并发送数据
            break;
        case 'unsubscribe':
            //TODO 处理取消订阅请求
            break;
        default:
            break;
    }
};

2. 클라이언트:

(1) HTML 페이지:

HTML 페이지에서 연결을 설정하고 데이터를 구독하려면 WebSocket을 사용해야 합니다. 새 데이터가 도착하면 해당 시각화 차트를 업데이트해야 합니다. 여기서는 ECharts를 예로 들어 JavaScript를 사용하여 데이터 시각화를 달성하는 방법을 보여줍니다. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实时数据可视化</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height:400px;"></div>
<script>
    const socket = new WebSocket('ws://localhost:8080');//建立WebSocket连接

    //订阅请求
    socket.onopen = () => {
        socket.send(JSON.stringify({type: 'subscribe', data: {}}));
    };

    //接收来自服务器的消息
    socket.onmessage = (event) => {
        const message = JSON.parse(event.data);
        if (message.type === 'data') {//更新图表
            const chart = echarts.init(document.getElementById('chart'));
            const option = {
                xAxis: {
                    type: 'category',
                    data: message.data.xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: message.data.seriesData,
                    type: 'line'
                }]
            };
            chart.setOption(option);
        }
    };

    //取消订阅请求
    window.onbeforeunload = () => {
        socket.send(JSON.stringify({type: 'unsubscribe', data: {}}));
    };
</script>
</body>
</html>

(2) JavaScript 코드:

JavaScript 코드에서는 WebSocket의 연결 및 메시지 이벤트를 모니터링하고 실시간 데이터 구독, 시각적 차트 업데이트 등 메시지 유형에 따라 다른 처리를 수행해야 합니다. , 등. 

const socket = new WebSocket('ws://localhost:8080');//建立WebSocket连接

//订阅请求
socket.onopen = () => {
    socket.send(JSON.stringify({type: 'subscribe', data: {}}));
};

//接收来自服务器的消息
socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    if (message.type === 'data') {//更新图表
        const chart = echarts.init(document.getElementById('chart'));
        const option = {
            xAxis: {
                type: 'category',
                data: message.data.xAxisData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: message.data.seriesData,
                type: 'line'
            }]
        };
        chart.setOption(option);
    }
};

//取消订阅请求
window.onbeforeunload = () => {
    socket.send(JSON.stringify({type: 'unsubscribe', data: {}}));
};

3. 요약

이 글에서는 Workerman 프레임워크를 사용하여 HTTP 프로토콜 기반의 실시간 데이터 시각화 시스템을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. WebSocket을 통한 클라이언트와 서버 간의 실시간 통신은 시스템의 응답 속도와 동시 처리 기능을 향상시킬 수 있으며 이는 확실한 장점이 있습니다.

위 내용은 Workerman 개발: HTTP 프로토콜 기반 실시간 데이터 시각화 시스템 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript composer 架构 json css echarts html 并发 事件 http websocket Workerman
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Workerman을 통한 실시간 메시지 푸시 및 채팅 기록 저장 구현 방법다음 기사：Workerman을 통한 실시간 메시지 푸시 및 채팅 기록 저장 구현 방법

관련 기사

더보기