功能說明

開啟頁面會看到一個輸入方塊，待大家都輸入好名字後，到Game_status修改遊戲的狀態，用戶頁面中的按鈕就可以被點擊且無法修改名字，此時記分板( Grafana )就會顯示數據。

網頁架構

• 前、後端
  • Cloudflare workers
• 資料庫
  • InfluxDB

遇到問題

InfluxDB的時間的格式

原本我在workers上用Date.now()insert 到資料庫上但在grafana資料一直顯示不出來，原本以為是我把InfluxDB的版本從1.1升到1.8會有跟Gragan的不相容問題之類的，後來有重新安裝Grafana，但還是顯示不出來。

過程中不知道那來的想法把資料印出來，就看到他們的時間長度整個不對，直前有成功的是1598404399125846985現在存到的資料是1598404399125，於是我就在後面補零，這樣${Date.now()}000000就可以顯示。

其實在文件有說它的時間是用Unix nanosecond timestamp，或是可以不用帶入

user@user-pc:~$ cat demo.js 
var date = new Date();
console.log(date.getTime());
console.log(Date.now());

user@user-pc:~$ node demo.js 
1598275308065
1598275308067

fetch 帶入 data

看到網路上透過url把資料送到InfluxDB的範例是用curl但是我要的是在workers上把資料傳進去，所以我使用fetch，但在原本curl資料是帶在data-urlencode。解決方式是本然以為要用json格式，就去查content-type，不小心看到有application/x-www-form-urlencoded然後就成功。

const url = "http://localhost:8086/write?db=test"

const init = {
    body: `score,uid=${id},uname=${name} score=${score}`,
    method: "POST",
    headers: {
      "content-type": "application/x-www-form-urlencoded;charset=UTF-8",
    },
}
const response = await fetch(url, init)

現有問題

• 中文的字在Grafana顯示會變成亂碼（有%和英文數字組成）
• localhost 測試時要請求CF worker會被擋

參考資料

InfluxDB line protocol tutorial