正确发送统计数据到服务器
服务器 正确 发送 统计数据
2023-06-13 09:16:12 时间
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 事件。
相关文章
- linux审计日志在哪里,linux – 将审计日志发送到SYSLOG服务器
- 首选dns协议版本6怎么填服务器,首选dns怎么填服务器?[通俗易懂]
- Linux服务器那么多参数该如何监控,掌握这些Linux监控命令可以早点下班!
- 分布式AI集群服务器架构
- SQLServer 错误 21899 重定向发布服务器“%s”中的查询失败,该查询用于确定原始发布服务器“%s”的订阅服务器是否存在 sysserver 条目,失败时错误为“%d”,错误消息为“%s”。 故障 处理 修复 支持远程
- 上传文件至Linux服务器:一步一步来(向linux服务器上传文件)
- Linux服务器操作技巧汇总(linux服务器书籍推荐)
- 登录Linux服务器:掌握正确的方法(怎么登录linux服务器)
- 如何正确搭建MySQL服务器配置(搭建mysql服务器配置)
- 如何正确关闭MySQL服务器(如何关闭mysql)
- Mac极速进入MySQL服务器的方法(mac进入mysql)
- 密钥保护Linux服务器:存储SSH密钥的正确姿势(linux保存ssh)
- 的储存如何在Linux服务器上正确挂载储存设备(linux挂载服务器上)
- Linux服务器实现域名添加(linux服务器添加域名)
- u盘装载Linux,轻松完成服务器部署(u盘服务器装linux)
- 基于Linux的视频服务器架设实践(linux架设视频服务器)
- 服务器如何正确配置MS SQL服务器(怎样设置mssql)
- 怎样在Windows上正确安装MSSQL服务器(怎么看mssql安装)
- 建立Linux服务器的正确时区设定(服务器时区linux)
- 实用教程:如何在Linux系统中正确挂载远程服务器?(linux挂载服务器)
- 防止MSSQL服务器被攻击:确定正确的端口配置(mssql 端口 防火墙)
- Linux服务器重启技巧:如何正确重新启动(如何重启linux服务器)
- 怎样正确卸载Redis服务器(怎么卸载redis服务)
- 将你的服务器上的Redis开启吧(本机开启redis)
- 如何正确部署Redis单体服务器(如何部署redis单体)
- 无法在发生错误时创建会话,请检查PHP或网站服务器日志,并正确配置PHP安装(win+linux)