Cloudflare Workers + iOS 快捷指令:打造个人博客实时状态
这篇文章将教你利用 Cloudflare Workers 结合 iOS 快捷指令更新实时状态并在网站上显示,同时集成一个简易的访客统计量。
文中用到的实例基于生产环境代码,截至 2026年01月16日 正常使用。
一、前言与准备
核心思路:利用 Cloudflare Workers 作为后端,KV 储存数据。iOS 快捷指令通过带有密钥的特定 URL 触发更新,前端通过公开接口读取展示。
域名要求:必须绑定到 Cloudflare。
功能路径:
| 路由 | 获取方式 | 说明 |
|---|---|---|
/api/status | GET | 获取当前状态,返回 JSON 数据,浏览量 +1 |
/api/status/{密钥}/{状态文本} | GET | 使用密钥更新状态文本 |
二、后端部署:Cloudflare Workers 和配置
(1) 创建 KV 储存
-
登录 Cloudflare 控制台,前往“存储和数据库 > Workers KV”。
-
点击“创建命名空间”。
-
命名空间名称填写:
BLOG_STATUS_KV。
(2) 创建 Workers 程序
-
前往“计算和 AI > Workers 和 Pages”,点击“创建应用程序”。
-
随便起个名字(如
blog-status),点击部署。 -
进入该 Worker 的详情页,点击右上角“编辑代码”,清空原有内容,复制粘贴以下代码:
export default {
async fetch(request, env) {
const url = new URL(request.url);
const pathname = url.pathname;
// KV 键名常量
const STORAGE_KEY = 'status';
// 辅助函数:统一返回 JSON
const jsonResponse = (data, status = 200) => {
return new Response(JSON.stringify(data), {
status,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*', // 允许跨域
'Cache-Control': 'no-store' // 确保获取最新数据
}
});
};
try {
// ===== 接口 1: 获取状态 (同时浏览量 views + 1) =====
if (pathname === '/api/status' && request.method === 'GET') {
let data = await env.BLOG_STATUS_KV.get(STORAGE_KEY, { type: 'json' });
if (!data) {
data = {
status: "👋 Hello",
views: 0,
uppubDatedAt: new pubDate().toISOString()
};
}
// 浏览量自增
data.views = (data.views || 0) + 1;
await env.BLOG_STATUS_KV.put(STORAGE_KEY, JSON.stringify(data));
return jsonResponse(data);
}
// ===== 接口 2: 更新状态 (/api/status/{key}/{status}) =====
if (pathname.startsWith('/api/status/') && request.method === 'GET') {
const parts = pathname.split('/');
if (parts.length < 5) {
return jsonResponse({ code: 400, message: 'Missing parameters' }, 400);
}
const inputKey = parts[3];
const newStatusText = decodeURIComponent(parts[4]); // 解码 URL 编码的中文
// 鉴权
if (inputKey !== env.SECRET_KEY) {
return jsonResponse({ code: 401, message: 'Unauthorized' }, 401);
}
let data = await env.BLOG_STATUS_KV.get(STORAGE_KEY, { type: 'json' }) || { views: 0 };
data.status = newStatusText;
data.uppubDatedAt = new pubDate().toISOString();
await env.BLOG_STATUS_KV.put(STORAGE_KEY, JSON.stringify(data));
return jsonResponse(data);
}
return jsonResponse({ code: 404, message: 'Not Found' }, 404);
} catch (error) {
return jsonResponse({ code: 500, message: 'Error', error: error.message }, 500);
}
}
};worker.js(3) 设置密钥与绑定路由
代码保存后,回到 Worker 详情页:
-
添加密钥: 在“设置 > 变量和机密”中添加名为
SECRET_KEY的变量,值填入一段随机字符串(这是你的更新密钥,不要泄露),密钥和文本类型无区别。 -
绑定路由: 在“设置 > 域和路由”中添加自定义域或路由,比如“jb18.cm/api/*”。
(4) 绑定 KV 命名空间
在 Worker 详情页,点击上面菜单的绑定,点击添加绑定,在右边选择 KV 命名空间,点击添加绑定,在“KV 命名空间绑定”区域,变量名称为 BLOG_STATUS_KV(需与代码中的 env.BLOG_STATUS_KV 保持一致),然后选择你刚刚创建的命名空间。
(5) 设置速率限制器规则
在域名管理页面,在“安全性 > 安全规则”点击右上角创建规则(自定义规则)。
-
匹配: 路径等于 /api/*。
-
阈值: 10 秒内请求超过 1 次(根据需求调整)。
-
动作: 拦截。
好了,你现在可以在浏览器试试获取和更新数据。
三、前端:获取并展示数据
使用 sessionStorage 确保单次会话只请求一次接口,避免恶意刷新导致浏览量激增。
接口被刷不要紧,有速率限制器和 Cloudflare CDN 防护。
async function fetchStatus() {
const cacheKey = 'status_data';
const cachedData = sessionStorage.getItem(cacheKey);
if (cachedData) {
renderStatus(JSON.parse(cachedData));
} else {
try {
const response = await fetch('/api/status');
const data = await response.json();
sessionStorage.setItem(cacheKey, JSON.stringify(data));
renderStatus(data);
} catch (error) {
console.error('获取状态失败:', error);
}
}
function renderStatus(data) {
if (!data) return;
// 在这里编写你的 DOM 处理逻辑
// 例如:document.getElementById('status-box').innerText = data.status;
console.log('当前实时状态:', data);
}
}src/pages/index.js四、iOS 快捷指令:实时更新
最后两个指令是“URL”和“获取URL内容”。
- URL: 输入“https://{domain}/api/status/{key}/{status}”
- 获取 URL 内容: 方法选 GET
进阶玩法: 你可以在顶部添加 “获取我的快捷指令”,选择 “输入快捷指令的信息”,再将信息添加到变量,那么你就可以在自动化中调用这个统一接口,比如当手机连接到公司 Wi-Fi 时调用这个指令,自动触发接口将状态改为“💼 办公中”。

注意: 请务必确认你的 SECRET_KEY 已经通过 Cloudflare 后台设置并部署,否则更新接口将无法通过验证。
修改记录
2026-01-211
Footnotes
-
调整文章格式,删除和添加空格 ↩