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를 사용하여 시각적 차트 그리기
- 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
Python可视化 | Python可视化进阶必备 - plotlyMay 03, 2023 pm 02:07 PM一、简介Plotly是一个非常著名且强大的开源数据可视化框架，它通过构建基于浏览器显示的web形式的可交互图表来展示信息，可创建多达数十种精美的图表和地图。二、绘图语法规则2.1离线绘图方式Plotly中绘制图像有在线和离线两种方式，因为在线绘图需要注册账号获取APIkey，较为麻烦，所以本文仅介绍离线绘图的方式。离线绘图又有plotly.offline.plot()和plotly.offline.iplot()两种方法，前者是以离线的方式在当前工作目录下生成html格式的图像文件，并自动打开；
如何使用Python代码创建复杂的财务图表？Apr 24, 2023 pm 06:28 PM介绍编程和技术应用于金融领域的激增是不可避免的，增长似乎从未下降。应用编程的最有趣的部分之一是历史或实时股票数据的解释和可视化。现在，为了在python中可视化一般数据，matplotlib、seaborn等模块开始发挥作用，但是，当谈到可视化财务数据时，Plotly将成为首选，因为它提供了具有交互式视觉效果的内置函数。在这里我想介绍一个无名英雄，它只不过是mplfinance库matplotlib的兄弟库。我们都知道matplotlib包的多功能性，并且可以方便地绘制任何类型的数据。
使用PHP和ECharts创建可视化图表和报表May 10, 2023 pm 10:21 PM随着大数据时代的来临，数据可视化成为企业决策的重要工具。千奇百怪的数据可视化工具层出不穷，其中ECharts以其强大的功能和良好的用户体验受到了广泛的关注和应用。而PHP作为一种主流的服务器端语言，也提供了丰富的数据处理和图表展示功能。本文将介绍如何使用PHP和ECharts创建可视化图表和报表。ECharts简介ECharts是一个开源的可视化图表库，它由
使用PHP和SQLite实现数据图表和可视化Jul 28, 2023 pm 01:01 PM使用PHP和SQLite实现数据图表和可视化概述：随着大数据时代的到来，数据图表和可视化成为了展示和分析数据的重要方式。在本文中，将介绍如何使用PHP和SQLite实现数据图表和可视化的功能。以一个实例为例，展示如何从SQLite数据库中读取数据，并使用常见的数据图表库来展示数据。准备工作：首先，需要确保已经安装了PHP和SQLite数据库。如果没有安装，可
如何利用Vue和Excel快速生成可视化的数据报告Jul 21, 2023 pm 04:51 PM如何利用Vue和Excel快速生成可视化的数据报告随着大数据时代的到来，数据报告成为了企业决策中不可或缺的一部分。然而，传统的数据报告制作方式繁琐而低效，因此，我们需要一种更加便捷的方法来生成可视化的数据报告。本文将介绍如何利用Vue框架和Excel表格来快速生成可视化的数据报告，并附上相应的代码示例。首先，我们需要创建一个基于Vue的项目。可以使用Vue
可视化 | 再分享一套Flask+Pyecharts可视化模板二Aug 09, 2023 pm 04:05 PM本期再给大家分享一套适合初学者的<Flask+Pyecharts可视化模板二>，希望对你有所帮助
使用Flask和D3.js构建交互式数据可视化Web应用程序Jun 17, 2023 pm 09:00 PM近年来，数据分析和数据可视化已经成为了许多行业和领域中不可或缺的技能。对于数据分析师和研究人员来说，将大量的数据呈现在用户面前并且让用户能够通过可视化手段来了解数据的含义和特征，是非常重要的。为了满足这种需求，在Web应用程序中使用D3.js来构建交互式数据可视化已经成为了一种趋势。在本文中，我们将介绍如何使用Flask和D3.js构建交互式数据可视化Web
用 Python 制作可视化 GUI 界面，一键实现证件照背景颜色的替换May 19, 2023 pm 04:19 PM关于界面的大致模样其实和先前的相差不大，大家应该都看过上一篇的内容。界面大体的样子整体GUI的界面如下图所示：用户在使用的时候可以选择将证件照片替换成是“白底背景”或者是“红底背景”，那么在前端的界面上传完成照片之后，后端的程序便会开始执行该有的操作。去除掉背景颜色首先我们需要将照片的背景颜色给去除掉，这里用到的是第三方的接口removebg，官方链接是：我们在完成账号的注册之后，访问下面的链接获取api_key：https://www.remove.bg/api#remove-backgrou
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
