整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
navigator.sendBeacon() 方法支持我們使用 POST 的請求方式將少量的數據異步發送到服務器進行存儲。同時避免使用一些傳統技術，例如：使用 gif 格式的 img 來發送數據。
使用該 API 的應用可以滿足在 unload 之前上服務器發送數據，保證數據被提前發送導致后續的部分數據丟失的情況發生。當在 unload 之前適用 img 來發送數據還會造成 unload 的延遲執行，因為要等待圖像的加載，其他的傳統做法也會引起延遲導致下一個頁面出現的不及時。
參數 | 說明 |
url | 數據發送的服務器地址 |
data | 待發送數據，支持 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 類型 |
result <返回值> | 當數據被成功加入傳輸隊列后返回 true，否則返回 false |
在會話結束時發送統計數據到服務器，我們可以監聽 visibilitychange 事件，在 dom 的可見狀態變為 hidden 時執行 sendBeacon 發送數據。
<!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}`);
});避免使用 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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
