Receive Emoticon

Emoticon ก็คือข้อความพิเศษที่เมื่อส่งไปให้ Facebook มันจะถูกแปลงไปเป็นภาพแสดงอารมณ์ต่างๆ เช่น

:) = 😀

:( = 😦

เป็นต้น

เป้าประสงค์ของบทนี้คือต้องการให้ท่านเห็นลักษณะของ message ที่ Facebook ส่งมาให้บอท เพื่อที่ท่านจะได้มีไอเดียว่าจะทำอะไรกับมันได้บ้าง ลักษณะ message จะเป็นดังนี้

{
    "object": "page",
    "entry": [
        {
            "id": "131138044270079",
            "time": 1511500422856,
            "messaging": [
                {
                    "sender": {
                        "id": "1333624753415639"
                    },
                    "recipient": {
                        "id": "131138044270079"
                    },
                    "timestamp": 1511500422666,
                    "message": {
                        "mid": "mid.$cAAB3RLogr0pmHbdmClf7HIdhExwz",
                        "seq": 158405,
                        "text": ":)"
                    }
                }
            ]
        }
    ]
}

ข้อสังเกตุ

1. entry เป็นอะเรย์
2. messaging เป็นอะเรย์
3. emoticon ถูกส่งมาเป็น text ธรรมดา แค่ตอนแสดงผลเท่านั้นที่แสดงผลออกมาเป็นไอค่อนแสดงอารมณ์

ทำไมข้อสังเกตุนี้มันสำคัญ ก็คือ ถ้ามันเป็นอะเรย์แสดงว่าเป็นไปได้ที่ทาง Facebook จะส่งข้อมูลมาหลายชุดในครั้งเดียว ซึ่งเราจำเป็นต้องเขียนโค้ดอย่างระมัดระวัง

ทดลองเขียนโค้ด

<?php

$access_token = 'EAAFUz3HsNTEBAFZAeDiZA8ywOtEUZB52ZBLYziFtXjZCZAUZBmqlUtuemBnbbkN3M25NBKutMZCDzngjD0Uxz530fFmIiJHnFDHZBen9KRGvWZBjnti5awKG6a1g4XfaO8ZCKVfG2Cer5nu3W0uvubzk4wYfpsZCc9QfLGe2tiVZA5JGY6QZDZD';

/* validate verify token needed for setting up web hook */ 

if (isset($_GET['hub_verify_token'])) { 
    if ($_GET['hub_verify_token'] === $access_token) {
        echo $_GET['hub_challenge'];
        return;
    } else {
        echo 'Invalid Verify Token';
        return;
    }
}



/* receive and send messages */
$input = json_decode(file_get_contents('php://input'), true);


if (isset($input['entry'][0]['messaging'][0]['sender']['id'])) {

    $sender = $input['entry'][0]['messaging'][0]['sender']['id']; //sender facebook id
    $emoticon = $input['entry'][0]['messaging'][0]['message']['text'];

    $url = 'https://graph.facebook.com/v2.6/me/messages?access_token='. $access_token;

    /*initialize curl*/
    $ch = curl_init($url);

    /*prepare response*/
    $jsonData = '{
    "recipient":{
        "id":"' . $sender . '"
        },
        "message":{
            "text": "Your emoticon is '. $emoticon .'"
        }
    }';

    /* curl setting to send a json post data */
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

    $result = curl_exec($ch); // user will get the message
}

อธิบายโค้ด

โค้ดนี้ไว้ใช้สำหรับให้ทาง Facebook ตรวจสอบเรื่อง callback URL ที่ผมเขียนไว้ในบท Facebook เรายังเก็บไว้ในหัวไฟล์โค้ดเราเสมอ

/* validate verify token needed for setting up web hook */ 

if (isset($_GET['hub_verify_token'])) { 
    if ($_GET['hub_verify_token'] === $access_token) {
        echo $_GET['hub_challenge'];
        return;
    } else {
        echo 'Invalid Verify Token';
        return;
    }
}

แปลง JSON ที่ Facebook ส่งมาให้ไปเป็นอะเรย์ เพื่อง่ายต่อการเขียนโค้ด

/* receive and send messages */
$input = json_decode(file_get_contents('php://input'), true);

ตรวจสอบว่า message ที่ส่งมานั้นมี id ของผู้ส่งหรือเปล่า อันนี้เป็นการตรวจสอบคร่าวๆว่ามีคนคุยกับบอท ไม่ใช่เรียก URL เว็บขึ้นมาตรงๆ ผมเขียนตรวจสอบไว้เพียงเล็กน้อยเท่านั้น เพื่อไม่ให้โค้ดมันดูยุ่งยากเกินไป เมื่อถึงตอนท่านเขียนโค้ดเพื่อใช้งานจริงๆ ก็อาจจะตรวจสอบให้รัดกุมขึ้นอีกหน่อย

if (isset($input['entry'][0]['messaging'][0]['sender']['id']))

นี่เป็น emoticon ที่ยูสเซอร์ส่งมา เราจะส่งกลับไปให้เขาดู

$emoticon = $input['entry'][0]['messaging'][0]['message']['text'];

URL นี้เป็น enpoint api ของ Facebook ที่เราสามารถ POST ข้อความไปให้ Facebook เพื่อให้ Facebook ส่งข้อความต่อไปให้บุคคลที่ระบุ

$url = 'https://graph.facebook.com/v2.6/me/messages?access_token='. $access_token;

เราจะใช้ cURL ยิง POST ไปหา Facebook

/*initialize curl*/
$ch = curl_init($url);

message ที่เราจะยิงไปให้ Facebook จะต้องอยู่ในรูปแบบของ JSON ระบุ id ของผู้รับและข้อความที่เราต้องการส่งไปให้

/*prepare response*/
$jsonData = '{
"recipient":{
    "id":"' . $sender . '"
    },
    "message":{
        "text": "Your emoticon is '. $emoticon .'"
    }
}';

สั่ง cURL ยิง JSON ไปยัง endpoint api ของ Facebook ก็เป็นอันเรียบร้อยว่าบอทได้ตอบกลับไปหายูสเซอร์ที่ทักมา

/* curl setting to send a json post data */
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

$result = curl_exec($ch); // user will get the message

หลังจาก commit changes โค้ดแล้วให้เข้าไปหน้า Facebook เพจที่เราเตรียมไว้ทำบอท แล้วลองส่งเมสเสจทักบอทไปดู ซึ่งบอทจะต้องตอบกลับมาว่า Your emoticon is ตามด้วยไอค่อนน่ารักๆที่คุณทักไป