FB-bot on js, gupshup

Question

I'm looking for solution of problem with async calling functions, especially context.simplehttp.makePost(url, param, header); from gupshup api. I need to send multiple messages in concrete sequence.

Here is the code:

function MessageHandler(context, event) {
if (event.messageobj.type == "msg") {
if (Array_CH(hi_array, message)) {
var contextParam = JSON.stringify(event.contextobj);
var url = "https://api.gupshup.io/sm/api/bot/" + event.botname + "/msg";
var param = "context=" + contextParam + "&message=";
var header = { "apikey": "b3843dad0a484ad3ca19b5358be6c809", "Content-Type": "application/x-www-form-urlencoded" };
var catalogue;
var button;
var param1;
param = "context=" + contextParam + "&message=Hey.\nContest called The vivid Emotions needs your assessment.\nLook what emotions here. Do you agree?\nOr are your feelings totally different?";
context.simplehttp.makePost(url, param, header);
catalogue = {
            "type": "catalogue",
            "msgid": "cat_212",
            "items": [
                {
                    "title": "Design1",
                    "subtitle": "Quisque consectetur ornare malesuada.\n Nunc dapibus nec felis.",
                    "imgurl": "http://sv777.ru/images/stati/239465865852987356diz.jpg",
                    "options": [
                        {
                            "type": "url",
                            "title": "About",
                            "url": "http://laminat-parket.net/product/room-yasen-dizajn"
                        }
                    ]
                },
                {
                    "title": "Design2",
                    "subtitle": "Donec purus sem, mollis a fermentum sit amet, pretium sed lectus.\n Ut at mattis purus.",
                    "imgurl": "http://laminat-parket.net/upload/productions/55794d8198b65.jpg",
                    "options": [
                        {
                            "type": "url",
                            "title": "About",
                            "url": "http://laminat-parket.net/product/room-yasen-dizajn"
                        }
                    ]
                },
                {
                    "title": "Design3",
                    "subtitle": "Proin nec turpis leo.\n Nam metus augue, aliquam vitae laoreet sed, dignissim a risus.",
                    "imgurl": "http://www.askwallpapers.com/pic/201502/2880x1800/askwallpapers.com-17168.jpg",
                    "options": [
                        {
                            "type": "url",
                            "title": "About",
                            "url": "http://laminat-parket.net/product/room-yasen-dizajn"
                        }
                    ]
                },
                {
                    "title": "Design4",
                    "subtitle": "Phasellus vitae justo sed velit faucibus hendrerit.\n Aenean scelerisque eros ac tortor tincidunt feugiat.",
                    "imgurl": "http://www.kidsworldstudio.net/wp-content/uploads/2015/11/bunk-bed-plans-for-kids-bedroom-ideas-home-interior-design-3353-loft-bed-for-kids-loft-bed-for-kids1.jpg",
                    "options": [
                        {
                            "type": "url",
                            "title": "About",
                            "url": "http://laminat-parket.net/product/room-yasen-dizajn"
                        }
                    ]
                },
                {
                    "title": "Design5",
                    "subtitle": "Pellentesque risus nibh, porttitor vitae diam ut, facilisis aliquet velit.\n Quisque scelerisque massa urna. ",
                    "imgurl": "http://www.wallpaper4k.com/download.php?res=interior%2FWP67USXQ.jpg",
                    "options": [
                        {
                            "type": "url",
                            "title": "About",
                            "url": "http://laminat-parket.net/product/room-yasen-dizajn"
                        }
                    ]
                }
            ]
        };
button = {
            "msgid": "bt_2",
            "type": "survey",
            "question": "Put your Like and change this rating!",
            "options": [
                {
                    "type": "url",
                    "title": "Yes",
                    "url": "http://www.wallpaper4k.com/uk/wallpapers/interior%20design/wp67usxq.html",
                    "webview_height_ratio": "full"
                },
                {
                    "type": "url",
                    "title": "Add your own project",
                    "url": "http://www.wallpaper4k.com/uk/wallpapers/interior%20design/wp67usxq.html",
                    "webview_height_ratio": "full"
                },
                {
                    "type": "text",
                    "title": "Need own bot?",
                }
            ]
        };
param = "context=" + contextParam + "&message=" + JSON.stringify(catalogue);
param1 = "context=" + contextParam + "&message=" + JSON.stringify(button);
context.simplehttp.makePost(url, param, header);
context.simplehttp.makePost(url, param1, header);
return;
  }
 }
}

But messages every time send in random order.

Answer 1

To send multiple messages in a concrete sequence you need to let one HTTP call finish it's execution before making the second call. There are two ways to handle the asynchronous behavior while making the HTTP call using the Gupshup's IDE -

1. Use the default HttpResponseHandler. This handler is called every time the execution of the HTTP call finishes.

2. Define your own callback function while making the HTTP call. Like - context.simplehttp.makePost(url, formParams, headers, function)

I would recommend using the 2nd option as it makes it easier to handle multiple HTTP calls.

The pseudo code for sending 3 messages in a sequence using the #2 would be -

function MessageHandler(context, event) {
  context.simplehttp.makePost(url, formParams, headers, secondMsg); 
//sending 1st message
}
function secondMsg(event,context){
    context.simplehttp.makePost(url, formParams, headers, thirdMsg); //sending 2nd message
}
function thirdMsg(event,context){
    context.sendResponse("I am the last message");
}

NOTE - using context.sendResponse sends the message and exit the code execution until the next message is received by the bot.

For more details check out the document on gupshup.io