这篇文章将教你利用 Cloudflare Workers 结合 iOS 快捷指令更新实时状态并在网站上显示，同时集成一个简易的访客统计量。

文中用到的实例基于生产环境代码，截至 2026年01月16日 正常使用。



## 一、前言与准备

**核心思路**：利用 Cloudflare Workers 作为后端，KV 储存数据。iOS 快捷指令通过带有密钥的特定 URL 触发更新，前端通过公开接口读取展示。

**域名要求**：必须绑定到 Cloudflare。

**功能路径**：
| 路由 | 获取方式 | 说明 |
|------|----------|------|
| `/api/status` | GET | 获取当前状态，返回 JSON 数据，浏览量 +1 |
| `/api/status/{密钥}/{状态文本}` | GET | 使用密钥更新状态文本 |



## 二、后端部署：Cloudflare Workers 和配置

### (1) 创建 KV 储存

1. 登录 Cloudflare 控制台，前往“存储和数据库 > Workers KV”。

2. 点击“创建命名空间”。

3. 命名空间名称填写：`BLOG_STATUS_KV`。

### (2) 创建 Workers 程序

1. 前往“计算和 AI > Workers 和 Pages”，点击“创建应用程序”。

2. 随便起个名字（如 `blog-status`），点击部署。

3. 进入该 Worker 的详情页，点击右上角“编辑代码”，清空原有内容，复制粘贴以下代码：

```js file=worker.js
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);
        }
    }
};
```

### (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 防护。

```js file=src/pages/index.js
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);
    }
}
```



## 四、iOS 快捷指令：实时更新

最后两个指令是“URL”和“获取URL内容”。

1. **URL：** 输入“https://{domain}/api/status/{key}/{status}”
2. **获取 URL 内容：** 方法选 GET

**进阶玩法：** 你可以在顶部添加 “获取我的快捷指令”，选择 “输入快捷指令的信息”，再将信息添加到变量，那么你就可以在自动化中调用这个统一接口，比如当手机连接到公司 Wi-Fi 时调用这个指令，自动触发接口将状态改为“💼 办公中”。

![快捷指令设置截图](https://res.jb18.cm/img/2026/01/16/745b766ad51b9220bed52d8db49dd2a3.webp)

**注意：** 请务必确认你的 SECRET_KEY 已经通过 Cloudflare 后台设置并部署，否则更新接口将无法通过验证。

---

修改记录

**[2026-01-21]:** 调整文章格式，删除和添加空格