81 lines
3.8 KiB
HTML
81 lines
3.8 KiB
HTML
|
|
<div class="layui-container">
|
|
<div class="admin-title">MQTT 实时运行监控
|
|
<span class="layui-badge layui-bg-blue" id="live" style="margin-left:10px;">实时</span>
|
|
<span style="float:right;color:#999;font-size:12px;">最后刷新：<span id="lastSync">--</span></span>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card"><div class="layui-card-header">在线连接</div>
|
|
<div class="layui-card-body" style="font-size:30px;font-weight:bold;color:#1E9FFF;" id="m_online">0</div></div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card"><div class="layui-card-header">会话总数</div>
|
|
<div class="layui-card-body" style="font-size:30px;font-weight:bold;" id="m_total">0</div></div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card"><div class="layui-card-header">订阅关系</div>
|
|
<div class="layui-card-body" style="font-size:30px;font-weight:bold;color:#16a34a;" id="m_subs">0</div></div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card"><div class="layui-card-header">运行时长</div>
|
|
<div class="layui-card-body" style="font-size:30px;font-weight:bold;" id="m_uptime">00:00:00</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card"><div class="layui-card-header">累计接收</div>
|
|
<div class="layui-card-body" style="font-size:26px;font-weight:bold;" id="m_recv">0</div></div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card"><div class="layui-card-header">累计发送</div>
|
|
<div class="layui-card-body" style="font-size:26px;font-weight:bold;" id="m_sent">0</div></div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card"><div class="layui-card-header">保留消息</div>
|
|
<div class="layui-card-body" style="font-size:26px;font-weight:bold;" id="m_retained">0</div></div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card"><div class="layui-card-header">快照时间</div>
|
|
<div class="layui-card-body" style="font-size:18px;" id="m_ts">--</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-text" style="margin-top:10px;color:#999;">
|
|
指标由 Broker 进程每 2 秒写入数据库，本页每 3 秒轮询刷新（跨进程安全，Windows 调试与 Linux 生产通用）。
|
|
若长时间显示 0，请确认 Broker 已启动：<code>php think mqttbroker:start</code>。
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['jquery'], function(){
|
|
var $ = layui.jquery;
|
|
function fmtUptime(s){
|
|
s = parseInt(s||0);
|
|
var h = Math.floor(s/3600), m = Math.floor((s%3600)/60), ss = s%60;
|
|
var p = function(n){ return (n<10?'0':'')+n; };
|
|
return p(h)+':'+p(m)+':'+p(ss);
|
|
}
|
|
function load(){
|
|
$.getJSON('/mqttbroker/backend/stats', function(res){
|
|
if (res.code !== 0 || !res.data) return;
|
|
var d = res.data;
|
|
$('#m_online').text(d.db_online != null ? d.db_online : d.clients_online);
|
|
$('#m_total').text(d.clients_total);
|
|
$('#m_subs').text(d.subscriptions);
|
|
$('#m_uptime').text(fmtUptime(d.uptime));
|
|
$('#m_recv').text(d.messages_received);
|
|
$('#m_sent').text(d.messages_sent);
|
|
$('#m_retained').text(d.retained);
|
|
$('#m_ts').text(new Date((d.timestamp||0)*1000).toLocaleString());
|
|
$('#lastSync').text(new Date().toLocaleTimeString());
|
|
$('#live').text('实时●');
|
|
}).fail(function(){ $('#live').text('断开'); });
|
|
}
|
|
load();
|
|
setInterval(load, 3000);
|
|
});
|
|
</script>
|