Express-Basic Facebook Chatbot

Posted on |

Sample Response

Background

Facebook chatbot is a chatbot service that user can use to their own facebook pages. You can use chatbot to answer basic user questions and direct them to their desire products. However, it can not have a deep conversation with user. (You will need to use a Artificial Intelligence API or something for this)

For this post I’ll show how to setup your chat app. It will connect to your facebook page and just respond what user types. In the next post I’ll show how to customize your facebook response.

Structure

The code is in my github repo (LINK)

  1. Install following packages

    1
    2
    3
    "body-parser": "^1.17.2",
    "express": "^4.15.3",
    "request": "^2.81.0"

  2. Basic App setup

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const express = require('express')
    const bodyParser = require('body-parser')
    const request = require('request')
    const app = express()
    app.set('port', (process.env.PORT || 8000))
    // Allow us to process the data
    app.use(bodyParser.urlencoded({extended: false}))
    app.use(bodyParser.json())

  3. Basic Routes Setup

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // ROUTES
    app.get('/', function(req, res) {
      res.send("Hi, I am a chatbot")
    })
    // FACEBOOK (security thing)
    app.get('/webhook/', function(req, res) {
      // hub?
      if (req.query['hub.verify_token'] === "dannyisexy") {
        res.send(req.query['hub.challenge'])
      }
      res.send("Wrong token")
    })

  4. POST response for webhook. After user enter a message. It is sent to our webhook. We use body-parser to parse messages.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    app.post('/webhook/', function(req, res) {
      let messaging_events = req.body.entry[0].messaging  // Parse Messages from fb API the response look like the object below
      for (let i = 0; i < messaging_events.length; i++){
        let event = messaging_events[i]
        let sender = event.sender.id // get User ID, so we know who to send response to
        if (event.message && event.message.text) {
          let text = event.message.text // get user text
          sendText(sender, "Text echo: "+ text.substring(0,100)) // respond the same text as user
        }
      }
      res.sendStatus(200)
    })

    This is what facebook send to our webhook.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
    "object":"page",
    "entry":[
      {
        "id":"PAGE_ID",
        "time":1458692752478,
        "messaging":[
          {
            "sender":{
              "id":"USER_ID"
            },
            "recipient":{
              "id":"PAGE_ID"
            },
            ...
          }
        ]
      }
    ]
    }

  5. Functions for sending response text. We use the request module from npm to send our response.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    function sendText(sender, text) {
      let messageData = {text: text}
      sendRequest(sender, messageData)
    }
    function sendRequest(sender, messageData) {
      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("sending error")
        } else if (response.body.error){
          console.log("response body error")
        }
      })
    }
    app.listen(app.get('port'), function(){
      console.log('running: port')
    })
    • Here’s what our facebook’s send API ask for
    1
    2
    3
    4
    5
    6
    7
    8
    curl -X POST -H "Content-Type: application/json" -d '{
      "recipient": {
        "id": "USER_ID"
      },
      "message": {
        "text": "hello, world!"
      }
    }' "https://graph.facebook.com/v2.6/me/messages?access_token=PAGE_ACCESS_TOKEN"

Thoughts

We setup our server that accepts webhook.
Our webhook is able to deal with response and able to return a message back to user.
This is how to send basic text response to user. Next blog post i’ll show you how to customer your response.