เรามาพูดถึงวิธีสร้างเซิร์ฟเวอร์ HTTP อย่างง่ายโดยใช้ Node.js

1. ใช้ Node.js เพื่อรันสคริปต์ JavaScript โดยตรง

node.js ขึ้นอยู่กับเอ็นจิ้น v8 ของ Chrome เพื่อรันโค้ด js ดังนั้นเราจึงสามารถกำจัดสภาพแวดล้อมของเบราว์เซอร์และรันโค้ด js ได้โดยตรงในคอนโซล เช่น hello world ต่อไปนี้ hello world code

console.log('hello world');

คุณสามารถรันได้โดยตรงโดยใช้ node ในคอนโซล

2. สร้างเซิร์ฟเวอร์ HTTP แบบง่าย

http ในตัวของ node.js มีความสามารถด้านบริการ http ขั้นพื้นฐาน ตามข้อกำหนด CommonJS เราสามารถใช้ require เพื่อนำเข้าโมดูล http เพื่อใช้งาน มีฟังก์ชัน createServer ใน http โมดูลที่ช่วยให้เราสามารถสร้าง http เซิร์ฟเวอร์ได้รับฟังก์ชันการโทรกลับเป็นพารามิเตอร์ ฟังก์ชันการโทรกลับนี้ได้รับพารามิเตอร์สองตัว - request response

• request url header เนื้อหาคำขอ การ
• response ส่วนใหญ่จะใช้เพื่อส่งคืนข้อมูลไปยังไคลเอนต์สรุปการดำเนินการบางอย่างที่เกี่ยวข้องกับเนื้อหาการตอบสนอง ตัวอย่างเช่น วิธี response.writeHead ช่วยให้เราปรับแต่งข้อมูลส่วนหัวและรหัสสถานะของเนื้อหาที่ส่งคืน

ได้ เนื้อหาการตอบกลับเราเรียกเมธอด response.end() คุณสามารถส่งเนื้อหาการตอบกลับไปยังไคลเอนต์ได้ การใช้ฟังก์ชัน createServer จะสร้างเฉพาะวัตถุ Server สำหรับเราเท่านั้น แต่ไม่ได้เปิดใช้งานเพื่อฟัง listen Method ของ server ที่จะ Listen เราสามารถเริ่มรัน

• listen Method ในฐานะเซิร์ฟเวอร์ได้ พารามิเตอร์แรกคือหมายเลขพอร์ตการฟัง พารามิเตอร์ตัวที่สองคือ ip ของโฮสต์ที่ถูกผูกไว้ และพารามิเตอร์ที่สามคือฟังก์ชันการโทรกลับที่จะเป็น

ยกเว้น

• http ส่งมาจากพารามิเตอร์แรกของฟังก์ชันการโทรกลับ เราสามารถเลือกที่จะจัดการข้อยกเว้นเพื่อทำให้เซิร์ฟเวอร์ของเราแข็งแกร่งยิ่งขึ้น

ใช้โมดูล http เพื่อสร้างเซิร์ฟเวอร์อย่างง่าย

const { createServer } = need('http' );
constHOST = 'localhost';
const พอร์ต = '8080';

