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

2022-10-13
北京
本文字数：1234 字
阅读完需：约 4 分钟

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

API 介绍：

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

为什么要使用：

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

使用该 API 可以保证：

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

API 使用方法：

语法说明：

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

参数说明：

1. ArrayBuffer；

2. ArrayBufferView；

3. Blob；

4. DOMString；

5. FormData；

6. URLSearchParams； || result：

<返回值> | 当数据被成功加入传输队列后返回 true，否则返回 false |

案例分析：

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

组装符合 sendBeacon 函数的数据参数；
监听 visibilitychange；
执行发送数据；
成功插入队列将返回 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}`);});