reveal.js

# Node.js Runtime และ Event Loop

Lesson 1 - Node.js และการโปรแกรมฝั่ง Server

**Node.js** คือ **JavaScript Runtime** ที่ทำงานบน **V8 Engine** นอกเบราว์เซอร์ ทำให้ JavaScript ใช้สร้าง Server, CLI, API และระบบ Real-time ได้ โดยจุดเด่นคือ **Single-threaded, Non-blocking I/O** ซึ่งช่วยรับงานจำนวนมากโดยไม่ต้องรอ I/O ทีละงาน

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Browser JS / Browser Era"]
 A["JavaScript ใน Browser Client-side only"]
 end
 subgraph Era2["ยุค Server JS / Node.js Era"]
 B["Node.js + V8 JS นอก Browser"]
 C["npm Ecosystem Package จำนวนมาก"]
 end
 subgraph Era3["ยุค Real-time API / Modern Backend"]
 D["Non-blocking I/O API และ Real-time"]
 E["Full-stack JS ภาษาเดียวทั้งระบบ"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **Node.js Runtime** ทำให้ JavaScript ทำงานฝั่ง Server ได้
- **Single-threaded** หมายถึง JavaScript หลักทำงานบน thread เดียว
- **Non-blocking I/O** หมายถึงไม่รอ File, Network หรือ Database ให้เสร็จก่อนรับงานอื่น
- **Event Loop** จัดคิวงานระหว่าง Call Stack, Callback Queue และ Microtask Queue
- **ลำดับ Phase หลัก** คือ Timers → I/O → Poll → Check → Close Callbacks
- **I/O-intensive** เช่น API Server และ Real-time chat เหมาะกับ Node.js
- **ตรวจเวอร์ชัน** ใช้ `node -v` และ `npm -v`

---

## ตารางเปรียบเทียบ Blocking และ Non-blocking

| รูปแบบ | ลักษณะ | ผลกระทบ | เหมาะกับ |
|---|---|---|---|
| Blocking I/O | รอให้งานเสร็จทีละงาน | ผู้ใช้ถัดไปต้องรอ | Script เล็ก ๆ |
| Non-blocking I/O | ส่งงานไปทำแล้วรับ callback/promise | รองรับ request จำนวนมาก | API Server |
| CPU-intensive | คำนวณหนัก | อาจบล็อก Event Loop | ควรใช้ Worker/Queue |

---

## Mermaid Diagram: Event Loop

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["Call Stack โค้ดที่กำลังทำงาน"] --> B["Node APIs File/Network/Timer"]
 B --> C["Microtask Queue Promise callbacks"]
 B --> D["Callback Queue Timer/I/O callbacks"]
 C --> A
 D --> A
 A --> E["Event Loop ตัวจัดคิวงาน"]
 E --> C
 E --> D
</pre>

---

## Code Example

```js
// event-loop-demo.js
// สาธิตลำดับงาน synchronous, microtask และ timer
console.log('1. start');

setTimeout(() => {
  console.log('4. timer callback');
}, 0);

Promise.resolve().then(() => {
  console.log('3. promise microtask');
});

console.log('2. end');

// ตัวอย่างการใช้งาน:
// node event-loop-demo.js
// ผลลัพธ์โดยทั่วไป:
// 1. start
// 2. end
// 3. promise microtask
// 4. timer callback
```

---

## กิจกรรมท้ายบท

- ติดตั้ง Node.js และตรวจด้วย `node -v`
- รันตัวอย่าง Event Loop
- ทดลองเพิ่ม `setTimeout` หลายค่าและสังเกตลำดับผลลัพธ์

---

## End

<a href="/web-programming/10-node-server/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>