Fetching data from AWS SQS and wait to render ReactJs - amazon-web-services

Question

So we are having an issues where we send a request to SQS and then on the receive message it returns no data.
To try and fix this we threw in a while loop to poll for an extended period of time; however that really doesn't work because we cannot sleep between polls and it seems as if they are all happening asynchronously.
I say that because if the value does get returned (happens about 50% of the time) it will re render the next screen as many time as cap is left and polling never gets set to false. Could someone please help us out!
render() {
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
navigationBar={
<Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
routeMapper={NavigationBarRouteMapper} />
} />
);
}
renderScene() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" hidden={true}/>
<View style={styles.topContainer}>
<View style={styles.bannerContainer}>
<View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Image style={styles.mark} source={require('./yb.png')} />
</View>
</View>
<View style={styles.credentialContainer}>
<View style={styles.inputContainer}>
<Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" />
<View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
<TextInput
style={styles.input}
placeholder="Username"
autoCorrect={false}
placeholderTextColor="#e0e0e0"
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}>
</TextInput>
</View>
</View>
<View style={styles.inputContainer}>
<Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" />
<View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
<TextInput
style={styles.input}
placeholder="Password"
autoCorrect={false}
secureTextEntry={true}
placeholderTextColor="#e0e0e0"
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}>
</TextInput>
</View>
</View>
<TouchableOpacity style={styles.forgotContainer}>
<Text style={{color: '#e0e0e0'}}>Forgot Password</Text>
</TouchableOpacity>
</View>
</View>
<TouchableHighlight
underlayColor="#D6AB00"
onPress={this.login}
style={styles.signInButtonContainer}>
<Text style={styles.signInText}>Sign In</Text>
</TouchableHighlight>
</View>
);
}
login() {
var polling = true;
if(this.state.username.length == 0){
Alert.alert("Error","No email entered");
}
else if(this.state.password.length == 0){
Alert.alert("Error","No password entered");
}
else
{
info.username = this.state.username;
info.password = this.state.password;
AWS.sendMessage('****',JSON.stringify(info), (error,result) =>{
if(error != null) console.log("Error Occured Attempting to Send A Message")
else {
var cap=0;
while(cap <= 30 && polling){
cap = cap+1;
AWS.receiveMessages('****'+info.username, (error, result) =>{
if(error != null) console.log("Error");
else{
if(result){
try{
polling = false;
if(result[0] == "[]")
{
console.log(result[0]);
console.log(typeof result[0]);
Alert.alert("Error","Username/Password Incorrect");
}
else
{
console.log(result[0]);
console.log(typeof result[0]);
var temp = JSON.parse(result[0]);
this.props.navigator.replace({
id: 'MapIOS',
data: {
username: info.username,
ofAge: temp[0].ofAge,
uid: temp[0].u_ID
},
});
}
}
catch(e){
console.log(e);
}
}
AWS.deleteMessage('***'+info.username, result[1], (error) => {
if(error != null) console.log("Error");
});
}
});
}
return
}
});
}
}
};

Answer 1

The problem is that you are calling AWS.ReceiveMessage in a loop.
When you call AWS.ReceiveMessage, the call is asynchronous. Meaning, it will return immediately. It does not wait for your callback to be called. So your loop can be exhausted before any of the callbacks get called.
Trying to set your polling variable from your callback function is not a safe way to "protect" your callback.
You need to restructure your function so that the second AWS.ReceiveMessage does not happen until after your callback has been called from the first AWS.ReceiveMessage.
Generally speaking, don't loop.

Answer 2

Some important facts about SQS that you need to keep in mind when using it:
SQS is not "first in, first out". Messages may not be received in the same order as they were put into the queue. So if you add messages "1" then "2", you may receive them as "2" then "1".
Even if messages are in the queue, you may not get a message when you call ReceiveMessage.
You may receive the same message more than once. For example, if you added message "1" to the queue, you may get back "1" then "1" again later. So you need to ensure that message processing is idempotent and repeat-safe.
All of the above is due to the fact that SQS is distributed and redundant. It guarantees that you will get your messages, but it does not guarantee the order, or the number of times that messages will be received.
Update:
This was my original answer, but I don't think it's the primary issue with the code. I'm leaving it here since I think it's still valuable information.