เซิร์ฟเวอร์ const = createServer((req, resp) => {
  // พารามิเตอร์แรกคือรหัสสถานะที่ส่งคืน  
  // และพารามิเตอร์ตัวที่สองคือข้อมูลส่วนหัวของการตอบกลับ
  resp.writeHead(200, { 'ประเภทเนื้อหา': 'ข้อความ/ธรรมดา' });  
  
  console.log('เซิร์ฟเวอร์กำลังทำงาน...');  
  
  // วิธีการวางสายเพื่อแจ้งให้เซิร์ฟเวอร์ทราบว่าคำขอได้รับการตอบสนองแล้ว
  resp.end('สวัสดี nodejs http เซิร์ฟเวอร์');
-

server.listen (พอร์ต, โฮสต์, (ข้อผิดพลาด) => {  
ถ้า (ข้อผิดพลาด) {  
  console.log('มีบางอย่างผิดปกติ:', ข้อผิดพลาด);   
   กลับ;
  -  
  console.log(`เซิร์ฟเวอร์กำลังฟังบน http://${HOST}:${PORT} ...`);
});

คุณสามารถลองรันด้วย node และสร้างเซิร์ฟเวอร์ของคุณเองได้โดยตรง! หลังจากที่เซิร์ฟเวอร์ทำงาน เบราว์เซอร์จะสามารถเข้าถึงเซิร์ฟเวอร์ได้โดยการเข้าถึง http://localhost:8080

คุณยังสามารถใช้ nodemon เพื่อรันมันได้ ดังนั้นเมื่อโค้ดของเราเปลี่ยนแปลง เราไม่จำเป็นต้องยุติโปรแกรมด้วยตนเองและรัน

npm i -g nodemon

ครั้ง ขอแนะนำให้ติดตั้งมันทั่วโลกเพื่อให้คุณสามารถใช้งานได้โดยตรง โดยไม่ต้องใช้ npx nodemon นอกจากนี้ยังง่ายมากเพียงเปลี่ยนคำสั่ง node เป็นคำสั่ง nodemon

nodemon http-server.js

3. เพิ่ม type prompts

เมื่อเราใช้ createServer และ resp object ก่อนหน้านี้ เราไม่เห็น syntax prompts ใดๆ เลย เราต้องปฏิบัติตามเอกสารประกอบ node อย่างเป็นทางการเพื่อตรวจสอบได้ตลอดเวลา มันไม่สะดวกสักหน่อย สามารถใช้ .d.ts ช่วยให้เราจัดเตรียมฟังก์ชันพร้อมต์ไวยากรณ์ โปรดทราบว่าเราไม่ได้ใช้ ts เพื่อการพัฒนา แต่ใช้ฟังก์ชันพร้อมต์ไวยากรณ์

1. เพื่อเริ่มต้นโปรเจ็กต์เท่านั้น -- npm init -y
2. install @types/node -- pnpm i @types/node -D
3. สร้างไฟล์ jsconfig.json ในไดเร็กทอรีโปรเจ็กต์ ไม่รวม node_modules ไม่จำเป็นต้องตรวจสอบ

{ "compilerOptions": {
    "checkJs": จริง
  -  
  "แยก": ["node_modules", "**/node_modules/*"]
}

ฉันสงสัยว่าคุณได้ค้นพบว่ามีข้อผิดพลาดในโค้ดข้างต้นหรือไม่? checkJs สามารถช่วยเราตรวจสอบข้อผิดพลาดประเภทได้ คุณสามารถเลือกได้ว่าจะเปิดตามความต้องการของคุณหรือไม่ หลังจากเปิดการตรวจสอบแล้ว ระบบจะแจ้งเราทันทีเกี่ยวกับประเภทพารามิเตอร์ที่ไม่ตรงกัน

ในขณะนี้ ให้เลื่อนเมาส์ไปเหนือวิธี listen และคุณจะเห็นลายเซ็นของวิธีการดังกล่าว

อย่างที่คุณเห็น พารามิเตอร์ port ดั้งเดิมจะต้องเป็นประเภท number แต่เมื่อเรากำหนดไว้ มันเป็นประเภท string ดังนั้นจึงไม่ตรงกัน เพียงเปลี่ยนเป็น 8080 ของ number และคุณสามารถดูเอกสาร api ที่เกี่ยวข้องได้โดยตรง โดยไม่ต้องเปิด node อย่างเป็นทางการ ฉันใช้เวลานานในการค้นหาเอกสารและตรวจสอบ

4. ส่งคืนเนื้อหาการตอบกลับของสตริงหลายรายการ

http server แบบธรรมดาของเราส่งคืนประโยคเดียวเท่านั้น เป็นไปได้ไหมที่จะส่งคืนหลายประโยค สิ่งนี้ต้องใช้วิธี write ของวัตถุ resp end สามารถส่งคืนเนื้อหา write เพียงครั้งเดียว แต่เราสามารถเขียนเนื้อหา end ในเนื้อหาการตอบกลับได้หลายครั้ง ส่งพารามิเตอร์ใด ๆ ให้เขาทำหน้าที่ส่งเนื้อหาการตอบกลับ

const { createServer } = need("http");
constHOST = "localhost";
const พอร์ต = 8080;

เซิร์ฟเวอร์ const = createServer((req, resp) => {
  resp.writeHead(200, { "ประเภทเนื้อหา": "ข้อความ/ธรรมดา" });  
  console.log("เซิร์ฟเวอร์กำลังทำงาน...");  
  
  // เขียนประโยคลอเร็มบางส่วน
  resp.write("Lorem ipsum dolor นั่ง amet consectetur adipisicing elit.n");
  resp.write("Omnis eligendi aperiam delectus?n");
  resp.write("Aut, quam quo!n");

  ตอบกลับสิ้นสุด();
-

server.listen (พอร์ต, โฮสต์, (ข้อผิดพลาด) => {
  ถ้า (ข้อผิดพลาด) {    
  console.log("มีบางอย่างผิดปกติ: ", ข้อผิดพลาด);    
  กลับ;
  -  
  console.log(`เซิร์ฟเวอร์กำลังฟังบน http://${HOST}:${PORT} ...`);
});

คราวนี้เราเขียนไปสามประโยค และตอนนี้เอฟเฟกต์ก็กลายเป็นแบบนี้

5. การส่งคืน html

เราไม่เพียงสามารถส่งคืนสตริงไปยังเบราว์เซอร์เท่านั้น แต่ยังอ่านเนื้อหาของไฟล์ html โดยตรงและส่งคืนไปยังเบราว์เซอร์ด้วยเหตุนี้จึงต้องใช้โมดูลในตัว Node.js อื่น - fs ซึ่งโมดูลมีฟังก์ชันการทำงานของไฟล์ คุณสามารถใช้ fs.readFile เพื่ออ่านไฟล์แบบอะซิงโครนัสได้ แต่จะไม่ส่งคืนอ็อบเจ็กต์ promise ดังนั้นเราจึงจำเป็นต้องส่งผ่านการโทรกลับเพื่อจัดการการดำเนินการหลังจากอ่านไฟล์คุณ นอกจากนี้ยังสามารถใช้ fs.readFileSync การบล็อกการอ่านไฟล์แบบซิงโครนัส ที่นี่เราเลือกการอ่านแบบอะซิงโครนัส

const { createServer } = need("http");
const fs = ต้องการ("fs");
constHOST = "localhost";

const PORT = 8080; เซิร์ฟเวอร์ const = createServer ((req, resp) => {
  // เปลี่ยนประเภท MIME จาก text/plain เป็น text/html
  resp.writeHead(200, { "ประเภทเนื้อหา": "ข้อความ/html" });  
  
  // อ่านเนื้อหาไฟล์ html
  fs.readFile("index.html", (ผิดพลาด, ข้อมูล) => { 
     ถ้า (ผิดพลาด) {  
      คอนโซล.ข้อผิดพลาด(      
        "เกิดข้อผิดพลาดขณะอ่านเนื้อหาไฟล์ html:",
        ผิดพลาด
      ); โยนผิด;
    -    
    console.log("การดำเนินการสำเร็จ!");

    resp.write(ข้อมูล);
    ตอบกลับสิ้นสุด();
  -
-

server.listen (พอร์ต, โฮสต์, (ข้อผิดพลาด) => {
  ถ้า (ข้อผิดพลาด) {    
  console.log("มีบางอย่างผิดปกติ: ", ข้อผิดพลาด);    
  กลับ;
  -  
  console.log(`เซิร์ฟเวอร์กำลังฟังบน http://${HOST}:${PORT} ...`);
});

ผลลัพธ์ปัจจุบันจะเป็นดังนี้:

ส่งคืน html สำเร็จ หมายเหตุ: ที่นี่คุณต้อง เปลี่ยน **Content-Type** ของส่วนหัวการตอบกลับ เป็น **text/html** เพื่อแจ้งให้เบราว์เซอร์ทราบว่าเรากำลังส่งคืน เนื้อหาของ ไฟล์ **html** หากคุณยังคงใช้ **text/plain** เบราว์เซอร์จะไม่แยกวิเคราะห์เนื้อหาที่ส่งคืน แม้ว่าจะสอดคล้องกับ ไวยากรณ์ **html** แต่ก็จะไม่ถูกแยกวิเคราะห์ เช่นเดียวกับต่อไปนี้:

6. Return JSON

เมื่อเราต้องการเขียนเซิร์ฟเวอร์แบ็คเอนด์ที่รับผิดชอบในการส่งคืนข้อมูลอินเทอร์เฟซเท่านั้น เราจำเป็นต้องส่งคืนเนื้อหาในรูปแบบ json ฉันเชื่อว่าคุณฉลาดและรู้วิธีจัดการ:

1. ตั้งค่าประเภท MIME เป็น application/json
2. resp.write สตริง json จะถูกส่งผ่านไป คุณสามารถใช้ JSON.stringify เพื่อประมวลผลอ็อบเจ็กต์และส่งคืน

const { createServer } = need("http");
constHOST = "localhost";
const พอร์ต = 8080;

เซิร์ฟเวอร์ const = createServer((req, resp) => { 
 // เปลี่ยนประเภท MIME เป็น application/json
  resp.writeHead(200, { "ประเภทเนื้อหา": "application/json" });  
  
  // สร้างข้อมูล json โดยใช้วัตถุ  
  const jsonDataObj = {
      รหัส: 0,    
      ข้อความ: "ความสำเร็จ",    
      ข้อมูล: {  
          ชื่อ: "ดินน้ำมัน"      
          อายุ: 20,      
          งานอดิเรก: "เขียนโค้ด",
    -
  -

  resp.write(JSON.stringify(jsonDataObj));
  ตอบกลับสิ้นสุด();
-

server.listen (พอร์ต, โฮสต์, (ข้อผิดพลาด) => {
  ถ้า (ข้อผิดพลาด) { 
     console.log("มีบางอย่างผิดปกติ: ", ข้อผิดพลาด);    
     กลับ;
  -  
  console.log(`เซิร์ฟเวอร์กำลังฟังบน http://${HOST}:${PORT} ...`);
});

ผลลัพธ์มีดังนี้:

7.

แนวคิดในการส่งคืนไฟล์ pdf นั้นคล้ายกับการส่งคืนไฟล์ html มาก่อน เป็นทั้งกระบวนการตั้งค่าประเภท MIME ของส่วนหัวการตอบกลับ การอ่านไฟล์ และการส่งคืนเนื้อหาไฟล์ แต่ครั้งนี้เราทำ แนวคิดของเราคือทำในขณะที่เซิร์ฟเวอร์กำลังทำงานอยู่ หากต้องการสร้างไฟล์ pdf และส่งคืน คุณต้องเปลี่ยนประเภท MIME เป็น application/pdf หากต้องการสร้างไฟล์ pdf คุณต้องใช้ไลบรารี - pdfkit

pnpm i pdfkit

ก่อนอื่นเราเขียนฟังก์ชันเพื่อสร้างไฟล์ pdf เนื่องจากการสร้างไฟล์ pdf ยังต้องมีการดำเนินการเขียนบางอย่างซึ่งไม่แน่ใจว่าจะเสร็จสมบูรณ์เมื่อใด แต่คำขอของเราต้องรอจนกว่าไฟล์ pdf จะถูกสร้างขึ้นก่อนจึงจะสามารถทำได้ ได้รับการตอบกลับ ดังนั้นเราจึงต้องทำให้เป็นแบบอะซิงโครนัสและคืน promise

/**
 * @description สร้างไฟล์ pdf */const createPdf = () => {
   คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
       ถ้า (!fs.existsSync("example.pdf")) {      
       // สร้างวัตถุ PDFDocument      
       const doc = PDFDocument ใหม่ ();
       
       // สร้างกระแสการเขียนโดยการไพพ์เนื้อหา pdf
       doc.pipe(fs.createWriteStream("example.pdf"));   
        
      // เพิ่มเนื้อหาบางส่วนลงในเอกสาร pdf
      doc.fontSize(16).text("สวัสดี PDF", 100, 100);   
         
      // เสร็จสิ้นการดำเนินการสร้างไฟล์ PDF
      doc.end();
    -

    แก้ไข ("ความสำเร็จ");
  -
};

การดำเนินการไปป์ไลน์ถูกใช้ที่นี่เพื่อถ่ายโอนเนื้อหาของออบเจ็กต์ PDFDocument ไปยังสตรีมการเขียนที่สร้างขึ้นใหม่ผ่านไปป์ไลน์ เมื่อการดำเนินการเสร็จสิ้น เราจะแจ้งให้โลกภายนอกทราบผ่าน resovle ว่ามีการสร้างไฟล์ pdf แล้วจึงเรียก

const เซิร์ฟเวอร์ในรหัสเซิร์ฟเวอร์ = createServer(async (req, resp) => {
  // เปลี่ยนประเภท MIME เป็น application/pdf
  resp.writeHead(200, { "ประเภทเนื้อหา": "application/pdf" });  
  
  // สร้างไฟล์ pdf  
  รอ createPdf();  
  
  // อ่านไฟล์ pdf ที่สร้างขึ้น
  fs.readFile("example.pdf", (ผิดพลาด, ข้อมูล) => {
      ถ้า (ผิดพลาด) { 
       คอนโซล.ข้อผิดพลาด(        
        "เกิดข้อผิดพลาดขณะอ่านเนื้อหาไฟล์ pdf: ",
        ผิดพลาด
      -      
      โยนผิดพลาด;
    -    
    console.log("การดำเนินการสำเร็จ!");

    resp.end(ข้อมูล);
  -
-

server.listen (พอร์ต, โฮสต์, (ข้อผิดพลาด) => {
  ถ้า (ข้อผิดพลาด) {
      console.log("มีบางอย่างผิดปกติ: ", ข้อผิดพลาด);    
      กลับ;
  -  
  console.log(`เซิร์ฟเวอร์กำลังฟังบน http://${HOST}:${PORT} ...`);
});

ขณะนี้เบราว์เซอร์สามารถอ่านไฟล์ pdf ที่สร้างขึ้นได้

8. แนวคิดในการส่งคืนไฟล์เสียง

ยังคงเหมือนเดิม อ่านไฟล์เสียง แล้วส่งไปยังวัตถุ resp ผ่านทางไปป์ไลน์แล้วส่ง

คืน
const { stat, createReadStream } = ต้องการ ("fs");
constHOST = "localhost";
const พอร์ต = 8080;

เซิร์ฟเวอร์ const = createServer((req, resp) => {
  // เปลี่ยนประเภท MIME เป็น audio/mpe
  resp.writeHead(200, { "ประเภทเนื้อหา": "เสียง/mp3" });  
  const mp3FileName = "audio.mp3";

  สถิติ (mp3FileName, (ผิดพลาด, สถิติ) => {
    ถ้า (stats.isFile()) {      
      const rs = createReadStream(mp3FileName);      
      
      // ไพพ์สตรีมการอ่านเพื่อตอบสนอง
      rs.pipe(ตอบกลับ);
    } อื่น {
      resp.end("ไม่มีไฟล์ mp3");
    -
  -
-

server.listen (พอร์ต, โฮสต์, (ข้อผิดพลาด) => {
  ถ้า (ข้อผิดพลาด) {    
  console.log("มีบางอย่างผิดปกติ: ", ข้อผิดพลาด);    
  กลับ;
  -  
  console.log(`เซิร์ฟเวอร์กำลังฟังบน http://${HOST}:${PORT} ...`);
});

เอฟเฟกต์มีดังนี้

หลังจากเปิดขึ้นมาจะมีอินเทอร์เฟซสำหรับเล่นเสียง นี่คือการแสดงไฟล์เสียงที่มาจาก chrome เมื่อคุณเปิดคอนโซลคุณจะพบว่ามีไฟล์เสียงกลับมา

หมายเหตุ: หลังจากส่งสตรีมไฟล์เสียงไปยัง **resp** ผ่านไพพ์ แล้ว ไม่จำเป็นต้องเรียกใช้ เมธอด **resp.end()** เนื่องจากจะเป็นการปิดการตอบกลับทั้งหมดและทำให้ไฟล์เสียงเสียหาย ไม่พร้อมใช้งาน

9. ส่งคืนไฟล์วิดีโอ

การประมวลผลไฟล์วิดีโอและไฟล์เสียงจะเหมือนกัน ยกเว้นว่าจะต้องเปลี่ยนประเภท MIME เป็น video/mp4 ส่วนอย่างอื่นจะเหมือนกัน

const { createServer } = need("http");
const { stat, createReadStream } = ต้องการ ("fs");
constHOST = "localhost";
const พอร์ต = 8080;
เซิร์ฟเวอร์ const = createServer((req, resp) => {  
// เปลี่ยนประเภท MIME เป็น audio/mpe
  resp.writeHead(200, { "ประเภทเนื้อหา": "เสียง/mp4" });  
  const mp4FileName = "วิดีโอ.mp4";

  สถิติ (mp4FileName, (ผิดพลาด, สถิติ) => { 
     ถ้า (stats.isFile()) {      
     const rs = createReadStream(mp4FileName);      
     // ไพพ์สตรีมการอ่านเพื่อตอบสนอง
      rs.pipe(ตอบกลับ);
    } อื่น {
      resp.end("ไม่มีไฟล์ mp4");
    -
  -
-

server.listen (พอร์ต, โฮสต์, (ข้อผิดพลาด) => { 
 ถ้า (ข้อผิดพลาด) {    
 console.log("มีบางอย่างผิดปกติ: ", ข้อผิดพลาด);    
 กลับ;
  -  
  console.log(`เซิร์ฟเวอร์กำลังฟังบน http://${HOST}:${PORT} ...`);
-

โดยสรุป

เราได้เรียนรู้:

• html
ใช้ Node เพื่อ
• สร้าง
• Node http
• JSON
• pdf
• คำแนะนำประเภทให้กับ js
• วิธีคืนเนื้อหาการตอบสนองของสตริง
• กลับไฟล์เสียง
• วิธีการคืนไฟล์วิดีโอ

แม้ว่าเนื้อหาจะเรียบง่าย แต่ฉันก็ยังหวังว่าคุณจะทำตามและลองดูสิ อย่าคิดว่ามันง่ายเลย ไม่ได้หมายความว่าคุณรู้ คุณจะพบกับปัญหาของคุณเองหลังจากที่คุณนำไปใช้จริงเท่านั้น