正确发送统计数据到服务器

API 介绍：

     navigator.sendBeacon() 方法支持我们使用 POST 的请求方式将少量的数据异步发送到服务器进行存储。同时避免使用一些传统技术，例如：使用 gif 格式的 img 来发送数据。

为什么要使用：

     使用该 API 的应用可以满足在 unload 之前上服务器发送数据，保证数据被提前发送导致后续的部分数据丢失的情况发生。当在 unload 之前适用 img 来发送数据还会造成 unload 的延迟执行，因为要等待图像的加载，其他的传统做法也会引起延迟导致下一个页面出现的不及时。

使用该 API 可以保证：

  1. 数据发送可靠；
  2. 数据异步传输；
  3. 不影响下一个页面载入。

API 使用方法：

语法说明：

  1. navigator.sendBeacon(url);
  2. navigator.sendBeacon(url, data);

参数说明：

参数说明
url数据发送的服务器地址
data待发送数据，支持：
   1. ArrayBuffer；
   2. ArrayBufferView；
   3. Blob；
   4. DOMString；
   5. FormData；
   6. URLSearchParams；
result：
<返回值>		当数据被成功加入传输队列后返回 true，否则返回 false

案例分析：

     在会话结束时发送统计数据到服务器，我们可以监听 visibilitychange 事件，在 dom 的可见状态变为 hidden 时执行 sendBeacon 发送数据。

  1. 组装符合sendBeacon函数的数据参数；
  2. 监听visibilitychange；
  3. 执行发送数据；
  4. 成功插入队列将返回 true。
<!DOCTYPE html>
<html lang="en">
  <body>
    <h3>Send-Data</h3>
    <script>
      // ① 
      const params = new URLSearchParams();
      params.append("fun", "click");
      params.append("time", "100ms");
      params.append("count", "1");
      // ② 
      document.addEventListener("visibilitychange", () => {
        if (document.visibilityState === "hidden") {
          // ③ 
          const result = navigator.sendBeacon("/log", params);
          // ④ 
          console.log(result);
        }
      });
    </script>
  </body>
</html>

使用 expressjs 来准备一个接口数据的服务：

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const port = 3000;
 
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static("public"));
 
// 接收 log 数据
app.post("/log", (req, res) => {
  console.log("body", req.body);
  res.send("pong");
});
 
app.listen(port, () => {
  console.log(`app listening on port ${port}`);
});

API 兼容性：

注意事项：

     避免使用 unload 和 beforeunload 在会话结束时发送统计数据。因为在许多情况下（尤其是移动设备）浏览器不会产生 unload、beforeunload、pagehide 事件。

posted @   前端小鑫同学  阅读(9)  评论(0)  编辑  收藏  举报  
相关博文：
·  Requests基础使用
·  仅接收服务器数据的长链接方案
·  c# WebRequest application/json 发送POST或GET请求
·  JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
·  我工作中用到的性能优化全面指南
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae