Receive Image

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

{
    "object": "page",
    "entry": [
        {
            "id": "127997317916506",
            "time": 1510125967805,
            "messaging": [
                {
                    "sender": {
                        "id": "1519659551459981"
                    },
                    "recipient": {
                        "id": "127997317916506"
                    },
                    "timestamp": 1510125967722,
                    "message": {
                        "mid": "mid.$cAAB0afwBne9ly8rhalfmoVdYVm9t",
                        "seq": 156762,
                        "attachments": [
                            {
                                "type": "image",
                                "payload": {
                                    "url": "https:\/\/scontent.xx.fbcdn.net\/v\/t35.0-12\/23432200_10214914220071901_1896117716_o.png?_nc_ad=z-m&_nc_cid=0&oh=15f7f97e6dc9c5d5dace7ba04a77c370&oe=5A047616"
                                }
                            }
                        ]
                    }
                }
            ]
        }
    ]
}

ข้อสังเกตุ

1. entry เป็นอะเรย์
2. messaging เป็นอะเรย์
3. attachments เป็นอะเรย์
4. โหนด message จะไม่มีบอกว่าเป็น message ธรรมดาหรือเป็น message รูปภาพ

ถ้าลองเอา message นี้ไปเปรียบเทียบกับ message ในบนก่อนหน้าที่เป็น message ธรรมดา จะเห็นว่าไม่มีบอก type เลย มีต่างกันแค่อันโน้นมีโหนด text อันนี้มีโหนด attachments ทำให้เราจะต้องเขียนเช็กเอาเองว่า ถ้ามีโหนด text ก็แสดงว่าเป็นข้อความธรรมดา ถ้ามีโหนด attachments ก็แสดงว่าเป็นพวกไฟล์หรือรูปภาพ ผมก็ยังสงสัยว่าทำไม Facebook มันไม่แถมโหนด type มาให้สักตัว จะได้ไม่ต้องมานั่งแยกเอง

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

<?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

    $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 image path is '. $input['entry'][0]['messaging'][0]['message']['attachments'][0]['payload']['url'] .'"
        }
    }';

    /* 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']))

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 ของผู้รับและข้อความที่เราต้องการส่งไปให้ ผมส่ง path ของรูปภาพกลับไปให้ยูสเซอร์ดู

/*prepare response*/
$jsonData = '{
"recipient":{
    "id":"' . $sender . '"
    },
    "message":{
        "text": "Your image path is '. $input['entry'][0]['messaging'][0]['message']['attachments'][0]['payload']['url'] .'"
    }
}';

สั่ง 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 image path is ตามด้วยข้อความที่คุณทักไป