Last active
December 4, 2015 23:51
-
-
Save cworsley4/4034a3a8f0e5ca98e8fd to your computer and use it in GitHub Desktop.
Example of postMessage with small message bus
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function (global, undefined) { | |
| global.getHost = function () { | |
| var location = global.location; | |
| return location.protocol + '://' + location.hostname + ':' + location.port; | |
| }; | |
| })(window); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| start: | |
| serve . | |
| install: | |
| npm install -g serve |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function (global, undefined) { | |
| function Messenger() { | |
| this.listeners = {}; | |
| } | |
| Messenger.prototype.emit = function (event, payload) { | |
| var callback = null; | |
| var listeners = this.listeners[event] || []; | |
| console.debug('About to emit events for the ' + event + ' event'); | |
| for(var i = 0; i < listeners.length; i++) { | |
| callback = listeners[i]; | |
| callback.apply([null, event, payload]); | |
| } | |
| }; | |
| Messenger.prototype.register = function (event, callback) { | |
| // TODO: Validate events | |
| this.listeners[event] = [callback]; | |
| return true; | |
| }; | |
| global.Messenger = Messenger; | |
| })(window); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Popup</title> | |
| <script src="./common.js"></script> | |
| <script src="./messenger.js"></script> | |
| <script type="text/javascript"> | |
| (function (global, undefined) { | |
| var killerTimer = null; | |
| var messenger = new global.Messenger(); | |
| messenger.register('system:heartbeat:ping', function(event, payload) { | |
| console.info('What it is!'); | |
| window.postMessage({ | |
| event: 'system:heartbeat:pong', | |
| payload: null | |
| }, global.getHost()); | |
| }); | |
| window.addEventListener('message', function reciever(event) { | |
| if (event.isTrusted) { | |
| clearTimeout(killerTimer); | |
| killer(); | |
| var data = event.data; | |
| messenger.emit(data.event, data.payload); | |
| } else { | |
| console.error('Event came from an untrusted source.', event); | |
| } | |
| }, false); | |
| function killer() { | |
| killerTimer = setTimeout(function () { | |
| alert('Parent window has gone away.'); | |
| window.close(); | |
| }, 30000); | |
| } | |
| killer(); | |
| })(window); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Popup</h1> | |
| <a href="./popup2.html">Go to next</a> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Popup 2</title> | |
| <script src="./common.js"></script> | |
| <script src="./messenger.js"></script> | |
| <script type="text/javascript"> | |
| (function (global, undefined) { | |
| var killerTimer = null; | |
| var messenger = new global.Messenger(); | |
| messenger.register('system:heartbeat:ping', function(event, payload) { | |
| console.info('What it is!'); | |
| window.postMessage({ | |
| event: 'system:heartbeat:pong', | |
| payload: null | |
| }, global.getHost()); | |
| }); | |
| window.addEventListener('message', function reciever(event) { | |
| if (event.isTrusted) { | |
| clearTimeout(killerTimer); | |
| killer(); | |
| var data = event.data; | |
| messenger.emit(data.event, data.payload); | |
| } else { | |
| console.error('Event came from an untrusted source.', event); | |
| } | |
| }, false); | |
| function killer() { | |
| killerTimer = setTimeout(function () { | |
| alert('Parent window has gone away.'); | |
| window.close(); | |
| }, 30000); | |
| } | |
| killer(); | |
| })(window); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Popup 2</h1> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html /> | |
| <html lang="en"> | |
| <head> | |
| <title>Do it</title> | |
| <script src="./common.js"></script> | |
| <script src="./messenger.js"></script> | |
| <script type="text/javascript"> | |
| (function (global, undefined) { | |
| var editor = null; | |
| var ticker = null; | |
| var messenger = new Messenger(); | |
| global.openPopup = function() { | |
| editor = global.open('./popup.html', '_blank', 'height=600,width=800'); | |
| heartbeat(); | |
| } | |
| function generatePayload() { | |
| return { | |
| event: event, | |
| payload: payload || {}, | |
| timestamp: new Date() | |
| } | |
| } | |
| function heartbeat() { | |
| editor.postMessage({ | |
| event: 'system:heartbeat:ping', | |
| payload: null | |
| }, global.getHost()); | |
| if (!editor.closed) { | |
| setTimeout(heartbeat, 500); | |
| } else { | |
| console.debug('The editor has closed'); | |
| // end editing session here | |
| } | |
| } | |
| })(window); | |
| </script> | |
| </head> | |
| <body> | |
| <button onclick="openPopup();">Open</button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment