tap-rpc

Provide subscription based messaging between a root window and child iframe windows

Messaging between iframes is not supported

By default all root window messages are sent to all iframes on the root window. Limiting messages to specific iframes can be accomplished by either:

1. setting the InstanceId via the setInstanceId method in iframes
2. Ensuring all iframes have a top-level 'id' attribute that is unique and calling setUseFrameIdAddressing(true) from the root window

They both do the same thing, but in different ways. The first filters messages on the destination. The second filters messages at the source. In both cases, the root window must know the iframe destination instance Id when publishing a message for the filtering to work.

Messages from iframes to the root window do not require filtering.

Installation

npm install tap-rcp [--save]

Usage

import rpcClient from 'tap-rpc' 

// Use dependency injection to get an instance of tap-rpc
class RootWindow{

    private _subscription: RpcClientSubscription;
    private _frameId: string;
    constructor( private _rpc: RpcClient) {
       // Subscribe to a specific message type ('rootUpdate') destined for the passed Id
       // When that message occurs, the _onRootUpdate callback is run
       _subscription = _rpc.subscribe('rootUpdate', _id, this._onRootUpdate.bind(this));
    }

    private _onRootUpdate(data): void {
      console.log('data', data.data);
      _frameId = data.frameId;
    }

    public onButtonClicked(name: string): void {
      // Publish a message of type 'buttonClick' to destination with Id 
      // with an object with the button name as the passed data
      _rpc.publish('buttonClick', _frameId, {'buttonName': name});
    }

    // When this class is disposed, remove all subscriptions to prevent memory leaks
    public dispose(): void {
      if (_subscription && _subscription.unsubscribe)
        _subscription.unsubscribe();
    }

}

class IFrameWindow{

    private _id: string = '1234';
    private _subscription: RpcClientSubscription;
    constructor( private _rpc: RpcClient) {
       // Subscribe to the buttonClick message type
       _subscription = _rpc.subscribe('buttonClick', _id, this._onButtonClick.bind(this));
       // Only want messages for this Id
       _rpc.setInstanceId(_id);
       _rpc.publish('rootUpdate', "", {'frameId': _id})
    }

    private _onButtonClick(data): void {
      console.log('data', data.data);
    }

    // When this class is disposed, remove all subscriptions to prevent memory leaks
    public dispose(): void {
      if (_subscription && _subscription.unsubscribe)
        _subscription.unsubscribe();
    }

}

API

Tests

Run the tests with npm test.