XmlHttpRequest doesn't work at the right time

[bymafmaf]

Hi,

 

I have this code in my start menu state.

startGame: function (pointer) {        var user = KareApi.getUser(243536);        console.log(user.name);        this.state.start('Game');    }

when user clicks to play this runs. KareApi.getUser() contains an XmlHttpRequest and returns an object from database.

getUser: function(deviceID){        var xhr = new XMLHttpRequest();        xhr.open('POST', 'http://XXX/api/user/getUser');        xhr.setRequestHeader('Content-Type', 'application/json');        xhr.onload = function() {            if (xhr.status === 200) {                var userInfo = JSON.parse(xhr.responseText);                return userInfo;            }        };                xhr.send(JSON.stringify({            deviceID: deviceID        }));    }

But it sees user variable as undefined. In debugging I see that it goes into getUser function, doesn't get in xhr.onload at first, so doesn't return anything. Then console.log runs and as expected it gives error. when I comment console.log and debug, I see that xhr.onload runs after some update functions of phaser.

 

How can I complete all requesting and returning process before console.log?

 

Or do you know a tutorial or some kind of framework that works with phaser smoothly because I'm kind of having a hard time integrating standart restful client codes..

 

Thanks in advance.

[vohogames]

Hi, 

I am no expert at this point but you may try to modify your code due to asynchronous call or you sould try this

 

xhr.open('POST', 'http://XXX/api/user/getUser' , false );

this false makes request synchronous, it blocks until it returns a message and 

console.log(user.name); gets the variable user 

[bymafmaf]

It gives an error in Chrome:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

How can I do it in asynchronus way?

[vohogames]

hi again, 

lets try.  i am no fan of online editors so here is. c/p your changed code. 

 

var userinfo ; // global variable 

 

startGame: function (pointer) {
var user = KareApi.getUser(243536);
//console.log(user.name); // undefined !!!
 // show some fancy loader ! 
}

 

getUser: function(deviceID){

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://XXX/api/user/getUser');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
// in here we set global variable 

userInfo = JSON.parse(xhr.responseText);
// stop showing some fancy screen or just state change

this.state.start('Game');
}
};

xhr.send(JSON.stringify({
deviceID: deviceID
}));
}

[bymafmaf]

This should work but I want to do all my api requests in my KareApi.js file so that program structure would be easier for development afterwards. It's just a function that I want its return value.

 

Asynchronous thingy always makes it harder for me...

[vohogames]

so you need a service ( like in angular) but i don't know how to do on game.

[bymafmaf]

Which one would you think to be the most efficient? It's a mobile game, performance is important.

[drhayes]

It's going to have to be asynchronous. Your code that looks like this:

var user = KareApi.getUser(243536);

Won't work because KareApi.getUser is async; the function returns undefined and then, at some later time, completes and has a user object.

 

You should use the Phaser state system to help you. In your preload state, make the call to get the user as well... but instead of trying to return it (you can't), set it as a global variable on window. Then, in the update method of your preload state don't transition to the next state until that user object is populated.

function update() {  if (window.user) {    this.state.start('Game');  }}

Alternately, you could use Promises but they might not be available depending on what you're trying to support on mobile.

[vohogames]

@bymafmaf, it depends on your game. as i said before, i am no expert phaser but @drhayes pointed a direction using update.

imho, update creates a cpu time ( i am not sure!) but you can encapsulate your API. if update is second based, i would try update.

 

if update creates a cpu time +  if i were you, i would try this, i would like to save cpu and break rules

 

corrected code:

 

startGame: function (pointer) {
 // show some fancy loader ! 

var user = KareApi.getUser(243536);


}

[bymafmaf]

Sorry for late answer.

 

I moved KareApi.getUser to Boot state that is before StartMenu state which is @drhayes mentioned. So, it seems that to make it work under startmenu state so that login boxes can appear, I need one more state after startmenu. Some kind of "processing" state.

 

I'll inform when I implement it. Now I'm trying to implement Socket.IO so that it wouldbe realtime-multiplayer game.