Hot และ Cold Observable ฉบับเข้าใจง่าย

ช่วงนี้หลายคนคงเริ่มใช้ Rxjs กันแล้ว และอาจจะลองสร้าง Observable โดยใช้ Observable.create และ Subject กันบ้างแล้ว แต่รู้หรือป่าวว่า Observable นั้นมี 2 ประเภทนะ

นั้นก็คือ Hot และ Cold Observable

ลองดูความแตกต่างระหว่าง code อันนี้

const users = Observable.create((observer) => {
const ref = firebase.database().ref('user')
const fn = ref.on('value', (snapshot) => {
observer.next(snapshot.val())
}, (err) => {
observer.error(err)
})
return () => ref.off('value', fn)
})

กับอันนี้

const users$ = new BehaviorSubject()
const users = users$.asObservable()
firebase.database().ref('user')
.on('value', (snapshot) => {
users$.next(snapshot.val())
}, (err) => {
users$.error(err)
})

เห็นอะไรที่ต่างกันไหมครับ ?

code อันแรก เราสร้าง Observable โดยการใช้ Observable.create และมี cleanup function เมื่อ Observable ถูก unsubscribe คำสั่ง ref.off ก็จะถูกรัน

code อันที่สอง เราสร้าง users$ ที่เป็น BehaviorSubject ขึ้นมา และไม่ cleanup callback ของ firebase

ถ้าดูให้ดีจะเห็นว่า code อันแรกจะสร้าง callback จาก firebase เมื่อต้องการใช้ และ จะลบออกเมื่อไม่ต้องการใช้ แต่ code ส่วนที่สองถึงแม้ว่าจะไม่มีใคร subscribe มันก็จะรันตลอดเวลา

code อันแรกเราเรียกมันว่า Cold Observable
code อันที่สองเราเรียกมันว่า Hot Observable

สรุป

Cold Observable คือ Observable ที่จะส่ง data เมื่อมีคน subscribe และหยุดส่งเมื่อไม่มีคน subscribe
Hot Observable คือ Observable ที่ส่ง data ตลอดเวลา

นอกจากนี้เรายังสามารถเปลี่ยน Cold Observable ให้เป็น Hot ได้ด้วยนะ โดยการ ใส่ .share() ต่อท้าย :3

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.