reveal.js

# RxJS เบื้องต้น: Observable, Subject, BehaviorSubject

Lesson 4 - Angular Service, DI และการเชื่อมต่อ API

**RxJS** คือ Library สำหรับจัดการข้อมูลแบบ Stream ใน JavaScript ส่วน **Observable** คือแหล่งข้อมูลที่ปล่อยค่าออกมาเป็นลำดับและให้ผู้สนใจ Subscribe เพื่อรับค่าได้

---

## 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["ยุค Callback / Callback Era"]
    A["callback()<br/>รับค่าครั้งเดียวหรือซ้อนกัน"]
  end
  subgraph Era2["ยุค Promise / Promise Era"]
    B["Promise<br/>ผลลัพธ์ครั้งเดียวในอนาคต"]
  end
  subgraph Era3["ยุค Stream / Observable Era"]
    C["Observable<br/>หลายค่าตามเวลา"]
    D["Subject/BehaviorSubject<br/>Multicast และ State"]
  end
  A --> B --> C --> D
</pre>

---

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

- **Observable** คือ Stream ของข้อมูลที่ Subscribe รับได้ตลอดเวลา
- **Observer** คือ object ที่มี `{ next, error, complete }`
- **Subscription** คือผลจากการ Subscribe และควร Unsubscribe เมื่อไม่ใช้
- **Subject** เป็น Observable ที่ Multicast ได้
- **BehaviorSubject** มีค่าเริ่มต้นและส่งค่าล่าสุดให้ Subscriber ใหม่ทันที
- **of(), from(), interval(), timer()** ใช้สร้าง Observable
- **takeUntil** หรือ `ngOnDestroy` ใช้ช่วยป้องกัน Memory Leak

---

## ตารางเปรียบเทียบ Observable

| ชนิด | มีค่าเริ่มต้น | ส่งค่าล่าสุดให้ Subscriber ใหม่ | เหมาะกับ |
|---|---|---|---|
| Observable | ไม่จำเป็น | ไม่เสมอ | HTTP, Event, Stream |
| Subject | ไม่มี | ไม่ | Event bus |
| BehaviorSubject | มี | ใช่ | Shared State |
| Promise | ไม่มี Stream | ไม่เกี่ยวข้อง | งาน async ผลลัพธ์ครั้งเดียว |

---

## Mermaid Diagram: Observable Stream

---

## สมการคณิตศาสตร์: Subscription ที่ยังค้าง

- **M** คือจำนวน Subscription ที่อาจค้างในหน่วยความจำ
- **S** คือจำนวน Subscription ที่สร้าง
- **U** คือจำนวน Subscription ที่ unsubscribe แล้ว

---

## Code Example

```typescript
// counter.component.ts
// ตัวอย่าง Observable, Subscription และการ unsubscribe
import { Component, OnDestroy, OnInit } from '@angular/core';
import { BehaviorSubject, interval, Subscription } from 'rxjs';

@Component({
  selector: 'app-counter',
  template: `
    <p>Counter: {{ count }}</p>
    <button (click)="setStatus('running')">Set Status</button>
  `
})
export class CounterComponent implements OnInit, OnDestroy {
  count = 0;
  private sub?: Subscription;
  private statusSubject = new BehaviorSubject<string>('idle');
  status$ = this.statusSubject.asObservable();

ngOnInit(): void {
    this.sub = interval(1000).subscribe(value => {
      this.count = value;
    });
  }

setStatus(status: string): void {
    this.statusSubject.next(status);
  }

ngOnDestroy(): void {
    this.sub?.unsubscribe();
  }
}

// ตัวอย่างการใช้งาน:
// <app-counter></app-counter>
```

---

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

1. สร้าง Observable ด้วย `interval(1000)`
2. แสดงค่าตัวเลขใน Component
3. unsubscribe ใน `ngOnDestroy`
4. ทดลองเปลี่ยนจาก Subject เป็น BehaviorSubject

---

## End

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