V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
jwenjian
V2EX  ›  分享创造

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

  •  1
     
  •   jwenjian ·
    jwenjian · 2022-02-27 10:42:35 +08:00 · 3035 次点击
    这是一个创建于 760 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    image.png

    用户输入信息之后,点击 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
    96368a
        1
    96368a  
       2022-02-27 11:09:19 +08:00 via Android
    怕恶意骚扰
    jwenjian
        2
    jwenjian  
    OP
       2022-02-27 11:27:21 +08:00
    关于骚扰,一个是本身页面没什么访问量,哈哈,另外,如果觉得骚扰,可以把 pushdeer 软件的通知给收到不重要的通知里面。

    另外,还可以随时换个 pushkey

    另外你可以自己在页面上加限制,比如登录才能看到页面之类的,自己发挥,这里只是一个思路,觉得有意思,分享一下
    jwenjian
        3
    jwenjian  
    OP
       2022-02-27 11:29:14 +08:00
    另外这个还有点像树洞?

    ![image.png]( https://s2.loli.net/2022/02/27/NImievlSrQ9bHJD.jpg)
    loveqianool
        4
    loveqianool  
       2022-02-27 12:46:37 +08:00
    说到 workers 这里有一个
    https://github.com/K0IN/Notify
    你的无 app 怎么不做 pwa 呢,Windows 甚至都没法接受消息。
    jasonkayzk
        5
    jasonkayzk  
       2022-02-27 13:41:08 +08:00
    挺有趣的;
    jwenjian
        6
    jwenjian  
    OP
       2022-02-27 14:05:39 +08:00
    @loveqianool 手机和 mac 重度用户,windows 只是用来搬砖
    awthink
        7
    awthink  
       2022-02-27 14:32:15 +08:00
    有意思
    googlefans
        8
    googlefans  
       2022-02-27 16:16:52 +08:00
    点赞
    cernard
        9
    cernard  
       2022-02-27 18:51:33 +08:00
    @jwenjian 如何单独给某设备推送呢?我用一个 apple id 登录了 iPhone 和 Mac ,然后用其中一个设备的 key 去 push 消息,所以的已注册设备都会收到消息。
    jwenjian
        10
    jwenjian  
    OP
       2022-02-28 07:00:48 +08:00
    @cernard 这个得找 pushdeer 的开发者问一下了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5879 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 02:22 · PVG 10:22 · LAX 19:22 · JFK 22:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.