เริ่มต้นการใช้งาน NodeJs เพื่อพัฒนา Web Server เบื้องต้น

เขียนเมื่อ 5 ปีก่อน โดย Ninenik Narkdee
web server npm nodejs node

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ web server npm nodejs node

ดูแล้ว 16,762 ครั้ง


หลายคนคงรู้จัก NodeJs บางคนก็อาจจะใช้งานมาสักพักใหญ่แล้ว
บทความต่อไปนี้ เราจะมาลองศึกษา NodeJs กัน โดยเราจะใช้
Visual Studio Code เป็น Editor Code สำหรับพัฒนา NodeJs ซึ่งเป็น
รูปแบบการพัฒนาโปรแกรมด้วย JavaScript รูปแบบหนึ่ง ใครยังไม่มีติดตั้งบนเครื่อง
ก็สามารถเข้าไปดาวน์โหลด และติดตั้งได้ที่ https://code.visualstudio.com/
    และจะขอเรียกชื่อย่อสั้นว่า VSCode โดยตัว VSCode นั้น จะมีส่วนของการทำงานของ
Command line ผ่านส่วนที่เรียกว่า Terminal ทำให้เราสามารถใช้งาน CLI ผ่านตัวโปรแกรมได้เลย
 
    ต่อไปให้เราติดตั้งโปรแกรม NodeJs คิดว่าส่วนใหญ่น่าจะเคยติดตั้งไว้แล้ว ก็สามารถเข้าไปดาวน์โหลด
และอัพเดทเป็นเวอร์ชั่นใหม่ๆ ได้ โดยเข้าไปที่  https://nodejs.org/en/
    เข้าไปและดาวน์โหลดเวอร์ชั่นที่ลงท้ายด้วย LTS
 
    หลังติดตั้งทั้งสองส่วนด้านบนเรียบร้อยแล้ว เราก็เปิดโปรแกรม VSCode แล้วเปิดหน้าต่าง Terminal 
โดยสามารถเลือกเมนู View > Terminal (ถ้าไม่เห็นเมนู  View ให้กด Alt ) 
    พิมพ์คำสั่งแสดง เวอร์ชั่น เพื่อทดสอบว่า เราได้ทำการติดตั้ง NodeJs เรียบร้อยแล้วหรือไม่ไดยใช้คำสั่ง
    node -v และ npm -v ตามรูปด้านล่าง  ซึ่งหากแสดงเวอร์ชั่นออกมา ก็แสดงว่าเราพร้อมใช้งาน NodeJs แล้ว
 

 
 

NodeJs คืออะไร

NodeJs เป็นรูปแบบการทำงานของ JavaScript ที่เป็น asynchronous event driven หรือก็คือการพิจารณา
ทำคำสั่งใดๆ ให้ขึ้นกับเหตุการณ์หรือ Event ที่กำหนด โดยไม่จำเป็นต้องประสานต่อเนื่องกันตามลำดับ
ตัวอย่างการทำงานแบบ synchronous และ asynchronous 
    แบบ synchronous 
        ส่งข้อมูลไปประมวลผลที่ server -> รอข้อมูลจนกว่าข้อมูลจะถูกส่งกลับ ->ข้อมูลส่งกลับมา 
-> นำข้อมูลไปแสดง -> *(ทำงานคำสังถัดไป) แบบนี้ตามลำดับไปอย่างต่อเนื่อง 
    แบบ asynchronous 
        ส่งข้อมูลไปประมวลผลที่ server ->แล้วรอข้อมูล -> *(ในขณะเดียวกันทำงานคำสังถัดไปเลย) 
-> ข้อมูลส่งกลับจาก server ->นำข้อมูลไปแสดง

 

Blocking และ Non-Blocking

ใน NodeJs จะเรียกรูปแบบการทำงานทั้งสองว่า Blocking และ Non-Blocking ตามลำดับ
    Blocking คือ การทำคำสั่ง JavaScript เพิ่มเติมใดๆ จะต้องรอจนกว่า การดำเนินการที่ไม่ใช่
ส่วนของ JavaSript จะแล้วเสร็จ อย่างในรูปแบบตัวอย่าง synchronous ด้านบนที่ การประมวลผล
ที่ฝั่ง server คือการดำเนินการที่ไม่ใช่ JavaScript ที่เราต้องรอข้อมูลส่งกลับมาก่อน ถึงจะทำคำสั่ง
JavaScript ในลำดับถัดไปได้
    ดูตัวอย่างเปรียบเทียบ blocking และ non-blocking จากตัวอย่างโค้ดด้านล่าง
 
ตัวอย่างการใช้ File System mudule ในรูปแบบ synchronous file read
 
const fs = require('fs'); // เรียกใช้ file system module 
const data = fs.readFileSync('/file.md'); // block หรือ รอจนกว่าจะอ่านไฟล์เรียบร้อย
console.log(data);
moreWork(); // ทำงานหลังคำสั่ง console.log
กรณีแรกนี้คำสั่ง console.log จะทำงานก่อน moreWork() 
 
และในรูปแบบ asynchronous 
 
