send-channel-message
v1.0.3
Published
Simple function that allow to pass messages to separate script in different browsing context and get back result data as a Promise.
Downloads
8
Maintainers
Readme
send-channel-message
This package provide simple function that allow to pass messages to separate script in different browsing context and get back result data as a Promise using Channel Messaging API.
Motivation
If you just want to communicate with script in other window/iframe/worker, you can use postMessage function and onMessage event handler.
But if you want to communicate in Promise style, so thats a problem. And Channel Messaging API solves this problem using two-way channels with a port at each end.
Installation
Install the package to your project:
npm install --save send-channel-message
And then you can import the function:
If you used ES modules:
import sendChannelMessage from 'send-channel-message';
If you used it in CommonJS environment (don’t forget to add
.default
to your import):var sendChannelMessage = require('send-channel-message').default;
Additionally it's also support a UMD build:
var sendChannelMessage = window.sendChannelMessage.default;
Usage
Basically it's a function that takes 3 inputs and return a Promise:
const promise = sendChannelMessage(message, target, origin);
When Promise resolves it return object with response data:
promise.then( (data) => {
console.log(data);
});
Inputs
message - data to be sent to the other script.
target - a reference to the window/worker that will receive the
message
.origin - specifies what the origin of
target
must be for the event to be dispatched (default = "*").
*See postMessage syntax description.
Outputs
data
property of the MessageEvent
interface.
*See MessageEvent data description.
Example
You can create a module for communicating with some iFrame using send-channel-message
like this:
/* iframeCommunicator.js */
import sendChannelMessage from 'send-channel-message';
const target = document.getElementById('someIframe').contentWindow;
function sendMessageToIframe(message) {
return sendChannelMessage(message, target);
}
export default {
initialize: (initData) => {
const message = {
type: 'INIT',
initData
};
return sendMessageToIframe(message);
},
// ...
};
And then use it for simple send requests and receive responses in API-like style:
/* index.js */
import iframeCommunicator from './iframeCommunicator';
// ...
iframeCommunicator.initialize('very important data')
.then( (data) => {
console.log('Received init response:', data);
});
// ...
The iFrame script will look something like this:
/* iframe.js */
window.addEventListener('message', ({ data, ports }) => {
if (data && ports && ports[0]) {
if (data.type === 'INIT') {
console.log('Received init request:', data.initData);
ports[0].postMessage('Init success!');
ports[0].close();
}
}
});
Tests
Simply clone the repo and run
npm install
npm test
License
MIT