正确发送统计数据到服务器
API 介绍：
navigator.sendBeacon() 方法支持我们使用 POST 的请求方式将少量的数据异步发送到服务器进行存储。同时避免使用一些传统技术，例如：使用 gif 格式的 img 来发送数据。
为什么要使用：
使用该 API 的应用可以满足在 unload 之前上服务器发送数据，保证数据被提前发送导致后续的部分数据丢失的情况发生。当在 unload 之前适用 img 来发送数据还会造成 unload 的延迟执行，因为要等待图像的加载，其他的传统做法也会引起延迟导致下一个页面出现的不及时。
使用该 API 可以保证：
- 数据发送可靠；
- 数据异步传输；
- 不影响下一个页面载入。
API 使用方法：
语法说明：
navigator.sendBeacon(url);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 发送数据。
- 组装符合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}`);
});API 兼容性：
注意事项：
避免使用 unload 和 beforeunload 在会话结束时发送统计数据。因为在许多情况下（尤其是移动设备）浏览器不会产生 unload、beforeunload、pagehide 事件。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
