Module with HTTP Request

[1BlauNitrox]

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]

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.

[1BlauNitrox]

@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?

[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

[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 :-)

[1BlauNitrox]

This post is deleted!

[1BlauNitrox]

This post is deleted!

[sony8943]

Hello i want to put user and password everytime i open local host or ip address; whatever to access magic mirror from browser .
How to put his setting in config.js?

[sdetweil]

@sony8943 currently we do not have user/password capability.

maybe you could put a proxy server with authentication in front

https://devopscube.com/setup-and-configure-proxy-server/

[sony8943]

@sdetweil thanks