logo

Cloudflare Workers + iOS 快捷指令:打造个人博客实时状态

· 6 min read · AI 1

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

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

一、前言与准备

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

域名要求:必须绑定到 Cloudflare。

功能路径

路由获取方式说明
/api/statusGET获取当前状态,返回 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 的详情页,点击右上角“编辑代码”,清空原有内容,复制粘贴以下代码:

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 详情页:

(4) 绑定 KV 命名空间

在 Worker 详情页,点击上面菜单的绑定,点击添加绑定,在右边选择 KV 命名空间,点击添加绑定,在“KV 命名空间绑定”区域,变量名称为 BLOG_STATUS_KV(需与代码中的 env.BLOG_STATUS_KV 保持一致),然后选择你刚刚创建的命名空间。

(5) 设置速率限制器规则

在域名管理页面,在“安全性 > 安全规则”点击右上角创建规则(自定义规则)。

好了,你现在可以在浏览器试试获取和更新数据。

三、前端:获取并展示数据

使用 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内容”。

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

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

快捷指令设置截图

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


修改记录

2026-01-211

Footnotes

  1. 调整文章格式,删除和添加空格

作者:Mr.Yuan