[ กลับหน้าราคาทอง // HOME ]
GOLDPRICE // ARCHITECTURE

สถาปัตยกรรมทางเทคนิค

ลำดับการทำงานฝั่งเซิร์ฟเวอร์ตั้งแต่การเรียกฟีด การแปลงข้อมูล จนถึงการส่งค่าให้หน้าเว็บ อ้างอิงจาก src/lib/gold.ts และ src/routes/index.tsx โดยตรง

01

ภาพรวม // Overview

แกนหลักคือ server function getGoldData (สร้างด้วย createServerFn ของ TanStack Start) ทำงานฝั่งเซิร์ฟเวอร์เสมอ แม้จะถูกเรียกจากไคลเอนต์ก็จะกลายเป็น RPC ไปรันบนเซิร์ฟเวอร์ ดังนั้น เบราว์เซอร์ไม่เคยเรียกฟีดต้นทางตรง ๆ จึงเลี่ยงปัญหา CORS

02

ลำดับการดึงข้อมูล // Server-side fetch flow

  1. 1

    เรียกฟีดต้นทาง

    fetch(FEED_URL) ไปที่ thaigold.info/RealTimeDataV2/gtdata_.txt พร้อม AbortSignal.timeout(9000) (ตัดที่ 9 วินาที) และ ส่ง header Accept: application/json, text/plain, */*
  2. 2

    ตรวจสถานะ HTTP

    ถ้า res.ok เป็น false จะ throw `feed ${res.status}` เพื่อตกไปที่ตัวจัดการ ข้อผิดพลาด
  3. 3

    อ่านและ parse

    อ่าน body เป็นข้อความด้วย res.text() แล้ว JSON.parse เป็น array และตรวจว่าเป็น array จริง (ไม่ใช่ก็ throw bad feed shape)
  4. 4

    แปลงเป็นโครงสร้างของแอป

    parseFeed สร้าง Map ตามชื่อแถว แล้วดึง สมาคมฯ, 96.5%, GoldSpot, THB และ Update ออกมาเป็น Quote แต่ละก้อน (bid / ask / diff)
  5. 5

    คืนค่า GoldData

    คืนอ็อบเจกต์ GoldData พร้อม updatedAt (จาก unix seconds ในแถว Update) และธง ok ที่เป็น true เมื่อมีราคาทองอย่างน้อยหนึ่งค่า
03

การจัดการข้อผิดพลาดและ fallback

ทั้งบล็อกอยู่ใน try/catch ก้อนเดียว ถ้าขั้นตอนใดล้มเหลว (เครือข่าย, timeout, HTTP ไม่ใช่ 2xx, JSON เพี้ยน) ตัว catch จะคืน GoldData ที่ทุก quote เป็น null และ ok:false แทนการโยน error ออกไป หน้าเว็บจึงไม่พังและแสดง สถานะ OFFLINE แทน

catch {
  return {
    goldBar: { bid: null, ask: null, diff: null },
    goldJewelry: { bid: null, ask: null, diff: null },
    spot: { bid: null, ask: null, diff: null },
    thb: { bid: null, ask: null, diff: null },
    updatedAt: Date.now(),
    ok: false,
  };
}

ฝั่งหน้าเว็บ (src/routes/index.tsx) จะอัปเดตสเตตเฉพาะเมื่อ next.ok เป็น true เท่านั้น ถ้ารีเฟรชรอบใดดึงไม่สำเร็จ จะคง ราคาล่าสุดที่ดีไว้ ไม่เขียนทับด้วยค่าว่าง นี่คือกลไก fallback ฝั่ง client ที่ทำงานคู่กับ fallback ฝั่ง server ข้างบน

04

การประมวลผลฝั่ง backend // Processing

การประมวลผลทั้งหมดเบาและ synchronous หลัง parse: จับคู่แถวด้วยชื่อ, ทำความสะอาดตัวเลขด้วย toNum (ตัด + จุลภาคและ ช่องว่าง) แล้วแปลง unix timestamp เป็นมิลลิวินาที ไม่มีการเขียนลง ฐานข้อมูล ไม่มี job เบื้องหลัง และไม่มีการแคชฝั่งเซิร์ฟเวอร์ - แต่ละ คำขอคือการดึงสด

05

อ่านต่อ // Continue

CODEBASE OVERVIEWโครงสร้างโค้ดและตัวอ่านซอร์สผังไฟล์ทั้งโปรเจกต์ tech stack และตัวอ่าน/ดาวน์โหลดซอร์สโค้ดของทุกไฟล์