一篇文章看懂navigator.sendBeacon-CSDN博客

本文链接：https://blog.csdn.net/m0_73918807/article/details/144109823

这篇内容是看B站up小满zs后整理的。

navigator.sendBeacon 是ping请求

应用场景：

发送心跳包，以保持和服务器的长连接，避免因为长时间没有网络请求而导致连接被关闭。
埋点，在页面关闭或卸载时记录用户在线时间，pv（页面浏览量），uv（独立访客数，同一用户访问多次访问只+1），错误日志上报，按钮点击次数。
发送用户反馈，如用户意见，bug报告等。

优点：不受页面卸载过程的影响，确保数据可靠发送。异步执行，不阻塞页面关闭或跳转。受同源策略的影响。
缺点：只能发送post请求。只能传输少量数据（64kb内）。无法自定义请求头。如果处于危险的网络环境，或者开启了广告屏蔽插件，此请求无效。只能传输ArrayBuffer，ArrayBufferView Blob DomString FormData URLSearchParams

html充当客户端发送请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>send</button>
    <script>
		    //由于不可以发送json数据类型，我们转化为blob
        let btn=document.querySelector('button')
        let json=JSON.stringify({name:'jack'})
        let blob=new Blob([json],{type:'application/json'})
        btn.addEventListener('click',()=>{
            navigator.sendBeacon('<http://localhost:3001/api/beacon>')
        })
    </script>
</body>
</html>

node.js充当服务器提供接口
import express from 'express'
const app=express()
app.use(express.json())
app.post('/api/beacon',(req,res)=>{
    console.log(req.body)
    res.json('ok')
})

app.listen(3001,()=>{
    console.log('listen open')
})