Project: ဝဘ်ဆိုက် Request တစ်ခုကို Trace လုပ်ခြင်း

နားလည်ထားရမယ့် အချက်

ဒီ project မှာ theory အသစ်မရှိပါဘူး — URL-lifecycle lesson နဲ့ client/server mental model ကို https://shop.example.com/products?category=shoes ဆိုတဲ့ တကယ့် URL၊ domain အလွတ်မဟုတ်ဘဲ query string ပါတဲ့ URL တစ်ခုပေါ်မှာ အတူတကွ run ကြည့်ခိုင်းတာပါ။

• Browser (client): URL ကို scheme, host, path, query အဖြစ် parse လုပ်ပြီး ကိုယ်ပိုင် cache ကို စစ်ပြီး IP address လိုအပ်ကြောင်း ဆုံးဖြတ်ပါတယ်။
• DNS resolver: shop.example.com ကို IP address အဖြစ် ပြောင်းပေးရုံ တာဝန်တစ်ခုတည်းရှိတဲ့ server တစ်ခုပါပဲ။
• Server ဒါမှမဟုတ် CDN: TLS handshake ပြီးနောက် အလုပ်အားလုံး — request ဖတ်ခြင်း၊ /products?category=shoes ရဲ့ အဓိပ္ပာယ်ဆုံးဖြတ်ခြင်း၊ response တည်ဆောက်ခြင်း။

Wire ပေါ်ထွက်သွားတဲ့ host header အတိအကျနဲ့ server မြင်ရမယ့် query parameter အတိအကျကို ရှင်းပြနိုင်ဖို့ကပဲ lifecycle ကို တကယ်နားလည်စေတာပါ။ TLS/CDN configuration အသေးစိတ်ကို Cloud & Deployment tutorial မှာ ကြည့်နိုင်ပါတယ်။

REQUEST LIFECYCLE FOR ONE URL
-----------------------------
TRACE: https://shop.example.com/products?category=shoes
-----------------------------------------------------------
[Browser]
  1. Parse URL -> host=shop.example.com path=/products
  2. Check browser cache + DNS cache
        |
        v
[DNS Resolver]
  3. Resolve shop.example.com -> IP address
        |
        v
[Network]
  4. Open TCP connection to IP on port 443
        |
        v
[TLS]
  5. TLS handshake (scheme is https)
        |
        v
[Browser]
  6. Send GET /products?category=shoes
     Host: shop.example.com
        |
        v
[Server / CDN for shop.example.com]
  7. Request routed to CDN edge or origin server
  8. Server responds: status + headers + HTML body
        |
        v
[Browser]
  9. Parse HTML -> build DOM
 10. Fetch CSS, JS, images referenced in the HTML
 11. Render: DOM + CSSOM + JS -> pixels showing shoes

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

URL-lifecycle steps တွေနဲ့ client/server roles တွေ — ရှိပြီးသား lesson နှစ်ခုကိုပဲ သုံးပြီး trace ကို လုပ်ကြည့်ပါ။

traceRequest ကို ဥပမာ URL နဲ့ run ကြည့်ပြီး output ကို ဒီ list နဲ့ line တစ်ကြောင်းချင်းစီ နှိုင်းယှဉ်ကြည့်ပါ။

• URL ရဲ့ query string ဟာ request line ပေါ်က extra data တစ်ခုသာ၊ separate protocol မဟုတ်ပါ
• Client, DNS resolver, server/CDN တစ်ခုစီက timeline ရဲ့ ကွဲပြားတဲ့ အပိုင်းကို ပိုင်ဆိုင်ပါတယ်
• URL တစ်ခုတည်းကို trace လုပ်ခြင်းက generic diagram က ကျော်သွားနိုင်တဲ့ lifecycle step တွေကို ဖော်ထုတ်ပေးပါတယ်

အတူတူ စမ်းရေးကြည့်မယ်

function traceRequest(rawUrl) {
  const u = new URL(rawUrl);
  const port = u.port || (u.protocol === 'https:' ? '443' : '80');

  return [
    `1. Parse URL       - scheme=${u.protocol.replace(':', '')}, host=${u.hostname}, path=${u.pathname}, query=${u.search}`,
    `2. Check caches    - browser checks its cache and DNS cache for ${u.hostname}`,
    `3. DNS resolution  - resolve ${u.hostname} to an IP address`,
    `4. TCP connect     - open a TCP connection to the IP on port ${port}`,
    `5. TLS handshake   - ${u.protocol === 'https:' ? 'negotiate TLS because scheme is https' : 'skipped, scheme is http'}`,
    `6. Send request    - GET ${u.pathname}${u.search} with Host: ${u.hostname}`,
    `7. Server/CDN      - request reaches server or CDN in front of ${u.hostname}`,
    `8. Server responds - status code, headers, and HTML body for ${u.pathname}`,
    `9. Parse HTML      - browser builds the DOM from the response body`,
    `10. Fetch assets   - browser fetches CSS, JS, images referenced in the HTML`,
    `11. Render page    - DOM + CSSOM + JS produce pixels for category=${u.searchParams.get('category')}`,
  ];
}

const result = traceRequest('https://shop.example.com/products?category=shoes');
result.forEach((line) => console.log(line));

traceRequest('https://shop.example.com/products?category=shoes') ကို run လိုက်ရင် အောက်ပါ step 11 ခုကို အစဉ်လိုက် ထုတ်ပြပါတယ်:

1. Parse URL       - scheme=https, host=shop.example.com, path=/products, query=?category=shoes
2. Check caches    - browser checks its cache and DNS cache for shop.example.com
3. DNS resolution  - resolve shop.example.com to an IP address
4. TCP connect     - open a TCP connection to the IP on port 443
5. TLS handshake   - negotiate TLS because scheme is https
6. Send request    - GET /products?category=shoes with Host: shop.example.com
7. Server/CDN      - request reaches server or CDN in front of shop.example.com
8. Server responds - status code, headers, and HTML body for /products
9. Parse HTML      - browser builds the DOM from the response body
10. Fetch assets   - browser fetches CSS, JS, images referenced in the HTML
11. Render page    - DOM + CSSOM + JS produce pixels for category=shoes

MDN — URL API — How the Web Works