Kodokon kodokon.com

เว็บเซิร์ฟเวอร์ HTTP แบบเนทีฟตัวแรกของคุณ

สร้างเว็บเซิร์ฟเวอร์ด้วยโมดูล http ของ Node ตอบกลับคำขอ และคืนค่า JSON

10 นาที · 3 คำถาม

เปิดบทเรียนนี้ใน Kodokon

เว็บเซิร์ฟเวอร์ (web server) คือโปรแกรมที่ทำงานต่อเนื่องและรอ คำขอ (request) คำร้องขอที่ส่งมาจากไคลเอนต์ (เบราว์เซอร์ แอปมือถือ และอื่น ๆ) สำหรับทุกคำขอ มันจะคืน การตอบกลับ (response) บทสนทนานี้เป็นไปตามโปรโตคอล HTTP ภาษากลางของเว็บ Node มีโมดูล http ที่พร้อมใช้งานอยู่แล้ว ไม่ต้องติดตั้งอะไร แนวคิดสุดท้ายคือ พอร์ต (port) ตัวเลขที่ระบุโปรแกรมเฉพาะบนเครื่อง เหมือนหมายเลขห้องในอาคาร เราจะใช้พอร์ต 3000 ส่วน localhost นั้นหมายถึงเครื่องของคุณเองเท่านั้น

JAVASCRIPT
import http from "node:http";

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello from my server!");
});

server.listen(3000, () => {
  console.log("Server at http://localhost:3000");
});
บันทึกโค้ดนี้ใน server.js แล้วรัน node server.js

มาแยกดูทีละส่วนกัน http.createServer รับฟังก์ชันที่ถูกเรียก ในทุก ๆ คำขอ พร้อมพารามิเตอร์สองตัว คือ req (คำขอที่เข้ามา) และ res (การตอบกลับที่กำลังถูกสร้าง) res.statusCode = 200 กำหนด รหัสสถานะ (status code) โดย 200 หมายถึง "เรียบร้อยดี" res.setHeader เพิ่ม เฮดเดอร์ (header) ข้อมูลกำกับเกี่ยวกับการตอบกลับ ในที่นี้คือรูปแบบของมัน คือข้อความธรรมดา res.end ส่งการตอบกลับและปิดมัน สุดท้าย server.listen(3000) ทำให้เซิร์ฟเวอร์เริ่มรอฟังที่พอร์ต 3000 เปิด http://localhost:3000 ในเบราว์เซอร์ของคุณ ข้อความของคุณจะปรากฏขึ้น สังเกตว่าโปรแกรมไม่ได้คืนการควบคุมกลับมา มันรอคำขออยู่ หยุดมันด้วย Ctrl+C

เซิร์ฟเวอร์สมัยใหม่แทบไม่คืนข้อความธรรมดา แต่จะเปิดเผย API ที่ตอบกลับในรูป JSON รูปแบบข้อความที่คุณรู้จักอยู่แล้ว ซึ่งทุกภาษาเข้าใจได้ มีการปรับสองอย่าง คือ เฮดเดอร์ Content-Type เปลี่ยนเป็น application/json และอ็อบเจกต์ JavaScript ถูกแปลงเป็นข้อความด้วย JSON.stringify ถือโอกาสตอบสนองแตกต่างกันไปตาม req.url พาธที่ไคลเอนต์ร้องขอ นี่คือพื้นฐานของ การจัดเส้นทาง (routing)

JAVASCRIPT
import http from "node:http";

const server = http.createServer((req, res) => {
  res.setHeader("Content-Type", "application/json");

  if (req.url === "/api/message") {
    const body = { message: "Hello!", ok: true };
    res.statusCode = 200;
    res.end(JSON.stringify(body));
    return;
  }

  res.statusCode = 404;
  res.end(JSON.stringify({ error: "Not found" }));
});

server.listen(3000, () => {
  console.log("http://localhost:3000/api/message");
});
เส้นทางที่รู้จักจะตอบกลับ 200 พร้อมอ็อบเจกต์ JSON ส่วนพาธอื่นใดจะได้รับ 404

รหัสสถานะ 404 หมายถึง "ไม่พบ" พาธที่ร้องขอไม่ตรงกับเส้นทางที่รู้จักใด ๆ สังเกต return หลังการตอบกลับครั้งแรก มันหยุดไม่ให้โค้ดทำงานต่อและส่งการตอบกลับครั้งที่สอง ซึ่งจะทำให้เกิดข้อผิดพลาด ในการทดสอบ ให้เปิดที่อยู่นั้นในเบราว์เซอร์ หรือใช้ curl เครื่องมือบนบรรทัดคำสั่งที่ส่งคำขอ HTTP และแสดงการตอบกลับในเทอร์มินัล

BASH
curl http://localhost:3000/api/message
ในเทอร์มินัลที่สอง ขณะที่เซิร์ฟเวอร์กำลังทำงาน การตอบกลับ JSON จะปรากฏขึ้น

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

  1. server.listen(3000) ทำอะไร?
    • มันทำให้เซิร์ฟเวอร์เริ่มรอฟังคำขอที่พอร์ต 3000
    • มันส่งคำขอไปยังพอร์ต 3000
    • มันจำกัดเซิร์ฟเวอร์ให้รับคำขอพร้อมกันได้ 3000 คำขอ
    • มันเปิดเบราว์เซอร์ที่ localhost:3000
  2. คุณส่งเฮดเดอร์ใดเพื่อระบุว่าการตอบกลับเป็น JSON?
    • Accept: application/json
    • Content-Type: application/json
    • Format: json
  3. ทำไมต้องส่งอ็อบเจกต์ผ่าน JSON.stringify ก่อน res.end?
    • เพื่อบีบอัดการตอบกลับและประหยัดเวลา
    • เพื่อตรวจสอบว่าอ็อบเจกต์ไม่มีข้อผิดพลาด
    • เพราะการตอบกลับ HTTP บรรจุข้อความ ไม่ใช่อ็อบเจกต์ JavaScript