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

PI 介绍：

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

为什么要使用：

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

使用该 API 可以保证：

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

API 使用方法：

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

参数说明：

参数	说明
url	数据发送的服务器地址
data	待发送数据，支持 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 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 事件。

上个express搭建的基础上，

app.use('public',express.static('public'));

在项目目录上创建public文件夹，再创建子文件夹image

test.js

let express = require('express');

let app = express();

app.use('/public',express.static('public'));

app.get('/',function(req,res){

res.send('测试')

})

let server = app.listen(8080,function(){

console.log('服务启动');

})

这时候只要通过访问localhost:8080/public/图片.png

就可以访问到托管到服务上的文件了

同样的道理，我们可以把html文件托管上去，我们的html页面就可以被访问了

在我们项目的根目录下，创建一个html文件，我这里创建的是testReq.html

app.use('/public',express.static('public'))

app.get('/testReq.html', function (req, res) {

res.sendFile( __dirname + "/" + "testReq.html" );

})

//这里的__dirname指的是获取当前文件所在目录的完整目录

者：蓝色的秋风

转发链接：https://mp.weixin.qq.com/s/cruL9JGZNZQFrMSrzJJWiQ

在线咨询

上一篇：一条时间线看HTML5与Flash十年兴衰
下一篇：HTML网页编程之按钮详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商