如何触发回发按钮以在 Facebook Messenger 聊天机器人中打开另一个结构化消息

How to trigger a postback button to open another structured messages in facebook messenger chatbot

我是编程新手,我已经成功地 运行 Facebook Messenger Platform - quick start 案例中的示例。但是我在对原始示例进行一些小改动时遇到了问题:

我想制作一个回发按钮点击事件来触发另一个结构化的 messages.When 用户点击菜单页面内的 'coffee' 按钮,它会显示另一个结构化消息,即咖啡页。

UI Flow

我使用了 if 条件来检查

JSON.stringify(event.postback.payload)

是具体的字符串(应该是'coffee'),但是当我点击菜单页的'coffee'按钮时,它没有显示另一个结构化的消息

下面是我的 webhook 代码:

app.post('/webhook/', function (req, res) {
let messaging_events = req.body.entry[0].messaging
for (let i = 0; i < messaging_events.length; i++) {
    let event = req.body.entry[0].messaging[i]
    let sender = event.sender.id
    if (event.message && event.message.text) {
        let text = event.message.text
        if (text === 'menu') {
            sendMenuMessage(sender)
            continue
        } else if (text === 'coffee') {
            sendCoffeeMessage(sender)
            continue
        }
        sendTextMessage(sender, "Text received, echo: " + text.substring(0, 200))
    }

    if (event.postback) {
        let text = JSON.stringify(event.postback.payload)
        sendTextMessage(sender, "Postback.payload received: " + text.substring(0, 200), token)

        if (text === 'coffee') {
            sendCoffeeMessage(sender)
        }

        continue
    }
}
res.sendStatus(200)})

还有 2 个结构化的 Messenger,其中包括: 1.菜单页面(显示各种产品) 2.咖啡页面(只显示咖啡)

1.Menu 页 要打开菜单页面,有一个函数调用 sendMenuMessage:

function sendMenuMessage(sender) {
let messageData = {
    "attachment": {
        "type": "template",
        "payload": {
            "template_type": "generic",
            "elements": [{
                "title": "Our Menu",
                "subtitle": "Click buttons to see more",
                "image_url": "img.jpg",
                "buttons": [{
                    "type": "postback",
                    "title": "Coffee",
                    "payload": "coffee",
                }, {
                    "type": "postback",
                    "title": "Tea",
                    "payload": "tea",
                }],
            }]
        }
    }
}
request({
    url: 'https://graph.facebook.com/v2.6/me/messages',
    qs: {
        access_token: token
    },
    method: 'POST',
    json: {
        recipient: {
            id: sender
        },
        message: messageData,
    }
}, function (error, response, body) {
    if (error) {
        console.log('Error sending messages: ', error)
    } else if (response.body.error) {
        console.log('Error: ', response.body.error)
    }
})}

2.Coffee 页 要打开咖啡页面,有一个函数调用 sendCoffeeMessage:

function sendCoffeeMessage(sender) {
let messageData = {
    "attachment": {
        "type": "template",
        "payload": {
            "template_type": "generic",
            "elements": [{
                "title": "Americano",
                "subtitle": "5$",
                "image_url": "img2.jpg",
                "buttons": [{
                    "type": "postback",
                    "title": "Detail",
                    "payload": "americano_detail",
                }],
            }, {
                "title": "Latte",
                "subtitle": "5.5$",
                "image_url": "img3.jpg",
                "buttons": [{
                    "type": "postback",
                    "title": "Detail",
                    "payload": "latte_detail",
                }],
            }]
        }
    }
}
request({
    url: 'https://graph.facebook.com/v2.6/me/messages',
    qs: {
        access_token: token
    },
    method: 'POST',
    json: {
        recipient: {
            id: sender
        },
        message: messageData,
    }
}, function (error, response, body) {
    if (error) {
        console.log('Error sending messages: ', error)
    } else if (response.body.error) {
        console.log('Error: ', response.body.error)
    }
})}

你应该检查下面的代码

console.log(JSON.stringify('coffee') === 'coffee')
//false

区别是

console.log(JSON.stringify('coffee'))
//'"coffee"'
console.log('coffee')
//'coffee'

这意味着第一个是包含双引号的字符串。因为那是 json 格式的字符串表达式。