折腾笔记：用 Scriptable 把服务器监控装进 iOS 桌面

对于手里捏着好几台 VPS 的朋友来说，每天习惯性地打开面板查看在线率、负载和流量占用，几乎是刻进 DNA 的本能操作。虽然市面上有很多成熟的监控 App，但要么功能过于繁重，要么界面不够极客。

最近在折腾 iOS 自动化工具 Scriptable 时，发现可以配合 CDT-Monitor 的接口，在手机主屏打造一个轻量级、实时更新的服务器监控小组件。不仅颜值能打，实用性也拉满。今天就和大家分享一下具体的实现思路和代码逻辑。

为什么选择 Scriptable + CDT-Monitor？

Scriptable 是 iOS 上极其强大的 JavaScript 自动化工具，它允许我们通过编写 JS 代码来绘制界面，并将其挂载到 iOS 的桌面组件中。而 CDT-Monitor 则是一款轻量、高性能的服务器探针，因其数据返回结构清晰、API 开放友好，成为了很多个人站长的首选。

两者的结合点在于：CDT-Monitor 负责在服务器端采集数据，Scriptable 负责在移动端发起请求、解析数据并绘制 UI。整个过程无需第三发 App 中转，数据直达，隐私安全有保障，而且自由度极高，想显示什么数据完全由代码决定。

准备工作：不仅仅是安装软件

在开始敲代码之前，我们需要做好以下准备：

1. 服务器端：确保你的 VPS 已经安装并配置好了 CDT-Monitor。目前 CDT-Monitor 支持 HTTP API 调用，我们需要记下访问的 API 地址以及用于鉴权的 Token（如果有的话）。
2. iOS 端：在 App Store 下载并安装 Scriptable。初学者建议先运行一下官方提供的 Demo，熟悉一下 API 和基础语法。
3. 接口测试：不要一上来就写脚本，先用 Postman 或者浏览器直接访问你的 CDT-Monitor API 地址，确认返回的数据格式是 JSON，并且包含了你想要展示的字段（比如：系统名称、CPU 使用率、内存占用、网络上下行速度等）。

核心代码逻辑解析

Scriptable 的脚本主要分为三个模块：网络请求、数据解析和界面绘制。

1. 发起网络请求

Scriptable 内置了 Request 对象，我们可以用它来 GET CDT-Monitor 的数据。

// 获取监控数据的地址
const apiUrl = "https://your-monitor-domain.com/api/v1/server/status?token=YOUR_TOKEN";

const req = new Request(apiUrl);
const data = await req.loadJSON();

这里需要注意的是，由于 Scriptable 的网络请求是异步的，所以我们在调用时通常会使用 async/await 语法，确保拿到数据后再进行后续操作。如果你的服务器启用了自签名证书（SSL），可能会遇到报错，建议在测试阶段先使用 HTTP 或者信任该证书，或者在代码中忽略 SSL 错误（不推荐生产环境使用）。

2. 数据清洗与处理

拿到 JSON 数据后，不要急着画图。通常原始数据包含了很多我们不需要的信息，或者单位格式不符合阅读习惯（比如内存显示的是字节，而不是 GB）。我们需要对数据进行简单的清洗。

// 示例：提取并转换数据
const serverName = data.name || "Unknown Server";
const cpuUsage = Math.round(data.cpu * 100) + "%";
const ramUsage = (data.memory.total / 1024 / 1024 / 1024).toFixed(2) + "GB";
const upSpeed = (data.network.up / 1024 / 1024).toFixed(2) + "MB/s";

处理数据的技巧在于容错。比如如果某个接口暂时没有返回网络速度，代码要有默认值（如 "0 MB/s"），否则会导致组件崩溃。

3. 绘制小组件 UI

Scriptable 提供了类似于 SwiftUI 的堆叠布局，我们可以用 ListWidget、Text、Stack 来组合界面。

// 创建小组件实例
let widget = new ListWidget();

// 设置背景色（可选，推荐深色模式）
widget.backgroundColor = new Color("#1c1c1e");

// 添加标题
const title = widget.addText("🚀 " + serverName);
title.font = Font.boldSystemFont(16);
title.textColor = Color.white();
widget.addSpacer(10);

// 添加 CPU 信息
const cpuText = widget.addText("CPU: " + cpuUsage);
cpuText.font = Font.systemFont(12);
cpuText.textColor = Color.orange();

// 添加内存信息
const ramText = widget.addText("RAM: " + ramUsage);
ramText.font = Font.systemFont(12);
ramText.textColor = Color.blue();

// 预览效果（在 App 内运行时）
if (!config.runsInWidget) {
  await widget.presentSmall();
}

// 返回组件
Script.setWidget(widget);
Script.complete();

在实际使用中，我们可以根据小组件的大小设置不同的布局逻辑。小尺寸组件适合只显示核心信息，比如负载和在线状态；中大尺寸组件则可以展示网络流量图表或磁盘使用率。

进阶玩法与踩坑指南

1. 配色与视觉优化

不要直接使用默认的黑白字体。建议给不同的状态设置醒目的颜色。例如：

• 在线：绿色
• 高负载：红色
• 警告：黄色

通过 new Color("hex") 可以自定义十六进制颜色，打造出契合你手机壁纸的主题色。

2. 定时刷新问题

iOS 系统为了省电，对小组件的刷新频率有一定限制。虽然我们在代码里写了网络请求，但系统通常只会每隔 15-30 分钟调用一次脚本。如果你想看秒级数据，建议点击小组件直接跳转到监控面板，而不要强行拉取实时数据，这会导致手机更耗电。

3. 多服务器轮询

如果你有多台服务器，可以写一个简单的轮询逻辑，或者随机显示某一台的状态，甚至可以将监控地址配置在 iCloud 里，这样不需要修改代码就能动态添加或删除服务器。

总结

相比于下载一个臃肿的管理 App，用 Scriptable 自己撸一个小组件不仅极客感十足，更重要的是它掌握在自己手里。配合 CDT-Monitor 这样优秀的开源工具，我们完全可以搭建一套成本为零、颜值在线的个人服务器监控体系。

如果你在配置过程中遇到了接口超时或者解析错误，不妨先检查一下 API 的鉴权 Token 是否正确，或者直接在 Scriptable 的控制台打印返回的原始 JSON 数据进行调试。