$ cd moesif-email
$ npm init -y && npm i express moesif-nodejs

如果一切順利，輸出應(yīng)該包含以下幾行：

- express@4.17.1

- moesif-nodejs@3.0.0

我們將在 Node.js 和 Express 的基礎(chǔ)上構(gòu)建我們的 API 和注冊網(wǎng)站。Moesif SDK for Express 將把 API 監(jiān)控數(shù)據(jù)發(fā)送到 Moesif 服務(wù)。

使用 Moesif 瀏覽器 SDK 創(chuàng)建網(wǎng)站

首先，我們需要創(chuàng)建一個網(wǎng)站。我們將使用 Moesif 瀏覽器 SDK 發(fā)送具有特定用戶 ID 的客戶端事件。這將在 Moesif 服務(wù)上創(chuàng)建帶有元數(shù)據(jù)的新用戶，稍后，我們將允許將該用戶鏈接到我們將從網(wǎng)站發(fā)送的 API 請求。moesif-email/index.html 的代碼如下所示：

<script src="http://unpkg.com/moesif-browser-js@^1/moesif.min.js"></script>



<h1>Demo API</h1>

<button id="start">Send client event</button>

<button id="api">Send API request</button>

<pre id="target"></pre>



<script type="text/javascript">

  moesif.init({ applicationId: "<YOUR_MOESIF_APP_ID>" });

  const userId = "demo-user-123";

  moesif.identifyUser(userId, {

    email: "<YOUR_EMAIL>",

    firstName: "Jane",

    lastName: "Doe",

  });

  document.getElementById("start").addEventListener("click", () => {

    moesif.track("clicked_start");

    document.getElementById("target").innerHTML = "clicked_start";

  });

  document.getElementById("api").addEventListener("click", async () => {

    const response = await fetch("/api", {

      headers: { Authorization: userId },

    });

    const json = await response.json();

    document.getElementById("target").innerHTML = JSON.stringify(json, null, 2);

  });

</script>

我們包含了 Moesif 瀏覽器 SDK，創(chuàng)建了兩個按鈕并將它們與兩個操作關(guān)聯(lián)起來，發(fā)送一個客戶端事件和一個 API 請求。SDK 配置了 userId，因此 Moesif 知道是誰發(fā)送了客戶端事件。不要忘記將其替換<YOUR_MOESIF_APP_ID>為您的實際 Moesif 應(yīng)用程序 ID 和<YOUR_EMAIL>您自己的電子郵件。

客戶端操作使用瀏覽器 SDK 來告知 Moesif 網(wǎng)站上發(fā)生的事情。在本例中，就是單擊按鈕。這與我們的 API 無關(guān)，但以后可能會很有趣。例如，當用戶通過網(wǎng)站注冊，但隨后沒有發(fā)送任何請求時。

API 請求將使用 Authorization 標頭告知 API 用戶 ID。這樣，Moesif 稍后可以將客戶端事件與 API 請求關(guān)聯(lián)起來。

使用 Moesif Express SDK 創(chuàng)建 API

下一步是 API 服務(wù)器。我們將使用Express 框架

moesif-email/index.js 的代碼應(yīng)包含以下內(nèi)容：

const fs = require("fs");

const express = require("express");

const moesif = require("moesif-nodejs");

const website = fs.readFileSync(__dirname + "/index.html");



const app = express();

app.use(

  moesif({

    applicationId: "<YOUR_MOESIF_APP_ID>",

    logBody: true,

    identifyUser: ({ headers }) => headers.authorization,

  })

);

app.get("/", (request, response) => response.end(website));

app.get("/api", (request, response) =>

  response.end(JSON.stringify({ timestamp: Date.now() }))

);

app.listen(8888, () => console.log(Running at http://localhost:8888));

首先，我們加載 index.html，然后創(chuàng)建一個 Express 應(yīng)用并將其配置為使用 Moesif Express SDK 作為中間件。您需要將其替換YOUR_MOESIF_APP_ID為您的實際 Moesif 應(yīng)用 ID。

測試 API

為了測試 Express API，我們必須使用以下命令啟動服務(wù)器：

$ node .

這應(yīng)該輸出以下行：

Running at http://localhost:8888

如果一切順利，我們可以http://localhost:8888通過瀏覽器導(dǎo)航到我們的網(wǎng)站并點擊按鈕。一個將發(fā)送客戶端事件，另一個將發(fā)送 API 請求。

圖 1：實時事件日志

如果您現(xiàn)在導(dǎo)航到 Moesif 儀表板（來自此處YOUR_MOESIF_APP_ID），然后單擊頂部的“事件”選項卡，您應(yīng)該會看到四個不同的事件，如上圖 1 所示。

用戶操作事件是客戶端事件。GET /api 事件是我們發(fā)送給 API 的請求。它們都帶有用戶名和公司注釋。另外兩個事件與加載網(wǎng)站和網(wǎng)站圖標的瀏覽器請求有關(guān)。之所以包含它們，是因為我們像 API 一樣使用相同的 Express 服務(wù)器來提供網(wǎng)站，但由于請求缺少授權(quán)標頭，因此我們無法獲得用戶或公司注釋。