跳到主要内容

Subscription Store

The SubscriptionStore manages real-time event subscriptions and automatically updates the NodeStore when events occur. It listens for transport discovery events and node update events, ensuring your UI stays synchronized with device state changes in real-time.

Overview​

The SubscriptionStore provides:

  • Real-time event subscriptions
  • Automatic NodeStore updates on events
  • Transport discovery event handling
  • Node update event handling
  • Reactive UI updates through store synchronization

Accessing the Store​

Access the SubscriptionStore through the CDF instance:

const subscriptionStore = espCDF.subscriptionStore;

Properties​

PropertyTypeDescription
nodeUpdates{ listen: (event: any) => void }Handler for node update events. Listens for real-time node updates and automatically updates node data in NodeStore when changes occur.
transport{ listen: ({ nodeId: string, transportDetails: ESPTransportConfig }) => void }Transport module to handle transport-related operations. Listens for transport discovery events and updates the device store with transport configurations.

Example Usage​

// Access transport listener
const transportListener = subscriptionStore.transport;
// This is automatically set up when subscribeAllListeners() is called

// Access node updates listener
const nodeUpdatesListener = subscriptionStore.nodeUpdates;
// This is automatically set up when subscribeAllListeners() is called

SubscriptionStore Methods​

Subscribe All Listeners​

To subscribe to all available event listeners, use the subscribeAllListeners() method. This method sets up real-time subscriptions for transport discovery and node updates. It is automatically called when autoSync is enabled during login.

try {
  await subscriptionStore.subscribeAllListeners();
  console.log("All listeners subscribed");
} catch (error) {
  console.error("Error subscribing listeners:", error);
}

What it subscribes to:

  1. Local Discovery Events (ESPRMEventType.localDiscovery)

    • Listens for transport discovery events
    • Automatically updates node transport configurations in NodeStore
    • Triggers when devices are discovered on the local network

  2. Node Update Events (ESPRMEventType.nodeUpdates)

    • Listens for real-time node updates
    • Automatically updates node data in NodeStore when changes occur
    • Includes connectivity status, device parameters, and node configuration changes

How It Works​

Transport Discovery Subscription​

When a transport discovery event occurs, the transport.listen handler:

  1. Receives the node ID and transport details
  2. Updates the node's transport configuration in NodeStore
  3. Updates available transports for the node
  4. UI automatically updates due to reactive store bindings
// This happens automatically when subscribeAllListeners() is called
// When a device is discovered:
// - Transport details are received
// - NodeStore.updateNodeTransport() is called
// - Node's available transports are updated
// - UI reactively updates

Node Updates Subscription​

When a node update event occurs, the nodeUpdates.listen handler:

  1. Receives the node update event
  2. Processes the event and updates NodeStore accordingly
  3. Updates node connectivity status, device parameters, or node configuration
  4. UI automatically updates due to reactive store bindings

Types of node updates handled:

  • Connectivity Status Updates: Node online/offline status
  • Device Parameter Updates: Device state changes (e.g., light brightness, fan speed)
  • Node Configuration Updates: Node configuration changes
// This happens automatically when subscribeAllListeners() is called
// When a node update occurs:
// - Update event is received
// - NodeStore is updated with new data
// - UI reactively updates to show latest state

Automatic Store Synchronization​

The SubscriptionStore automatically synchronizes with the NodeStore:

  • Transport Updates: When transport discovery events occur, the NodeStore is automatically updated with new transport configurations
  • Node Updates: When node update events occur, the NodeStore is automatically updated with the latest node data
  • Reactive UI: Since NodeStore is reactive, your UI automatically updates when these changes occur

Example: Real-time Updates​

import { useEffect } from 'react';

// Subscribe to listeners (usually done automatically with autoSync)
await subscriptionStore.subscribeAllListeners();

// Your UI will automatically update when:
// 1. A device is discovered on local network (transport event)
// 2. A node's state changes (node update event)
// 3. Device parameters change (node update event)
// 4. Node connectivity changes (node update event)

useEffect(() => {
  // This will automatically update when node data changes
  const nodes = nodeStore.nodeList;
  console.log("Nodes updated:", nodes);
}, [nodeStore.nodeList]);

Event Types​

The SubscriptionStore subscribes to the following event types:

ESPRMEventType.localDiscovery​

Transport discovery events that occur when devices are found on the local network.

Handler: transport.listen Updates: Node transport configurations in NodeStore

ESPRMEventType.nodeUpdates​

Real-time node update events that occur when node data changes.

Handler: nodeUpdates.listen Updates: Node data in NodeStore (connectivity, parameters, configuration)

Automatic Initialization​

When autoSync is enabled in CDF configuration, subscribeAllListeners() is automatically called during user login. This ensures real-time updates are active as soon as a user logs in.

// In UserStore.setUserInstance(), if autoSync is enabled:
await this.rootStore?.subscriptionStore.subscribeAllListeners();

Additional Resources​

On this page