CODEWITHSUNDEEP
javascriptjqueryhtml
Bijay Yadav
Bijay Yadav

Reputation: 958

JavaScript/JQuery publish subscribe not working between two pages but works within a page in below code

I have two html pages and a JavaScript file.

Implementation

First html page publish the message and the second html page subscribe to the published message and performs the action based on the published message in the second page.

Problem Statement

The publish and subscribe works fine within the same html page but has problem when working between two html pages.

The problem is, the subscribed message is being displayed in the First HTML Page but not in the Second HTML Page.

First HTML Page

<script>
        function clickMe() {
            messageBus.publish('event', 4);
        }
</script>

Second HTML Page

<script>
            messageBus.subscribe('event', function(data) {
                $("#div1").text(data);
            });
</script>
<div id="div1"></div>

JS File

var messageBus = {
events: {},
publish: function(eventType, data) {
    if (typeof(Storage) !== "undefined") {
      var myFunc = localStorage.getItem(eventType);
      var e = eval('(' + myFunc + ')');

      if(e) {
          e(data);
      }
    }
},
subscribe: function(eventType, fn) {
    if (typeof(Storage) !== "undefined") {
        localStorage.setItem(eventType, fn);
    }
},
unsubscribe: function(eventType) {
    if (typeof(Storage) !== "undefined") {
        localStorage.removeItem(eventType);
    }
}
}

Is there something missed in the implementation? Let me know if there is more stuffs required to make the question clear.

Upvotes: 0

Views: 729

Answers (2)

Water Cooler v2
Water Cooler v2

Reputation: 33850

The main problem

As already pointed out by Adrian Brand in an answer, the code inside your publish method and subscribe method need to be swapped.

Other unrelated but design related problems

  1. Another problem with your messageBus is that it if the publisher publishes more than one message before the subscriber has had a chance to read any of the messages, only the last one of the messages published gets persisted to your message bus; all previous messages are overwritten by the last one and so they never make it to the subscribers.

  2. You're using eval to run just about anything that might be inside the localStorage item. This opens your application up to a security threat.

    What if I opened your application in Developer Tools, wrote a malicious function or script and put it in the local storage with the key 'events'? Your code would execute my function. Now, imagine all that I could do with that ability.

    I could make AJAX requests to evil websites (I would make them GET requests to bypass CORS), read your cookies, search for and scrape all your form fields, stuff them into a form data object and send that to my server, and a whole lot more.

Upvotes: 1

Adrian Brand
Adrian Brand

Reputation: 21638

Your publish and subscribe methods are the wrong way around, publish is getting the item and subscribe is writing it. And get rid of that eval!

Upvotes: 2

Related Questions