Publish Subscribe

PublishSubscribe allows multiple browser windows to communicate which each other. The windows don't even have to be from the same browser ... for example, a message sent from Internet Explorer can be received from a Firefox browser window. This service is inspired by HTML5's Cross Document Messaging

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Publish Subscribe</title>
<style type="text/css" media="screen">
#result {
	font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
	font-size: 8pt; background:#100e0e;	padding:4px; color:#81d83b;
	overflow:auto; height:250px; width:450px; border:4px solid #433;
}

</style>
</head>
<body>
<p>Type a message here, and see it in any and all other browsers visiting<br>
this page (on your local computer).</p>

<input id="msg" type="text" size="60" value="Type your message here">
<div>
    <input id="sendAsString" type="button" value="Send As String">
    <input id="sendAsObject" type="button" value="Send As Object">
    <input id="sendAsArray" type="button" value="Send As Array">
</div>
<br>
<p><strong>Messages Received</strong> (new messages on top):</p>
<pre id="result"></pre>
<p><a target="another" href="publish_subscribe.html">Open a second window</a> to get a 
better idea of what this can do.  If you are<br> really daring, you'll 
<a href="publish_subscribe.html">copy this url</a> and open it in a different browser.</p>
    
<script src="/js/browserplus.js"></script>  
<script src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script src="/js/json2.js"></script><!-- for pretty output -->
<script>  
(function() {
    var YD = YAHOO.util.Dom, YE = YAHOO.util.Event, msg = YD.get("msg");

    // function designated to receive messages
    function receiver(val) {
		var r = YD.get("result");
        var str = JSON.stringify(val, null, "  ") + "\n\n" + r.innerHTML;

		if(r.outerHTML) {
    		r.outerHTML = '<pre id="result">'+str+'</pre>';
		} else {
			r.innerHTML = str;
		}
    }

    // PUBLISH
    function publish(e, obj) {
        var data, str = msg.value;
        
        // show that multiple data types can be sent
        if (obj === "string") {
            data = str;
        } else if (obj === "array") {
            data = str.split(" ");
        } else {
            data = {message: str, one: 1, yes: true, no: false};
        }

        BrowserPlus.PublishSubscribe.postMessage({data:data, targetOrigin: "*"}, function(){});
    }

    BrowserPlus.init(function(res) {  
        var services = {service: "PublishSubscribe", version: "1"};
            
        if (res.success) {  
            BrowserPlus.require({ services: [ services ]}, function(r) {
                if (r.success) {  
                    // SUBSCRIBE
                    BrowserPlus.PublishSubscribe.addListener({receiver: receiver}, function() {});
                } else {
                    alert("Require Failed: " + r.error + ", " + r.verboseError);
                }
            });
        } else {
            alert("Init Failed: " + res.error + ", " + res.verboseError);            
        }
    });
    
    YE.addListener("sendAsString", "click", publish, "string");
    YE.addListener("sendAsObject", "click", publish, "object");
    YE.addListener("sendAsArray",  "click", publish, "array");
})();
</script>
</body>
</html>
Run Example

Make sure to run this code in a second (and even third) window to see the messages sent back and forth. While you're at it, you can even come back to the code demo in a different browser.

NOTE
No IFRAMEs were hurt in the making of this demo.