Beacon API in Action All In One

Beacon API in Action All In One

Blob

JSON

http://localhost:3000/api/get?q=

http://localhost:3000/api/post

http://localhost:3000/api/beacon

client

http://localhost:3000/api/get?q={"username":"xgqfrms"}

const wxRobot = (params = {}, desc = '') => {
  // 测试 robot, Beacon API
  const url = 'http://localhost:3000/api/beacon';
  const obj = {
      msgtype: 'markdown',
      markdown: {
          content: `
desciption: ${desc}\n
data: ${JSON.stringify(params, null, 4)}\n
          `,
      },
  };
  // 3. JSON Object
  const options = new Blob(
      [JSON.stringify(obj)],
      {type : 'application/json'}
  );
  navigator.sendBeacon(url, options);
};

// wxRobot(params, desc);

/*

const params = {
    "user": "Eric",
    "os": "macOS",
    "browser": "Chrome",
};
wxRobot(params, '✅ beacon api & json');

*/

server

// const bodyParser = require('body-parser');
const express = require('express');
const fs = require('fs');
const hostname = 'localhost';
// const hostname = '127.0.0.1';
// const hostname = 'http://10.1.159.45';
const port = 3000;
// const port = 3000;
const app = express();
// Starting with release 4.16.0, a new express.json() middleware is available.
app.use(express.json());
app.use(express.urlencoded({
  extended: true,
}));

app.use(function (req, res, next) {
  // JSON parse
  // console.log('req.body', req.body);
  // CORS bug
  res.header("Access-Control-Allow-Origin", "*");
  // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  // res.header("Content-Security-Policy", "connect-src *");
  // res.header("Content-Security-Policy", "connect-src '*'");
  // res.header("Content-Security-Policy", "connect-src 'localhost'");
  // res.header("Content-Security-Policy", "connect-src localhost");
  // Content-Security-Policy: connect-src <source>;
  // Content-Security-Policy: connect-src <source> <source>;
  // res.header('Content-Type', 'application/json');
  // res.setHeader('Content-Type', 'application/json');
  next();
});
// https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=******


app.get('/api/get', (req, res) => {
  // console.log('get req', req);
  console.log('req.params', req.params);
  console.log('req.query', req.query);
  // console.log('req.query', req.query, JSON.stringify(JSON.parse(req.query), null, 4));
  const obj = JSON.parse(req.query.q);
  console.log('obj =', JSON.stringify(obj, null, 4));
  res.setHeader('Content-Type', 'text/html');
  res.send('get api');
});

app.post('/api/post', (req, res) => {
  // console.log('❌ post req', req);
  console.log('✅ post req.body', req.body);
  // res.setHeader('Content-Type', 'application/json');
  // res.sendStatus(200);
  res.send({res: 'post api'});
});

app.post('/api/beacon', (req, res) => {
  // console.log('❌ beacon req', req);
  console.log('✅ beacon post req.body', req.body);
  // res.setHeader('Content-Type', 'application/json');
  // res.sendStatus(200);
  let msg=[];
  req.on('data',(chunk)=>{
    console.log('chunk', chunk);
    if(chunk){
      msg.push(chunk);
    }
  })
  // 接收完毕
  req.on('end',()=>{
    // 对buffer数组阵列列表进行buffer合并返回一个Buffer
    console.log('msg', msg);
    let buf = Buffer.concat(msg);
    console.log(buf);
    //提取 Buffer 正确
  })
  res.send({res: 'beacon api'});
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/
        Server hostname ${hostname} is listening on port ${port}!
    `);
});

test

refs

https://www.cnblogs.com/xgqfrms/p/14635214.html

https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API

https://www.w3.org/TR/beacon/

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---