数据发送

何时发送数据

在页面加载完毕后发送

window.addEventListener("load", async () => {
  try {
    // ... 发送数据 ...
  } catch (error) {
    console.error("Error:", error);
  }
});

怎么发送数据

使用 fetch 方法向服务器推送数据

const params = {
  /* ... 数据 ... */
};
fetch("http://localhost:3000/pageviews", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(params),
})
  .then((response) => {
    if (response.ok) {
      console.log("数据推送成功");
    } else {
      throw new Error("数据推送失败");
    }
  })
  .catch((error) => {
    console.error("Error:", error);
  });

全部代码实现

当页面加载完毕后会自动采集用户信息并将数据通过 POST 请求推送至指定的服务器地址。

window.addEventListener("load", async () => {
  try {
    var publicIP = await fetch("https://api.ipify.org?format=json").then(
      (response) => response.ok && response.json()
    );
    var ipInfo = await fetch("https://ipapi.co/json/").then(
      (response) => response.ok && response.json()
    );
    ipInfo = ipInfo || { ip: "", city: "", region: "", country_name: "" };
    var params = {
      ip: publicIP.ip,
      ipInfo,
      location: `${ipInfo.country_name},${ipInfo.region},${ipInfo.city},`,
      url: location.href,
      pageTitle: document.title,
      deviceType: navigator.platform,
    };

    console.log("采集到的数据...", params);

    fetch("http://localhost:3000/pageviews", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(params),
    })
      .then((response) => {
        if (response.ok) {
          console.log("数据推送成功");
        } else {
          throw new Error("数据推送失败");
        }
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  } catch (error) {
    console.error("Error:", error);
  }
});

以上代码实现了以下功能：

1. 在页面加载完毕后，使用 fetch 方法获取访问者的 IP 地址信息。
2. 组装要推送的参数 params，包括 IP 信息、地理位置、URL、页面标题和设备类型。
3. 打印采集到的数据 params 到控制台。
4. 使用 fetch 方法向服务器地址 http://localhost:3000/pageviews 发送 POST 请求，携带参数 params 以 JSON 格式。