MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Module with HTTP Request

    Development
    3
    7
    483
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • 1
      1BlauNitrox last edited by

      Hey guys,
      I am creating my own first Magic Mirror 2 Module. The Module is about my substitution plan from school. I developed an API running on my localhost on the raspberry pi 3.

      The module should make a GET request on my localhost and show the result on the mirror.

      I`m new in creating own modules so I am not very experienced. This is my code so far:

      Module.register("MMM-VPlan", {
      	defaults: {
      		text: "Vertretungsplan",
      		updateDelay: 10, //*60 für minuten
      		errorMessage: "Der Plan konnte nicht geladen werden"
      	},
      
      	start: function(){
      		var self = this;
              this.vplan =   "";
              this.completeRquest = false;
              this.errorMessage = "";
      		setInterval(function() {
      			self.updateDom()
      		}, 1000*this.config.updateDelay)
      	},
      
      	getStyles: function() {
              return ["vplan.css"];
      	},
      
      
          	getDom: function() {
      		var wrapper = document.createElement("div");
      		updateRequest();
              if(this.completeRquest) {
                  if(!errorMessage == "") {
                      wrapper.innerHTML = this.errorMessage;
                  } else {
      		        wrapper.innerHTML = this.config.text + " Data: " + this.vplan;
                  }
              } else {
                  wrapper.innerHTML = "Plan läd..."
              }
              this.completeRquest = false;
      		return wrapper;
      	},
      
          updateRequest: function() {
              var self = this;
      
      		var params = {
      			"day":"today",
      		}
      	    
      	    var xhttp = new XMLHttpRequest();
      	    xhttp.open("GET", "localhost:3000/vplan", true);
      	    xhttp.onreadystatechange = function() {
      	        if (this.readyState === 4) {
      	            if (this.status === 200) {
      	                self.vplan = this.responseText;
                          self.completeRquest = true;
      	            } else {
      	                self.errorMessage = this.config.errorMessage;
      	            }
      	    
      	        }
      	    };
      	    xhttp.send(JSON.stringify(params));
          },
      })
        
      

      On the mirror you can see: “UNDEFINED”

      I hope someone can help me.
      LG 1BlauNitrox - Julius

      Jalibu S 2 Replies Last reply Reply Quote 0
      • Jalibu
        Jalibu Module Developer @1BlauNitrox last edited by

        Hi @1blaunitrox,

        1. I’d recommend to use the fetch API and not XMLHttpRequest.
        2. The reason for failing is most probably the same-origin-policy as your API server runs on port 3000, which differs from the MagicMirror port, which is 8080 by default. One way to solve that is setting a Access-Control-Allow-Origin (CORS) header in your API response or to add some kind of a ajax-proxy in a node_helper.js file in your module.
        1 1 Reply Last reply Reply Quote 0
        • 1
          1BlauNitrox @Jalibu last edited by

          @jalibu is it possible to change the port in the api?
          In my main.ts file I have

          await app.listen(3000);
          

          Can I change it to 8080?

          Jalibu 1 Reply Last reply Reply Quote 0
          • S
            sdetweil @1BlauNitrox last edited by sdetweil

            @1blaunitrox the get request is not synchronous

            meaning it returns back before it’s done

            so you can’t call it in getDom()

            as it will return before finished, and then getDom() will have the wrong status.

            you typically start this in some timer routine, and when it returns, save the results, then call updateDom(), which will cause getDom() to be called

            Sam

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 1
            • Jalibu
              Jalibu Module Developer @1BlauNitrox last edited by Jalibu

              @1blaunitrox said in Module with HTTP Request:

              Can I change it to 8080?

              No, because it is blocked by MagicMirror 😉
              But what sdetweil says is of course true and on closer inspection this is the main problem in your code. Welcome to the world of asynchronous JavaScript 🙂

              1 1 Reply Last reply Reply Quote 0
              • 1
                1BlauNitrox @Jalibu last edited by

                This post is deleted!
                1 1 Reply Last reply Reply Quote 0
                • 1
                  1BlauNitrox @1BlauNitrox last edited by

                  This post is deleted!
                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy