php 数据类型-使用 PHP 开发实时数据可视化功能实时数据可视化

bendan520 2023年8月21日 php 0

功能是指服务器在Web应用程序开发中发送的实时数据php 数据类型，经过处理后，通过可视化方法向用户显示数据。这些实时数据可视化功能可以应用于各种场合，如智能家居装修、物联网、金融交易等。实时数据可视化的实现取决于开发语言和后端框架。在本文中，我们将向您展示如何使用 PHP 和后端框架来可视化实时数据。

1. 实施理念

要实现实时数据可视化，需要完成几个步骤：

1.服务器向客户发送实时数据。

2. 客户端接收服务器发送的实时数据。

3.客户端处理收到的实时数据，并将数据转换为可视化图表。

4. 客户端将向用户显示已处理的图表。

在本文中，我们将使用 PHP 和后端框架 Highcharts 来实现实时数据可视化功能。PHP将用作服务器端语言，向客户端发送实时数据;Highcharts将作为一个后端框架，用于处理接收到的实时数据，并以可视化方式向用户呈现数据。

2. 环境建设

在开始实现实时数据可视化之前，我们需要规划开发环境。具体步骤如下：

1. 安装 PHP 和 Apache 服务器。

2. 安装 Composer 依赖项管理工具。

3.使用 Composer 安装 Ratchet 框架和 ReactPHP 库。

4.In Web应用程序根目录，创建一个名为“phpwebsocket”的文件夹来存储Ratchet框架的源代码。

3. 服务器端代码

在服务器端，我们将使用 Ratchet 框架来实现 WebSocket 合约，以便向客户端发送实时数据。具体代码如下：

require __DIR__ . '/phpwebsocket/vendor/autoload.php';

use RatchetServerIoServer;use RatchetHttpHttpServer;use RatchetWebSocketWsServer;

$server = IoServer::factory(    new HttpServer(        new WsServer(            new class() implements RatchetMessageComponentInterface            {                private $clients;

                public function __construct()                {                    $this->clients = new SplObjectStorage;                }

                public function onOpen(RatchetConnectionInterface $conn)                {                    $this->clients->attach($conn);                    echo "New connection! ({$conn->resourceId})n";                }

                public function onMessage(RatchetConnectionInterface $from, $msg)                {                    echo "Message received from {$from->resourceId}: $msgn";                    foreach ($this->clients as $client) {                        if ($client !== $from) {                            $client->send($msg);                        }                    }                }

                public function onClose(RatchetConnectionInterface $conn)                {                    $this->clients->detach($conn);                    echo "Connection {$conn->resourceId} has disconnectedn";                }

                public function onError(RatchetConnectionInterface $conn, Exception $e)                {                    echo "An error has occurred: {$e->getMessage()}n";                    $conn->close();                }            }        )    ),    8080);

$server->run();

上面的代码实现了以下功能：

1. 创建一个 WebSocket 服务器，绑定到 8080 端口。

2. 在服务器端，实现了四个风暴错误：

-'onOpen'：当客户端加入时，将加入对象存储在“SplObjectStorage”对象中并输出连接信息。

- 'onMessage'：当客户端发送消息时，它会循环访问所有已加入的对象并将消息广播到所有客户端。

-'onClose'：当客户端断开链接时，连接对象将从“SplObjectStorage”对象中删除，并输出断开连接的信息。

-'onError'：当服务器上发生错误时关闭连接。

4. 客户代码

在客户方面，我们将使用Highcharts框架来处理收到的实时数据，并以可视化的方式将数据呈现给用户。客户端代码分为两部分：HTML 页面和 JavaScript 代码。

4.1 网页

在 HTML 页面中，我们需要介绍 Highcharts 框架、jQuery 库和 WebSocket 合约所需的配置信息。页面代码如下所示：

