使用Cloudflare worker及KV实现一个投票应用

原创

蛋黄

发布于 2024-11-22 19:11:39

1730

文章被收录于专栏：蛋黄的部落格蛋黄的部落格

项目需求背景

最初，目标是为网页添加一个简单的投票功能，用户可以通过点击按钮为特定项目投票。由于我们只需要保存票数且没有闲置服务器可用，因此考虑通过 Cloudflare 的 Worker KV 来实现此功能。

后端实现

步骤 1：创建 Cloudflare 账户

首先，注册一个 Cloudflare 账户。

步骤 2：创建 KV 空间

登录后，创建一个新的 KV 空间，名称可以自定义。

步骤 3：添加密钥

在 KV 空间中，新增一个密钥并命名为 vote，用于存储投票数据。

步骤 4：创建 Worker

在 Cloudflare 控制面板中创建一个新的 Worker。

步骤 5：绑定 KV 命名空间

在 Worker 的设置中，进入 "变量" 选项，并将 KV 空间绑定到 Worker 中。你可以自由命名绑定的变量名，这里假设命名为 voteApp。

初步代码实现

以下是 Worker 的初步代码，记得将 voteApp 替换为实际的变量名。

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event).catch((err) => {
      return new Response(err.stack, { status: 500 });
    })
  );
});

async function handleRequest(event) {
  let t = await voteApp.get("vote");
  t = parseInt(t) || 0;
  const requestBody = await event.request.text();
  const contains = requestBody.includes("TP");

  if (contains) {
    t += 1;
    await voteApp.put("vote", t.toString());
    return new Response(t.toString());
  } else {
    return new Response("投票失败");
  }
}

该代码会检测请求体是否包含 TP，如果包含，则票数加一并更新存储在 KV 中。

改进：处理并发问题

为了避免并发请求时发生数据覆盖，可以使用 event.waitUntil 进行异步操作，从而确保投票数据更新时不会丢失。

if (contains) {   event.waitUntil(voteApp.put("vote", (t + 1).toString()));   returnnewResponse((t + 1).toString()); } else {   returnnewResponse("投票失败"); }

改进：增加缓存

为了提高效率，减少对 KV 的频繁读取，加入了缓存机制。当请求中没有缓存数据时，才去 KV 获取并更新数据。缓存数据可以存放一段时间，从而减少读取延迟。

async function handleRequest(event) {
  const cache = caches.default;
  const cacheKey = "vote_count";
  let response = await cache.match(cacheKey);

  if (!response) {
    const data = await voteApp.get("vote");
    let t = parseInt(await data.text()) || 0;

    const requestBody = await event.request.text();
    const contains = requestBody.includes("TP");

    if (contains) {
      event.waitUntil(voteApp.put("vote", (t + 1).toString()));
      return new Response((t + 1).toString());
    } else {
      return new Response("投票失败");
    }
    await cache.put(cacheKey, new Response(t.toString()));
    response = new Response(t.toString());
  }
  return response;
}

前端实现参考

前端代码实现展示当前票数，并提供一个按钮来增加票数。每次点击按钮时，前端会发送一个 POST 请求来更新票数并展示更新后的票数。

<p>当前票数: <span id="voteCount">0</span></p>
<button onclick="incrementVote()">增加票数</button>

<script>
    document.getElementById("voteCount").textContent = "0";
    fetch('/vote', { method: 'GET' })
        .then(response => response.text())
        .then(voteCount => {
            document.getElementById("voteCount").textContent = voteCount;
        })
        .catch(error => {
            console.error('显示票数失败', error);
        });

    function incrementVote() {
        fetch('/vote', { method: 'POST' })
            .then(response => response.text())
            .then(voteCount => {
                document.getElementById("voteCount").textContent = voteCount;
            })
            .catch(error => {
                console.error('增加票数失败:', error);
            });
    }
</script>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

云函数

cloudflare

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

云函数

cloudflare

登录后参与评论

0 条评论

热度