examples/index.html
<!DOCTYPE html>
<html>
<head>
<title>page-chatter example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
</head>
<body>
<div id="page"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
<script src="../build/scripts/page-chatter.js"></script>
<!-- Main app -->
<script type="text/javascript">
// The original message event
window.onmessage = message => {
console.log(
'Message received in the original event handler',
message
);
};
// Terminate the chatter
require(
[
'pageChatter'
],
function (pc) {
setTimeout(
function () {
pc.terminate();
},
2000
);
}
);
</script>
<!-- Main app -->
<script type="text/javascript">
require(
[
'pageChatter'
],
function (pc) {
// Initialize handler
pc.init();
// Identify self as 'p0' and define a handler to listen to messages
pc.listen(
'p0',
message => {
switch (message.event) {
case 'result':
alert('The result is ' + message.payLoad);
break;
case 'date':
alert('The date is ' + message.payLoad);
break;
default:
// Ignore
console.log(
'Must be a broadcast message',
message
);
}
}
);
setTimeout(
function () {
// Talk to 'p1' and ask it to return the sum of two numbers
pc.talk(
'p1',
'add',
{
num1: 2,
num2: 3
}
);
// Talk to 'p2' and ask it for the current date as a string
pc.talk(
'p2',
'date'
);
},
1000
);
}
)
</script>
<!-- App 'p1' -->
<script type="text/javascript">
require(
[
'pageChatter'
],
function (pc) {
setTimeout(
function () {
// Broadcast 'ready' event
pc.broadcast('p1-ready');
// Identify self as 'p1' and define a handler to listen to messages
pc.listen(
'p1',
message => {
switch (message.event) {
case 'add':
pc.talk(
'p0',
'result',
message.payLoad.num1 + message.payLoad.num2
);
break;
case 'subtract':
pc.talk(
'p0',
'result',
message.payLoad.num1 - message.payLoad.num2
);
break;
default:
// Ignore
console.log(
'Must be a broadcast message',
message
)
}
}
);
},
500
);
}
)
</script>
<!-- App 'p2' -->
<script type="text/javascript">
require(
[
'pageChatter'
],
function (pc) {
setTimeout(
function () {
// Broadcast 'ready' event
pc.broadcast('p2-ready');
// Identify self as 'p2' and define a handler to listen to messages
pc.listen(
'p2',
message => {
switch (message.event) {
case 'date':
pc.talk(
'p0',
'date',
new Date().toDateString()
);
break;
default:
// Ignore
console.log(
'Must be a broadcast message',
message
)
}
}
);
},
500
);
}
)
</script>
</body>
</html>