正確發送統計數據到服務器

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小時內與您取得聯系。

整合營銷服務商