URL คือ address ของสิ่งที่อยากได้

บทก่อนเราเข้าใจแล้วว่า client ส่ง request ไปหา server แต่ request ต้องบอกให้ได้ว่า “อยากได้อะไร” และ “จาก server ที่ไหน”ตัวที่ทำหน้าที่นี้คือ URL

เวลาเปิด browser แล้วพิมพ์อะไรใน address bar ด้านบน สิ่งที่พิมพ์นั่นคือ URL เคยสังเกตไหมว่าบาง URL มี ?q=pizza ต่อท้าย บางอันมี #sectionวันนี้เราจะแกะชิ้นส่วนของ URL ให้เห็นทุกส่วน

URL ย่อมาจากอะไร

• URL = Uniform Resource Locator
• แปลตรงตัว: ตัวระบุตำแหน่งของ resource แบบมาตรฐาน
• Resource คือสิ่งของที่อยู่บน server อาจเป็นหน้าเว็บ รูปภาพ วิดีโอ ไฟล์ PDF หรือข้อมูลในรูปแบบอื่น
• Locator แปลว่า “ตัวระบุตำแหน่ง” บอกว่า resource นั้นอยู่ที่ไหนบน internet

Mental model: URL คือ “ที่อยู่บ้าน”

ลองนึกถึงที่อยู่ของบ้าน เช่น “123 ถนนสุขุมวิท แขวงคลองเตย เขตวัฒนา กรุงเทพ”ที่อยู่ประกอบด้วยหลายชิ้น เลขที่บ้าน ถนน แขวง เขต จังหวัด แต่ละชิ้นทำหน้าที่ต่างกัน URL ก็เหมือนกัน ประกอบด้วยหลายส่วนที่ทำหน้าที่ต่างกัน

ลองแกะ URL ดูทีละชิ้น

ลองใช้ URL ของแอพกาแฟเป็นตัวอย่าง

6 ส่วนของ URL

1. Scheme (โปรโตคอล)

• ตัวอย่าง: https://, http://
• บอกว่าจะใช้ protocol ไหนคุยกับ server
• ส่วนใหญ่เจอ https:// (เข้ารหัส) หรือ http:// (ไม่เข้ารหัส)
• ลงท้ายด้วย :// เสมอ เป็นตัวคั่น

2. Host (ชื่อ server)

• ตัวอย่าง: api.coffeeshop.com, google.com, facebook.com
• บอกว่าจะไปคุยกับ server เครื่องไหน
• ส่วนที่อยู่หน้า .com เรียกว่า domainส่วนที่อยู่หน้า domain เรียกว่า subdomain เช่น api หรือ www
• internet จะแปล domain เป็นเลข IP ของ computer ปลายทางให้อัตโนมัติ ผ่านระบบ DNS (เหมือนสมุดโทรศัพท์)

3. Port (ประตูเข้า server)

• ตัวอย่าง: :443, :8080, :3000
• Server 1 เครื่องอาจเปิดบริการหลายอย่างพร้อมกัน port จึงเป็นหมายเลขที่บอกว่า request นี้เข้าประตูไหน เหมือนห้องในอาคารเดียวกัน
• ค่า default: http ใช้ port 80, https ใช้ 443ถ้าตรง default ไม่ต้องเขียนลงใน URL
• นั่นคือเหตุผลว่าทำไม URL ปกติไม่เห็น port แต่เวลา dev ใน local มักเห็น :3000 หรือ :8080

4. Path (ทางไปหา resource)

• ตัวอย่าง: /menu/americano, /users/42, /search
• ขึ้นต้นด้วย / เสมอ
• บอกว่าอยากได้ resource อะไรบน server นั้น/menu = หน้าเมนูทั้งหมด, /menu/americano = รายละเอียดของอเมริกาโน่
• ความหมายของ path กำหนดโดย server แต่ละที่จะออกแบบ path เอง

5. Query string (พารามิเตอร์เพิ่มเติม)

• ตัวอย่าง: ?size=large&sugar=0&ice=extra
• ขึ้นต้นด้วย ?
• เป็นคู่ key=value คั่นด้วย & จะมีกี่คู่ก็ได้
• ใช้ส่ง option เสริมที่ไม่ควรอยู่ใน path เช่น filter, sort, pagination, search term
• ตัวอย่าง: /menu?category=cold = ขอเฉพาะเมนูเย็น, /search?q=latte = search คำว่า latte

6. Fragment (ตำแหน่งในหน้า)

• ตัวอย่าง: #ingredients, #section-2
• ขึ้นต้นด้วย #
• บอก browser ให้ scroll ไปตำแหน่งนั้นในหน้าโดยอัตโนมัติ
• ข้อพิเศษ: fragment ไม่ถูกส่งไปยัง server browser ใช้เองภายใน นั่นคือสาเหตุว่าทำไม link ที่ต่างแค่ # ไม่ทำให้โหลดหน้าใหม่

ลองต่อ URL ด้วยตัวเอง

ลองเล่น widget ด้านล่าง เปลี่ยนแต่ละส่วนแล้วดูว่า URL เปลี่ยนยังไง

ตัวอย่างจากแอพกาแฟของเรา

• https://coffeeshop.com/ หน้าแรก
• https://coffeeshop.com/menu ดูเมนูทั้งหมด
• https://coffeeshop.com/menu/americano ดูรายละเอียดอเมริกาโน่
• https://coffeeshop.com/menu?category=cold&max_price=150 เมนูเย็นราคาไม่เกิน 150
• https://coffeeshop.com/menu/americano#reviews scroll ไปดู review
• https://coffeeshop.com/orders/12345 ดู order หมายเลข 12345

คำศัพท์จากบทนี้

• URL ที่อยู่ของ resource บน internet
• Scheme protocol ที่จะใช้ เช่น http, https
• Host ชื่อ server เช่น coffeeshop.com
• Domain / Subdomain ชื่อยี่ห้อและแผนก (www, api)
• Port ประตูเข้า server เช่น 443, 80
• Path ทางไปหา resource เช่น /menu/americano
• Query string พารามิเตอร์เพิ่มเติม เช่น ?size=large
• Fragment จุดใน page เช่น #reviews (browser ใช้เอง)
• DNS ระบบแปลง domain เป็น IP address

สรุป

• URL ประกอบด้วย 6 ส่วน: scheme, host, port, path, query, fragment
• Scheme + Host + Port บอกว่าไปคุยกับ server ไหน
• Path บอกว่าอยากได้ resource อะไร
• Query string ส่ง option เพิ่ม (filter, search, sort)
• Fragment บอก browser ให้ scroll ไปไหน server ไม่เห็น
• ตัวพิเศษใน URL ต้องถูก encode ก่อนส่ง browser ช่วยทำให้เกือบทั้งหมด

ตอนนี้เรารู้แล้วว่า URL คือที่อยู่ของสิ่งที่อยากได้ request ชี้ไปที่ URL ได้แล้ว แต่ request จริงๆ ที่ส่งไปหาหน้าตาเป็นยังไง? บทถัดไปเราจะแกะ โครงสร้างของ message ที่ client-server ใช้คุยกัน ทั้ง request และ response มีรูปแบบที่แน่นอน พอเห็นครั้งเดียวจำได้ตลอดชีวิต