用 PushDeer 给你的网站添加一个实时反馈页面吧

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1000 天前的主题，其中的信息可能已经有所发展或是发生改变。

关于 PushDeer： https://github.com/easychen/pushdeer

首先你要设置好你的 PushDeer 以确保你可以通过调用 APi 在手机上收到消息。

然后你需要在你的网站上添加一个 iframe：

<iframe src="https://pushdeer-form.jwenjian.workers.dev/?pushkey=<替换成你的 pushkey>" width=100% height=400 />

然后你的用户就可以看到下面的页面：

用户输入信息之后，点击 send ，如果下面显示 OK ，你的手机过一会就回收到通知了

可以去我的页面试试：

https://papyrus.so/@happyfire/say-hi-to-me

good luck

另外，之所以没有在页面直接发起，是因为 push deer 的 api 没有开启 CORS ，所以中间过了一个 cloud flare 的 workers ，你也可以自己实现一套这个页面。

workers 脚本：

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

async function handleSend(url) {
  try {
      let searchParams = new URLSearchParams(url.search)
let resp = await fetch("https://api2.pushdeer.com/message/push?pushkey=" +
            searchParams.get('pushkey') +
            "&text=" +
            searchParams.get('text'));
  let json = await resp.json();
  let obj = {
      code: 0
      }
  return new Response(JSON.stringify(obj), {
    headers: {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    status: 200
  })
  } catch(e) {
    let obj = {
        code: -1
    }
    return new Response(JSON.stringify(obj), {
    headers: {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    status: 500
  })
  } 
  
  
}
/**
 * Many more examples available at:
 *   https://developers.cloudflare.com/workers/examples
 * @param {Request} request
 * @returns {Promise<Response>}
 */
async function handleRequest(request) {
  let url = new URL(request.url)
  if (url.pathname === '/send') {
    return handleSend(url)
  }

  const htmlString = `
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PushDeer Form</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
    />
  </head>
  <body>
    <div class="pushdeer-app">
      <form
        class="pushdeer-form"
        method="get"
        action="https://api2.pushdeer.com/message/push"
        id="the-form"
      >
        <input
          type="hidden"
          name="pushkey"
          id="pushdeer-key"
          value="PDU6998TyRPY1S0snjIfxS52HZXyXSznhEwOwSis"
          required
        />
        <label for="text">Message:</label>
        <textarea name="text" id="pushdeer-msg" required></textarea>
        <button type="submit">Send</button>
      </form>
      <p id="tips"></p>
    </div>
    <script>
      function resetTips() {
        document.getElementById("tips").innerText = "";
        document.getElementById("tips").style.color = "currentColor";
      }

      function showError(msg) {
        document.getElementById("tips").style.color = "red";
        document.getElementById("tips").innerText = msg;
        setTimeout(resetTips, 2000);
      }

      function showSuccess(msg) {
        document.getElementById("tips").style.color = "green";
        document.getElementById("tips").innerText = msg;
        setTimeout(resetTips, 2000);
      }

      document.getElementById("the-form").addEventListener("submit", (e) => {
        e.preventDefault();
        console.log(document.location);
        let params = new URLSearchParams(document.location.search.substring(1));
        if (!params.has("pushkey")) {
          showError("No pushkey in url search params!");
          return;
        }

        let text = document.getElementById("pushdeer-msg").value;
        fetch(
          "/send?pushkey=" +
            params.get("pushkey") +
            "&text=" +
            text
        )
          .then((resp) => {
              document.getElementById('pushdeer-msg').value=null
              showSuccess("OK");
          })
          .catch((err) => {
            console.error(err);
            showError("Send message failed");
          });
      });
    </script>
  </body>
</html>
  `

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

你可以把它部署到你的 workers 账号下面，以防我的免费额度用完，没法继续使用。

另外欢迎订阅我的阅读列表： https://papyrus.so/@happyfire

10 条回复 • 2022-02-28 07:00:48 +08:00