page-chatter
A simple library to facilitate chatter between web-apps running on the same page
How to Use
Directly from a web page
One can use page-chatter directly from a web-page by attaching the page-chatter.js to the DOM.
<!-- Attaching the page-chatter script -->
<script type="text/javascript" src="path/to/library/page-chatter.js"></script>
<!-- Usage -->
<script type="text/javascript">
pageChatter.init();
</script>
Webpack, Browserify or RequireJS
WithInstall page-chatter from NPM
npm install page-chatter --save-dev
Consume as an ES6 module
import * as pageChatter from 'page-chatter';
or
import { init, listen, talk } from 'page-chatter';
Consume as a CommonJS module
var pageChatter = require('page-chatter');
Consume as an AMD
require(['page-chatter'], function (pageChatter) {
// Consume pageChatter
}
Note: You may have to use Babel for ES6 transpilation.
Simple usage
-
Import page-chatter functions
import { init, listen, talk, broadcast, terminate } from 'page-chatter';
-
Initialize page-chatter
init();
The above line should be placed in the parent-most app, the one that can host page-chatter in a way that it can be accessed from any other contained app participating in the chatter.
-
Listen to chatter from an app on the page
listen( 'sub-app1', // Own Id ({ event, payLoad }) => { // TODO: Consume messages } );
The first argument to
listen
needs to be an identifier for the current participating app and the second is a handler that receives messages with anevent
and apayLoad
(if at all there's one). -
Talk to another app participating in the chatter
talk( 'sub-app2', // Id of the recipient 'get-sum', // Event identifier { num1: 2, num2: 3 } // Message data );
The first argument to
talk
is the identifier of the recipient, the second is theevent
for the recipient to know the nature of the message and the third is thepayLoad
. -
Talk to all other participants at once
broadcast( 'he-is-here' // Event identifier { who: 'someone' } // Message data );
The arguments to
broadcast
are the same astalk
but there is noid
for the recipient, as all participants can listen. -
[Optional] Terminate the chatter
terminate();
A call to
terminate
releases page-chatter's control from the page and returns everything back to normal.
Demo
You can view a demo here.
To-do
- Write unit-tests