{"id":688,"date":"2016-06-08T17:10:12","date_gmt":"2016-06-08T11:40:12","guid":{"rendered":"http:\/\/new.codingislove.com\/?p=688"},"modified":"2017-01-17T21:05:13","modified_gmt":"2017-01-17T15:35:13","slug":"build-facebook-chat-bot-javascript","status":"publish","type":"post","link":"https:\/\/codingislove.com\/build-facebook-chat-bot-javascript\/","title":{"rendered":"Develop Facebook chat bot using Javascript \u2013 Part 2"},"content":{"rendered":"

Continued from Develop Facebook chat bot using Javascript – Part 1<\/a><\/p>\n

Basic verification is complete, Now lets test webhook and see if we are receiving messages sent to bot page to our webhook or not.<\/p>\n

Receiving messages<\/h3>\n

Add the following code to server.js<\/p>\n

\r\napp.post('\/',handleMessage);\r\n<\/pre>\n
This code tells express to run handleMessage function whenever a POST request is made.<\/p>\n
And add handleMessage function<\/p>\n
\r\nfunction handleMessage(req, res) {\r\n  messaging_events = req.body.entry[0].messaging;\r\n  for (i = 0; i < messaging_events.length; i++) {\r\n    event = req.body.entry[0].messaging[i];\r\n    sender = event.sender.id;\r\n    if (event.message && event.message.text) {\r\n      text = event.message.text;\r\n      console.log(text);\r\n    }\r\n  }\r\n  res.end('received!');\r\n}\r\n<\/pre>\n
Note: Dont forget to restart server after making changes in code everytime. Use Nodemon<\/a> if you want to restart server automatically on file change<\/em><\/strong><\/p>\n
Messages sent to bot page are sent in an array named messaging with sender Id and message. Sender Id will be used to reply to the sender. Messenger platform may queue the messages sometime and send multiple messages in same POST request, so we make sure that all messages are captured by looping through the messaging array.<\/p>\n
We are using console.log(text) to log the message to console for testing.<\/p>\n
Subscribe to bot page in app dashboard and you should start receiving messages to webhook as shown in gif below.<\/p>\n
\"Testing<\/p>\n
We are building a wiki bot which searches wikipedia and sends relevant results. We will be using wikipedia REST API to search wikipedia and return results. Read more about wikipedia API here<\/a><\/p>\n
If user sends wiki space ‘search query’ then bot should make a request to wikipedia API with search query, return results and send them to user using Facebook send API.<\/p>\n
If user sends anything else then bot should reply with a help message Send Wiki space ‘Search query’ to search wikipedia.<\/em><\/p>\n
Send a basic Message to user<\/h3>\n
Messages can be sent using send API by making a POST request to https:\/\/graph.facebook.com\/v2.6\/me\/messages?access_token=PAGE_ACCESS_TOKEN<\/span><\/p>\n
Page Access token can be accessed in messenger platform dashboard.<\/p>\n
I’m using request<\/code>, a NodeJS module which helps in making HTTP requests easier. As we have to make GET requests to wikipedia API and POST requests to messenger send API. Read more about request module here<\/a><\/p>\n
In command line type npm install request --save<\/code><\/p>\n
This will install request module and adds it as a dependency in Package.json file. Now lets write some code to send a simple message to user.<\/p>\n
Note: Make sure to import request module wherever you are using it.
\nvar request = require('request');<\/code><\/p>\n
\r\nvar url = "https:\/\/graph.facebook.com\/v2.6\/me\/messages?access_token=<PAGE_ACCESS_TOKEN>" \/\/replace with your page token\r\nfunction sendHelp(id) {\r\nvar options = {\r\n    uri: url,\r\n    method: 'POST',\r\n    json: {\r\n      "recipient": {\r\n        "id": id\r\n      },\r\n      "message": {\r\n        "text": "Send wiki space 'Your query' to search wikipedia"\r\n      }\r\n    }\r\n  }\r\n  request(options, function(error, response, body) {\r\n    if (error) {\r\n      console.log(error.message);\r\n    }\r\n  });\r\n};\r\n<\/pre>\n
This function takes a sender id as parameter and sends a JSON to send API. Read more about FB send API here<\/a><\/p>\n
Now replace the line console.log(text);<\/code> with sendHelp(sender);<\/code><\/p>\n
Now whenever someone sends a message to your bot page, bot replies them with a help message.<\/p>\n
Structured messages in chat bot<\/h3>\n
Messenger platform allows 2 types of messages – Normal text messages and Structured messages. There are 3 types of templates in structured messages allowed by messenger platform. They are Button template, Generic template and receipt template.<\/p>\n
Read more about different templates here<\/a><\/p>\n
Code examples for structured messages are availabe here<\/a><\/p>\n
I’m using generic template for wiki bot as shown in the demo video. Generic template can contain title, description and some buttons which is perfect for this case.<\/p>\n
To send a structured message, we just have to send JSON to send API in a specific format.<\/p>\n