wisper-rpc
A protocol for remote procedure calls, and object abstractions.
Last updated 2 years ago by widespace .
MIT · Original npm · Tarball · package.json
$ cnpm install wisper-rpc 
SYNC missed versions from official npm registry.

wisper-js

The JavaScript implementation of a simple, JSON-based RPC protocol.

Details about the wisper protocol itself can be found here.

Take a look at the documentation for the Bridge class, it's at the core of wisper-js and will point you in the right direction for everything else.

Getting Started

Install

npm install wisper-rpc

Example: Communicating across an Iframe boundary

To communicate across an iframe boundary we can use the IframeBridge, which sends JSON using postMessage.

import { IframeBridge } from 'wisper-js';

// Get the iframe, and create the bridge.
const iframe = document.querySelector('iframe');
const bridge = new IframeBridge(iframe.contentWindow);

// Go ahead and call remote functions using the `notify`and `invoke` methods.
bridge.invoke( 'add', [ 1, 2 ] ).then( result => {
  assert.equal( result, 3 );
}, error => {
  // Handle errors here.
});

From within the iframe, we instead do:

import { IframeBridge } from 'wisper-js';

const bridge = new IframeBridge(parent);

bridge.exposeFunction('add', function add(x, y) {
  return x + y;
});

Remote objects

It is also possible to create Remote objects and talk to them (almost) like if they were local classes.

Example: Remote objects - Local implementation

@interfaceName( bridge, 'DomNode' )
class DomNode extends Local {
  constructor(query) {
    super();
    this.match = document.querySelector(query);
  }

  style(obj) {
    if (this.match && this.match.style && obj && Object.keys(obj).length > 0) {
      Object.keys(obj).forEach(key => this.match.style[key] = obj[key]);
      return true;
    }
    return false;
  }
}

Example: Remote objects - Remote implementation

@interfaceName( bridge, 'DomNode' )
class DomNode extends Remote {
	style(obj) {
		return this.bridge.invokeAsync( this.interfaceName + ':style', [ this.id, obj ] );
	}
}

// Change the background color on the other side of the bridge
const body = new DomNode('body');
body.style({ background: 'purple' });

For more detailed information on Remote objects, take a look at Objects.

Current Tags

  • 0.3.1-0                                ...           latest (2 years ago)

13 Versions

  • 0.3.1-0                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.8-2                                ...           2 years ago
  • 0.2.8-1                                ...           2 years ago
  • 0.2.8-0                                ...           2 years ago
  • 0.2.7                                ...           2 years ago
  • 0.2.7-5                                ...           2 years ago
  • 0.2.7-4                                ...           2 years ago
  • 0.2.7-3                                ...           2 years ago
  • 0.2.7-2                                ...           2 years ago
  • 0.2.7-1                                ...           2 years ago
  • 0.2.7-0                                ...           2 years ago
  • 0.2.6                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 2
Last Day 1
Last Week 0
Last Month 18
Dependencies (1)
Dev Dependencies (6)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |