ember-window-messenger
This Ember addon is a lightweight postMessage client/server implementation. It is built on promises so the fetch
and rpc
methods can used directly in your route model()
hooks.
For changelog see CHANGES.md
It supports JSON only messages for now
Usage
ember install ember-window-messenger
Configuration
Add target:origin
map to your config/environment.js
. This effectively defines which targets (windows, frames) is your app communicating with.
APP: {
'ember-window-messenger': {
'parent': 'http://localhost:4200',
'target-1': 'http://localhost:4200',
'target-2': 'http://localhost:4200',
'popup': 'http://localhost:4200'
}
}
This list is also used for validation, to check if message comes from an allowed origin.
Examples
If you dare, fire up the dummy app in this addon and test it out. Below are the basic examples, see dummy app for more.
Setup server on parent
import Ember from 'ember';
export default Ember.Route.extend({
server: Ember.inject.service('window-messenger-server'),
init() {
this._super(...arguments);
this.get('server').on('demo-data', (resolve, reject, query) => {
resolve('Some data');
});
}
});
Fetch from parent
import Ember from 'ember';
export default Ember.Route.extend({
client: Ember.inject.service('window-messenger-client'),
model() {
return this.get('client').fetch('demo-data');
}
});
Fetch from a specific target
This can be used from parent window to frames/tabs communication.
import Ember from 'ember';
export default Ember.Route.extend({
client: Ember.inject.service('window-messenger-client'),
model() {
return this.get('client').fetch('popup:demo-data');
}
});
Execute RPC call
Internally it is the same as fetch
, but provides semantic sugar to your app code.
import Ember from 'ember';
export default Ember.Route.extend({
client: Ember.inject.service('window-messenger-client'),
actions {
runMe() {
this.get('client').rpc('start-worker').then((response) => {
});
}
}
});
Installation
git clone
this repositorynpm install
bower install
Running
Running Tests
ember test
ember test --server
Building
For more information on using ember-cli, visit http://www.ember-cli.com/.