(browser) window talks

I gave a talk about Comet and its future during AjaxWorld, in New York City. I talked about some shortcuts of current solutions including connection limits. Some solutions use a separate “channel” per window to receive updates from the server. Some are done a bit more elegant and some aren’t. But basically you have several connections from the browser to the server, no matter if they do concurrent long-polling or a fallback to periodic polling.

In ADS, the “push” solution for ADF Faces Rich Client, we actually have only one channel per browser. The window that holds the channel is the master window. It receives all updates for its “slave” windows too. Under the hood we use some JavaScript to actually talk to the different window and to dispatch the payload to the window, that should get the new data. For that we use some window/page ID algorithm…

Since always I get questions on how we actually do it, I thought that providing a simple example may help… Imagine the following two HTML pages (just vanilla JavaScript and HTML):

first page, that has the window id “w1”:

<html>
<script>
window.name = 'w1';

changeWindow = function()
{
  var w2 = window.open("", 'w2',
  "height=1,width=1,top=0,left=0,status=no,toolbar=no,menubar=no,location=no");

  if(w2.FOO != undefined)
  {
    w2.FOO.pushData("YEAH");
  }
  else
  {
    w2.close();
  }
}
</script>
<body>

<button onclick="changeWindow();">change window 2</button>
</body>
</html>

second page with window id “w2”:

<html>
<script>
window.name = 'w2';
function Pusher()
{}
Pusher.prototype.pushData = function(data)
{
  document.getElementById("divToChange").innerHTML = data;
}
var FOO = new Pusher();
</script>
<body>
<div id="divToChange">
  Hallo
</div>
</body>

</html>

Now deploy these two pages on an HTTP server, like Apache httpd (it does not work locally – due to security) and open both. Best would be page1 in one Firefox window and page2 in another Firefox window. By having different windows you can easily observe the changed HTML later on…

Now, click the button in the first page and notice the HTML is changed… This happens because we get a reference to the second window and check if some special JavaScript object is present in that particular window. If so, we push some data (that could be payload from the server, via Comet) to the other window. The JavaScript function on the second window applies the data into the DOM. That’s all!

So some may now think that is kinda hacky, well yes, but it works. However, the good news is that in HTML5 there will be a more standard solution to have cross-window-communication possible. Interesting future. For comet and web-developement!

Howdy!

Posted in Uncategorized
One comment on “(browser) window talks
  1. […] some browsers, as it shares an “active channel” for the push content. Therefore only one window is “talking” with the server and it basically dispatches the streamed-up content to all registered (slave) […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: