zwjdujin 发表于 2024-11-15 00:13

接【自用挪车二维码,免服务器,可微信通知,可拨打电话 】后续增加时间间隔功能

bgwu666大佬在《利用Cloudflare Workers部署挪车页面》文末提出“避免访问者无限制地发送,应该在发送次数/时间上做一个限制。”这里我就加一个时间限制,一般12123和114挪车都是10分钟可以催一下,所以这里我也设置10分钟,小伙伴们可以根据自己的喜好修改。



```
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const phone = '18888888888'; // 车主的手机号
    const wxpusherAppToken = 'AT_************************'; // Wxpusher APP Token
    const wxpusherUIDs = ['UID_************************']; // 车主的UIDs

    const htmlContent = `
      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>通知车主挪车</title>
          <style>
            * { box-sizing: border-box; margin: 0; padding: 0; }
            body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; background: #f0f2f5; color: #333; }
            .container { text-align: center; padding: 20px; width: 100%; max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); background: #fff; }
            h1 { font-size: 24px; margin-bottom: 20px; color: #007bff; }
            p { margin-bottom: 20px; font-size: 16px; color: #555; }
            button {
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
            }
            .notify-btn { background: #28a745; }
            .notify-btn:hover { background: #218838; }
            .call-btn { background: #17a2b8; }
            .call-btn:hover { background: #138496; }
          </style>
      </head>
      <body>
          <div class="container">
            <h1>通知车主挪车</h1>
            <p>如需通知车主,请点击以下按钮</p>
            <button class="notify-btn" onclick="notifyOwner()">通知车主挪车</button>
            <button class="call-btn" onclick="callOwner()">拨打车主电话</button>
          </div>

          <script>
            // 获取或设置最后通知的时间戳
            function getLastNotifyTime() {
            return localStorage.getItem('lastNotifyTime') || 0;
            }

            function setLastNotifyTime(time) {
            localStorage.setItem('lastNotifyTime', time);
            }

            // 检查是否可以发送通知
            function canNotify() {
            const lastNotifyTime = getLastNotifyTime();
            const currentTime = Date.now();
            const fiveMinutesAgo = currentTime - 10 * 60 * 1000;
            return lastNotifyTime < fiveMinutesAgo;
            }

            // 调用 Wxpusher API 来发送挪车通知
            function notifyOwner() {
            if (!canNotify()) {
                alert("请等待10分钟后再次尝试通知。");
                return;
            }

            fetch("https://wxpusher.zjiecode.com/api/send/message", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                  appToken: "${wxpusherAppToken}",
                  content: "您好,有人需要您挪车,请及时处理。",
                  contentType: 1,
                  uids: ${JSON.stringify(wxpusherUIDs)}
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1000) {
                  alert("通知已发送!");
                  setLastNotifyTime(Date.now());
                } else {
                  alert("通知发送失败,请稍后重试。");
                }
            })
            .catch(error => {
                console.error("Error sending notification:", error);
                alert("通知发送出错,请检查网络连接。");
            });
            }

            // 拨打车主电话
            function callOwner() {
            window.location.href = "tel:${phone}";
            }
          </script>
      </body>
      </html>
    `

    return new Response(htmlContent, {
      headers: { 'Content-Type': 'text/html;charset=UTF-8' },
    })
}
```

这种方法利用了浏览器的 localStorage 存储机制,确保每个设备遵守10分钟的通知限制。不过需要注意的是,这种方法依赖于客户端的行为,如果用户清除浏览器数据或者更换设备,限制可能会被绕过。对于更严格的要求,可能需要在服务器端实现类似的逻辑,但是我懒得去折腾了,就这样吧。我想大部分人还是不会去这样折腾研究去破解这个的……

wxd007 发表于 2024-11-15 08:58

挺好,自用挪车有了,下面就只差一辆车了:Dweeqw

zwjdujin 发表于 2024-11-16 09:58

charm1234 发表于 2024-11-16 08:51
这个怎么用呢?直接在原代码最后加上这段代码吗?

可以参考bgwu666大佬的《利用Cloudflare Workers部署挪车页面》https://www.52pojie.cn/thread-1980798-1-1.html

或者看我的文章https://www.dujin.org/23105.html

TonyLiu 发表于 2024-11-15 09:09

不错,给你点赞{:1_921:}

淘子 发表于 2024-11-15 09:11

支持支持很实用

huowanqing 发表于 2024-11-15 09:26

不错 不错   还差个帮我挪车的司机了

lee13579 发表于 2024-11-15 09:27

先存着,下次买个车

stone-liu 发表于 2024-11-15 09:34

是不是得先买车啊?

海是倒过来的天 发表于 2024-11-15 09:46

先存着,下次买个车
雅迪也可以

xixicoco 发表于 2024-11-15 09:54

支持后续的完整教程

qqaz1122 发表于 2024-11-15 10:02

现在程序异常了 手机能收到通知了{:1_921:}
页: [1] 2 3 4
查看完整版本: 接【自用挪车二维码,免服务器,可微信通知,可拨打电话 】后续增加时间间隔功能