flex 信道连接

package as3.tools
{
 import mx.messaging.ChannelSet;
 import mx.messaging.Consumer;
 import mx.messaging.channels.StreamingAMFChannel;
 import mx.messaging.events.MessageEvent;
 /**
  * 信道请求
  */
 public final class MessageRequest
 {
  /**
   * seed:信道标识
   * messageHandler:处理方法
   */
  public function MessageRequest(seed:String,messageHandler:Function)
  {
   var consumer:Consumer = new Consumer();
            consumer.destination = seed;
            consumer.subtopic = seed;
            var  myStreamingAMF:StreamingAMFChannel = new StreamingAMFChannel("my-streaming-amf", "/aqhb2/messagebroker/streamingamf");
            var channelSet:ChannelSet = new ChannelSet(); 
            channelSet.addChannel(myStreamingAMF); 
            consumer.addEventListener(MessageEvent.MESSAGE,messageHandler);
            consumer.subscribe();
  }
 }
}

function SystemStatus({}) { // 模拟初始系统状态数据 const initialStatusData = { uptime: "3天12小时45分钟", currentTime: new Date().toLocaleString(), cpuUsage: "24%", memoryUsage: "512MB / 1GB (51%)", temperature: "56°C", wanStatus: { ipv4: "192.168.1.1", ipv6: "2001:db8::1", connectionTime: "2天8小时30分钟", upload: "1.2 Mbps", download: "15.8 Mbps" }, lanStatus: { clients: 8, ipv4: "192.168.1.1/24", ipv6: "2001:db8::1/64" }, wifiStatus: { clients: 12, frequency: "2.4GHz & 5GHz", channel: "6 & 149" } }; const [status, setStatus] = useState(null); const [refreshTime, setRefreshTime] = useState(new Date()); // 模拟获取系统状态 const refresh = () => { return new Promise(resolve => { setTimeout(() => { setStatus({ ...initialStatusData, currentTime: new Date().toLocaleString() }); setRefreshTime(new Date()); resolve(); }, 300); }); }; useEffect(() => { refresh(); // 设置自动刷新 const interval = setInterval(refresh, 60000); return () => clearInterval(interval); }, []); if (!status) return html`<div class="flex justify-center items-center h-32">加载中...</div>`; return html` <div class="m-4 grid grid-cols-1 gap-4"> <div class="py-1 divide-y border rounded bg-white flex flex-col"> <div class="flex items-center justify-between px-4 py-2"> <div class="font-light uppercase text-gray-600">系统状态</div> <div class="text-xs text-gray-500"> 最后更新: ${refreshTime.toLocaleTimeString()} <button class="ml-2 text-blue-600 hover:text-blue-800" onClick=${refresh} > 刷新 </button> </div> <//> <div class="py-2 px-5 flex-1 flex flex-col"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <!-- 系统基本信息 --> <div class="border rounded p-3"> <h3 class="text-sm font-medium text-gray-700 mb-2">系统信息</h3> <div class="space-y-2"> <div class="flex justify-between"> <span class="text-sm text-gray-600">运行时间</span> <span class="text-sm font-medium">${status.uptime}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">当前时间</span> <span class="text-sm font-medium">${status.currentTime}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">CPU使用率</span> <span class="text-sm font-medium">${status.cpuUsage}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">内存使用</span> <span class="text-sm font-medium">${status.memoryUsage}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">设备温度</span> <span class="text-sm font-medium">${status.temperature}</span> </div> </div> <//> <!-- WAN状态 --> <div class="border rounded p-3"> <h3 class="text-sm font-medium text-gray-700 mb-2">WAN状态</h3> <div class="space-y-2"> <div class="flex justify-between"> <span class="text-sm text-gray-600">IPv4地址</span> <span class="text-sm font-medium">${status.wanStatus.ipv4}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">IPv6地址</span> <span class="text-sm font-medium font-mono">${status.wanStatus.ipv6}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">连接时间</span> <span class="text-sm font-medium">${status.wanStatus.connectionTime}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">上传速度</span> <span class="text-sm font-medium">${status.wanStatus.upload}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">下载速度</span> <span class="text-sm font-medium">${status.wanStatus.download}</span> </div> </div> <//> <!-- LAN状态 --> <div class="border rounded p-3"> <h3 class="text-sm font-medium text-gray-700 mb-2">LAN状态</h3> <div class="space-y-2"> <div class="flex justify-between"> <span class="text-sm text-gray-600">客户端数量</span> <span class="text-sm font-medium">${status.lanStatus.clients}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">IPv4网络</span> <span class="text-sm font-medium">${status.lanStatus.ipv4}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">IPv6网络</span> <span class="text-sm font-medium font-mono">${status.lanStatus.ipv6}</span> </div> </div> <//> <!-- WiFi状态 --> <div class="border rounded p-3"> <h3 class="text-sm font-medium text-gray-700 mb-2">WiFi状态</h3> <div class="space-y-2"> <div class="flex justify-between"> <span class="text-sm text-gray-600">客户端数量</span> <span class="text-sm font-medium">${status.wifiStatus.clients}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">频段</span> <span class="text-sm font-medium">${status.wifiStatus.frequency}</span> </div> <div class="flex justify-between"> <span class="text-sm text-gray-600">信道</span> <span class="text-sm font-medium">${status.wifiStatus.channel}</span> </div> </div> <//> <!-- 系统资源图表 --> <div class="border rounded p-3 md:col-span-2"> <h3 class="text-sm font-medium text-gray-700 mb-2">资源监控</h3> <div class="grid grid-cols-2 gap-4"> <div> <div class="flex justify-between mb-1"> <span class="text-xs text-gray-600">CPU使用率</span> <span class="text-xs font-medium">${status.cpuUsage}</span> </div> <div class="w-full bg-gray-200 rounded-full h-2"> <div class="bg-blue-600 h-2 rounded-full" style=${{ width: status.cpuUsage }} ></div> </div> </div> <div> <div class="flex justify-between mb-1"> <span class="text-xs text-gray-600">内存使用</span> <span class="text-xs font-medium">${status.memoryUsage.split('(')[1]}</span> </div> <div class="w-full bg-gray-200 rounded-full h-2"> <div class="bg-green-600 h-2 rounded-full" style=${{ width: status.memoryUsage.split('(')[1] }} ></div> </div> </div> </div> <div class="mt-4"> <div class="flex justify-between mb-1"> <span class="text-xs text-gray-600">网络流量</span> <span class="text-xs font-medium">↑${status.wanStatus.upload} ↓${status.wanStatus.download}</span> </div> <div class="flex space-x-2 h-20"> <div class="flex-1 flex flex-col justify-end"> <div class="bg-blue-400 rounded-t" style=${{ height: "30%" }}></div> <div class="bg-blue-300 rounded-t" style=${{ height: "50%" }}></div> <div class="bg-blue-200 rounded-t" style=${{ height: "70%" }}></div> <div class="text-center text-xs text-gray-500 mt-1">上传</div> </div> <div class="flex-1 flex flex-col justify-end"> <div class="bg-green-400 rounded-t" style=${{ height: "60%" }}></div> <div class="bg-green-300 rounded-t" style=${{ height: "80%" }}></div> <div class="bg-green-200 rounded-t" style=${{ height: "40%" }}></div> <div class="text-center text-xs text-gray-500 mt-1">下载</div> </div> </div> </div> <//> </div> <//> <//> <//>`; } 把这个SystemStatus函数的里面的功能改成路由器主页显示,是一个路由器会显示一个路由器图片,然后有上下行的速率,显示WAN口状态:IP地址,子网掩码DNS1 ,DNS2 ;系统状态: 型号 ,主机名,cpu, 内存占用,运行时间;连接状态:在线终端,网络连接
最新发布
07-20
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值