<html lang="en"><head>    <meta charset="UTF-8">    <title>Real-time Chart</title>    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>    <script src="https://code.highcharts.com/highcharts.js"></script></head><body>    <div id="container"></div>    <script>        var chart = Highcharts.chart('container', {            chart: {                type: 'spline',                animation: Highcharts.svg,                marginRight: 10,                events: {                    load: function () {                        var series = this.series[0];                        var socket = new WebSocket('ws://localhost:8080');

                        socket.onmessage = function(event) {                            var data = JSON.parse(event.data);                            var x = (new Date()).getTime(); // 当前时间                            var y = data.value; // 数据值                            series.addPoint([x, y], true, true);                        };

                        socket.onerror = function(error) {                            console.log('WebSocket error');                        };                    }                }            },

            time: {                useUTC: false            },

            title: {                text: 'Real-time Chart'            },

            xAxis: {                type: 'datetime',                tickPixelInterval: 150            },

            yAxis: {                title: {                    text: 'Value'                },                plotLines: [{                    value: 0,                    width: 1,                    color: '#808080'                }]            },

            tooltip: {                formatter: function () {                    return '' + this.series.name + '
' +                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' +                        Highcharts.numberFormat(this.y, 2);                }            },

            legend: {                enabled: false            },

            exporting: {                enabled: false            },

            series: [{                name: 'Value',                data: []            }]        });</script></body></html>

以上代码主要完成以下功能：

1.介绍Highcharts框架和jQuery库。

2. 在页面中创建“”

元素，用于显示实时图表。

3. 在 JavaScript 代码中，创建一个高图表并将图表类型指定为“样条”。

4. 在图表中创建时间序列，并以实时更新的形式呈现数据。

5.In JavaScript 代码中，创建一个 WebSocket 对象并指定服务器地址和侧标记。收到服务器发送的消息后，将数据添加到时间序列并更新图表。

4.2 JavaScript代码

在 JavaScript 代码中，我们将定义一个用于向服务器发送实时数据的 WebSocket 对象。代码如下所示：

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

socket.onopen = function(event) {    console.log('WebSocket open');};

socket.onerror = function(error) {    console.log('WebSocket error');};

setInterval(function() {    var value = Math.random();    socket.send(JSON.stringify({value: value}));}, 1000);

上面的代码实现了以下功能：

1. 创建 WebSocket 对象并指定服务器地址和侧横幅。

2. 如果WebSocket连接成功，请在控制台中打印连接信息。

3. 当 WebSocket 连接失败时，在控制台中输出错误消息。

4. 使用“设置间隔”功能定期生成随机数，并通过 WebSocket 将数据发送到服务器。

结论

至此php 数据类型，我们已经完成了实时数据可视化的开发。使用PHP和Highcharts框架，我们实现了基于WebSocket合约的实时数据传输和呈现系统。事实上，我们所展示的内容需要在实际生产应用中进一步建立，例如添加权限验证和数据标准化等功能。有兴趣的读者可以尝试进一步优化系统，以适应更真实的生产场景。

什么是查询列表

？

QueryList 是一组用于内容摄取的 PHP 工具，它使用越来越现代的开发思想，语法简单、优雅且可扩展。相比传统使用冗长的正则表达式做集合php 采集，QueryList 使用更强大、更崇高的 CSS 选择器来做集合，大大增加了 PHP 集合的门槛，也让集合代码易于阅读和维护，让你告别深奥且难以维护的正则表达式。

查询列表提供一套完整的内容摄取解决方案

前提

该项目主要使用 thinkphp5 框架，主要使用两个文件“QueryList.php”和“phpQuery.php”。我们可以切换到项目目录，在extend中创建一个新的QL，然后在QL目录中执行composer命令来安装QueryList：

composer require jaeger/querylist

然后将使用 QL查询列表添加到要使用的控制器;下一步是在控制器中编写代码，下面是一个示例

//需要采集的目标页面
$page = 'http://cms.querylist.cc/news/566.html';
//采集规则
$reg = array(
   //采集文章标题
   'title' => array('h1','text'),
   //采集文章发布日期,这里用到了QueryList的过滤功能，过滤掉span标签和a标签
   'date' => array('.pt_info','text','-span -a',function($content){
       //用回调函数进一步过滤出日期
       $arr = explode(' ',$content);
       return $arr[0];
   }),
   //采集文章正文内容,利用过滤功能去掉文章中的超链接，但保留超链接的文字，并去掉版权、JS代码等无用信息
   'content' => array('.post_content','html','a -.content_copyright -script',function($content){
       //利用回调函数下载文章中的图片并替换图片路径为本地路径
       //使用本例请确保当前目录下有image文件夹，并有写入权限
       //由于QueryList是基于phpQuery的，所以可以随时随地使用phpQuery，当然在这里也可以使用正则或者其它方式达到同样的目的

       $doc=phpQuery::newDocumentHTML($content);
       $imgs = pq($doc)->find('img');
       foreach ($imgs as $img) {
           $src = 'http://cms.querylist.cc'.pq($img)->attr('src');
           $localSrc = md5($src).'.jpg';
           $stream = file_get_contents($src);
           file_put_contents($localSrc,$stream);
           pq($img)->attr('src',$localSrc);
       }
       return $doc->htmlOuter();
   })
);
$rang = '.content';
$ql = QueryList::Query($page,$reg,$rang);
$data = $ql->getData();
//打印结果
print_r($data);

注意：在使用phpQuery类时需要在前面加上，因为phpQuery.php中没有使用命名空间，因为使用命名空间后，QueryList.php无法使用phpQuery类。

以上是一个简单的例子php 采集，网页数据的采集已经实现，更详细的句子和例子可以移到官网文档，仔细查看

QueryList参考文档：https://doc.querylist.cc/

来源：https://www.cnblogs.com/jcydd/p/7299672.html

php 数据类型-使用 PHP 开发实时数据可视化功能实时数据可视化

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复