การรับฟังการเปลี่ยนแปลงแบบเรียลไทม์

Reading data once gives you a snapshot. The power of Realtime Database is live updates: your app reacts the instant data changes on the server, with no polling.

This is done by attaching listeners to a location in the database.

The most common listener is value. It fires once immediately with current data, then again every time anything under that location changes.

The callback receives a DataSnapshot. Use .val() for the data, .exists() to check presence, and .key for the node name.

For lists, value events resend the whole node on every change. Child events are more efficient, firing per item:

• onChildAdded
• onChildChanged
• onChildRemoved

onChildAdded fires once for each existing child, then for every new one. It is perfect for chat messages or feeds.

Pair additions with change and removal handlers to keep your UI in sync without re-rendering everything.

Sometimes you want current data without an ongoing subscription. Use get for a one-time read instead of a listener.

Listeners stay active until removed, consuming bandwidth and memory. Always detach them when a screen unmounts, using the unsubscribe function returned by onValue.

Listeners can fail, often due to Security Rules denying read access. Provide an error callback so failures are visible, not silent.

Keep listeners efficient:

• Listen at the smallest path that has the data you need
• Prefer child events for large lists
• Never attach a value listener to the database root

Putting it together: attach a value listener to a counter node, update the DOM in the callback, and unsubscribe on cleanup. The number changes for every connected client in real time.

Test your understanding of realtime listeners.

Your app can now respond to data the moment it changes.

• Use onValue for single nodes
• Use child events for efficient lists
• Read once with get when no subscription is needed
• Always detach listeners and handle errors
• Listen at the narrowest useful path