const fs = require('fs'); // เรียกใช้ file system module 
fs.readFile('/file.md', (err, data) => {
  if (err) throw err;
  console.log(data);
});
moreWork(); // will run before console.log
กรณีที่สองคำสั่ง fs.readFile() จะเป็นแบบ non-blocking มีการใช้งาน callback function
หรือก็คือ กำหนดฟังก์ชั่น เมื่อทำการอ่านข้อมูลเรียบร้อยแล้ว นั่นหมายความว่า เราไม่จำเป็นต้อง
รอให้ข้อมูลอ่านเสร็จเรียบร้อย ก็สามารถทำคำสั่ง JavaScript ในลำดับถัดไปซึ่งก็คือ moreWork() ได้เลย
 
 

เริ่มต้นสร้าง Web Server ด้วย NodeJs

    เราจะสร้าง project การทำงานของ NodeJs ไว้ในโฟลเดอร์ C: > projects > nodejs หรือใครจะกำหนด
ไว้ในโฟลเดอร์ใดๆ ก็ได้ตามสะดวก  ให้เราสร้างไฟล์ app.js และ copy โค้ดด้านล่างไปไว้ในไฟล์
 
ไฟล์ app.js
 
const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
 
และพิมพ์ node app.js (รูปแบบ node [ชื่อไฟล์ js] มีหรือไม่มีนามสกุล js ก็ได้ เช่น node app) 
แล้วกด Enter เพื่อทำการ run web server เราก็จะได้เว็บที่เราสร้างด้วย NodeJs ที่สามารถเรียกดูได้ที่ http://localhost:3000/ ผ่านบราวเซอร์
จะได้ผลลัพธ์ดังรูป

 


 
 
ก็จะแสดงคำว่า Hello World ออกมาทางหน้าเพจ 
    ทีนี้ให้เราแก้ไขไฟล์ app.js โดยเปลี่ยนเป็นคำว่า Good Bye
 
res.end('Good Bye\n');
เมื่อแก้ไขไฟล์ทุกครั้ง เราต้องทำการรันคำสั่ง node app.js ทุกครั้ง ในหน้าต่าง Terminal ให้เรากด
Ctrl+C เพื่อปิด server และรันคำสั่งใหม่
 
 


 
 
รีโหลดหน้าบราวเซอร์ใหม่อีกครั้ง เราก็จะได้คำว่า Good Bye แสดงออกมาทางหน้าเพจ 
 
จะเห็นว่าไม่สะดวกมากนัก ถ้าเราต้องคอยกดรันคำสั่ง node app.js ทุกครั้งที่มีการแก้ไขไฟล์ ดังนั้น
เราจึงจำเป็นต้องใช้ตัวช่วย ที่เรียกว่า nodemon โดย Nodemon จะเป็นเครื่องมือที่ใช้สำหรับตรวจจับการเปลี่ยน
แปลงที่เกิดขึ้นในโค้ด และทำการ restart server ให้เราอัตโนมัติ https://nodemon.io/
    โดยให้เราทำการติดตั้งผ่าน npm ด้วยคำสั่ง
 
 

 
 
npm install -g nodemon
สังเกตว่าเรามีการเติมคำว่า -g เข้าไปในคำสั่ง นั่นคือ เป็นการติดตั้งแบบ global สามารถเรียกใช้คำสั่งนี้ผ่าาน
โฟลเดอร์ใดๆ ก็ได้ ไม่จำเป็นต้องเป็นโฟลเดอร์โปรเจ็ค ที่เราทำงานอยู่ (C:\projects\nodejs>) 
ข้อสังเกตอีกอย่างก็คือ หลังติดตั้ง จะไม่มีโฟลเดอร์ node_modules ขึ้นมาในโปรเจ็คของเรา แต่ถ้าเราอยาก
ติดตั้งไว้ในใช้งานเฉพาะในโปรเจ็คของเรา ก็สามารถใช้คำสั่ง 
 
npm install --save-dev nodemon
แทนได้ ในที่นี้เราจะใช้เป็นแบบแรก
 
ต่อไป หลังจากติดตั้ง nodemon เรียบร้อยแล้ว เราก็ทดสอบเรียกใช้งาน ซึ่งวิธีการก็คล้ายๆ รูปแบบเดิมคือ
nodemon app.js (nodemon [ชื่อไฟล์ js] มีหรือไม่มีนามสกุล js ก็ได้ เช่น nodemon app)
 
 


 
 
จะเห็นว่าทุกครั้งที่เราแก้ไขไฟล์ แล้วกดบันทึก ตัว nodemon ก็จะทำการ restart server ให้เรา หลังจากแก้ไข
ไฟล์ เราสามารถกดรีโหลดหน้าบราวเซอร์เพื่อดูผลลัพธ์ได้เลย โดยไม่ต้องมานั่งพิมพ์ คำสั่งรัน server ใหม่ทุกครั้ง
และหากเราต้องการจบการทำงาน ก็กด Ctrl+C เพื่อกลับมาหน้ารับคำสั่ง command line 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