Search code examples
javascriptjquerypublish-subscribeamplifyjs

Amplify.js publish subscribe not working when publish and subscribe are in two separate files

I am trying to get Amplify.js publish/subscribe to work with 2 files.

I can get it to work when the code is is one file, but not when publish is in one file and subscribe is in another file.

Here is the code where the call to subscribe and publish are in the same file. This works. 

<html>
<head>
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"> </script>
<script 
  type="text/javascript" src="./js/amplify-1.1.2/amplify.min.js">   
</script>
</head>
<body>
<H1>My amp pub/sub page</H1>
<script type="text/javascript">
alert("entering page");
amplify.subscribe("dataExample", function(param) { 
 alert("In the amplify.subscribe function, 
 param is: " + param.foo ); } );
alert("after line amplify.subscribe");
result = amplify.publish("dataExample", { foo: "bar" } );
alert ("After amplify.publish, result is " + result );
</script>
</body>
</html>

The results are it prints out the alerts in the expected order, like this:
'entering page'
'after line amplify.subscribe'
'In the amplify.subscribe function, param is: bar'
'After amplify.publish, result is true'

When I put the subscribe and publish in separate files, the amplify.subscribe function will not be invoked. For this test, I have two browsers up (both Firefox). I run subscribe on one browser, then publish on the other.

Here is the code for subscribe ( I simply cut out the publish part)

<html>
<head>
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/amplify-1.1.2/amplify.min.js">
</script>
</head>
<body>
<H1>My amp sub page</H1>   
<script type="text/javascript">
alert("entering page");
amplify.subscribe("dataExample", function(param) { 
    alert("In the amplify.subscribe function, param is: " + 
    param.foo ); } );
alert("after line amplify.subscribe");
</script>
</body>
</html>

code for publish (I cut out the subscribe part)

<html>
<head>
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/amplify-1.1.2/amplify.min.js">
</script>  
</head>
<body>    
<H1>My amp pub page</H1>
<script type="text/javascript">
alert("entering page");     
result = amplify.publish("dataExample", { foo: "bar" } );
alert ("After amplify.publish, result is " + result );
</script>
</body>
</html>

I am using firefox version 47.0.1
I have the same problems when I use Chrome.

Does anyone have any ideas on this?
Does anyone have any deeper knowledge on this, like
where is the publish data being stored? for how long?
and how can I see if it is there.
Where is the subscribe looking for the data?
Will the publish subscribe work with two files?

Solution

  • The publish data isn't stored anywhere.

    The callback functions are stored. Within normal variables in amplify. You could imagine a map with event names as keys & the callback function as the values.

    When you publish with a event name, the callback for that event is retrieved from the map & executed with the data you passed along.

    The problem here is that the map is local to every page, just like any other JavaScript variable.

    • So in the first page only the call back is stored, but there is no code within the same page invoking the event.
    • In your second page as there is no callback defined, hence there is nothing to handle that event.

    So what you're looking for is a way to share the JavaScript variables across pages. A quick search in SO revealed some attempts. I think they ought to help you implement the same: