2017/12/24

第五天:認識 Line Messaging API Webhook( 2018 iT邦幫忙鐵人賽-只要有心,人人都可以作卡米狗 )

markdown 上一篇:[第四天:認識 Webhook](http://etrex.blogspot.tw/2017/12/webhook-2018-it.html) # Line Messaging API Webhook 運作原理 不囉嗦直接上圖 ### 訂閱階段 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAjvNrQDHsHH5Ro4Fif-Ia45ZUz0IuzTKRcdS5_CfuYi7oSk-Khya2OVtS80PS6ZzMUeixa-P5bcc5ky_MyxMyKfBVyv3XYh9NhF1caLW_8PO2nuWFvPtqG4PQ3gXL3kmzrhcSTTzj58/s1600/%25E8%25A8%2582%25E9%2596%25B1%25E9%259A%258E%25E6%25AE%25B5.jpg) 這個階段是我們在 Line developer 後台填入卡米狗的通訊地址,然後按下送出。 ### 通知階段 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-rAJfftkPnz2gbmPrr8VMZK3E5pvHThgKhfzhTMskEWB1zxotCjg5Iio8dWXLkbDAUO7iU-gSH-vIN9KUG3rhvvkzpKJZra21HWxTaT6_myDD5wdy8NwrxGJg2wDS7cfY3XYZTfCkBU/s1600/%25E5%25A5%25BD%25E5%258F%258B%25E7%25BE%25A4%25E7%25B5%2584%25E6%2596%2587%25E5%25AD%2597%25E8%25A8%258A%25E6%2581%25AF.jpg) 這個階段是當有人使用 Line 傳訊息給卡米狗所在的群組,就會收到通知。Line 會把這樣的訊息傳到我們設定好的通訊地址。 ### 行動階段 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLQii2gGb9An6drl3BljpZ0xX9T9EIfaNU20ZSXH1NqaMZCdyBS5t6oJsN86wX7dQn3lwLU9KZL5lx5JJDFMPoULLNZjgp-7x9uDCflUKepXlTDCFyXOrUj3pscATNu8OISXUndna9Lc/s1600/%25E5%259B%259E%25E8%25A6%2586%25E8%25A8%258A%25E6%2581%25AF.jpg) 這個階段是卡米狗回應群組訊息,卡米狗會把訊息傳給 Line ,然後 Line 再幫我們傳到群組。 所以 Line 扮演的就只是個傳話的工具人。 以上就是一個完整的 Line Messaging API Webhook 運作原理,每一張圖都代表了一次 HTTPS 協定的傳輸(一個 HTTPS Request + 一個 HTTPS Response),在這裡你可以注意到全部的回應都是「好哦~好哦~」,這是表示簽收包裹的意思。 圖中的#01、#02表示一個代號,用來做識別用,同一個用戶會有同一個代號。就跟唐伯虎的代號叫9527一樣,在我們這裡不稱呼你為唐伯虎。「[9527就是你的終生代號,開始做事!](https://www.youtube.com/watch?v=eNfVcWJv96I)」 # Line Messaging API 的各種通知 ### 你被加好友 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVdeULH-i7h4k8n3F7cYCWBEnhNVnsxt74Vz9igdyws-2io_jAU9-zms-VOzMvbNCFn18N16vKuaflxJKzk9dcDWjVYIrR0bum9fr-2IINoWR57YoSvhG6hAYKjilhUfQdCwZ3fjJ2vM/s1600/%25E5%258A%25A0%25E5%25A5%25BD%25E5%258F%258B.jpg) ### 你被封鎖 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx8xEH5iSzFJKZAJqSmXYXgGIajpArk49q7HMeAkze0msYG_eQpbmmztMm6hEYicgkJvvIVm_G4AQidT0pjRUBEFj0WWU4mVWQbL7q65DbTW20YA4z_j7SJYqD8hoP4PevHSbkWbV4bIY/s1600/%25E5%25B0%2581%25E9%258E%2596.jpg) ### 你被加入群組 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3w2HkF59jdwSeI4NIO9yvzLdF-GVaLVtxRGNdFEPltADmHZByawpzhXfY-6pBDCnuiVlp06ViJ1pM4fzGjln0vwCl8kXJwPTQWTZPTYITzgMfd-XIytfvBwfhrUsT7UEPHw0h8l7hmJU/s1600/%25E9%2580%25B2%25E5%2585%25A5%25E7%25BE%25A4%25E7%25B5%2584.jpg) ### 你被踢出群組 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlAtI3pWf47yeY6qbmqRmH72x4dK4a0yy-7kY8yG9D0NwN2_adDLCgc6CIRwk_q4FUID5gWYr8J9Ro47s1EvQJIHiwJlUP3l73JBRSmnej7MeJMhggioEdlSe0bS3uh2-UPzLg6Bnr2R0/s1600/%25E8%25A2%25AB%25E8%25B8%25A2%25E5%2587%25BA%25E7%25BE%25A4%25E7%25B5%2584.jpg) ### 有人加入你已經在裡面的群組 沒有,沒有這種通知,所以沒辦法在有人加入群組時讓卡米狗跟他打招呼。 因為 Line 不給的,你不能拿。 ### 在聊天室的陌生人傳送的文字訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLvADzPXLO9h4UF0a2v988IA6aFxq4CvlECRDup8ScHZ_NW6_5VNG4TEeikatK2amDn-Gkpjv47WLJCpY90mqfLJRFlArtT4tACCENLpqzM-_AxS8Zu3iF59esQIf_SgV31gsbtp8dr0/s1600/%25E9%259D%259E%25E5%25A5%25BD%25E5%258F%258B%25E8%2581%258A%25E5%25A4%25A9%25E5%25AE%25A4%25E6%2596%2587%25E5%25AD%2597%25E8%25A8%258A%25E6%2581%25AF.jpg) ### 在群組的陌生人傳送的文字訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOGMHVtZImJiVeJ1X2aUBCyOMYYTm8iw-VEIKgetMb-BtQtEnm4gfeCWwNrYRmc07SFgo7DEDVjhzwjYzIRhhyOWtkHj_B-r7E3pma6YGF0r-yKDBQtZ2MaT2ll820sHS0nALjHj1K9o/s1600/%25E9%259D%259E%25E5%25A5%25BD%25E5%258F%258B%25E7%25BE%25A4%25E7%25B5%2584%25E6%2596%2587%25E5%25AD%2597%25E8%25A8%258A%25E6%2581%25AF.jpg) ### 在群組的好友傳送的文字訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLIsUkv7VHeS8QxNbxMTXFuZHS14YamgLorswASeaSwNQWg3PFE1iDQrE-aaulGEvKAM6cQ2IusrXawkRzuL6AIZ3kKIL3gsaf96fqg39xBTVHPpvC1oogCvao-sEWvbUzsLe0z4PyBHY/s1600/%25E5%25A5%25BD%25E5%258F%258B%25E7%25BE%25A4%25E7%25B5%2584%25E6%2596%2587%25E5%25AD%2597%25E8%25A8%258A%25E6%2581%25AF.jpg) 其實這邊的好友是聊天機器人之友。他不一定有加你好友,只要他有加任何一個 Line 聊天機器人好友,你就能知道他是誰。 ### 在私訊的文字訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW7QDgJUxqTwQrIQAQAzBKfWWhtU1TqWomiP5G09vivHVtEy5KsIyKXs8sdDLXjpsPiFegPU8hfWxcGuaAMiuIGa4XT7Pr1UVGEOMh88YmbjG1Uz0UfI76Kp5x1WYL_44ZlvYkAuD6eXg/s1600/%25E7%25A7%2581%25E8%25A8%258A.jpg) 以下就用私聊示範各種訊息類型: ### 貼圖訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxbpZy-pZkJJLAop1qywO99yp0wpIrcBJ-woEBBEv1arRthOIXGITS6BArysGtbD-VK9gqadPz5T75E8NUICmpJdt04zofsAFh6HmGxy55wm5ji7bPh-o055S3L_A1_xq6BgTF-BshPpk/s1600/%25E8%25B2%25BC%25E5%259C%2596%25E8%25A8%258A%25E6%2581%25AF.jpg) ### 圖片訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOAPQRTyG7NiB3eCsHtrRtoFyAIrdKc7tmeAj6NhBDukIdYgmZAB1MDlsru2mebqneGlvys-2BmZ8tPi-fIcXsbIFC0XBcqVkg0zSROWZAcoENjRZdXD54_JQfxVOCQlfcui4kH8yRjAU/s1600/%25E5%259C%2596%25E7%2589%2587%25E8%25A8%258A%25E6%2581%25AF.jpg) ### 影片訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrANXA4cJjpM1KfzTwBOo-xBche06kCutzb5w9wXZHavKX_15aKNVyDJ8lbt8fx9zeAYLVoBB9zQ8N016x8xD2pu_zEP-k9eqR2IWqbW67S6cpOXzgZsmwLY_MiFvxWdCtbIWiOl8Gdr8/s1600/%25E5%25BD%25B1%25E7%2589%2587%25E8%25A8%258A%25E6%2581%25AF.jpg) ### 聲音訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJysfxsNI1GsqlsW19jzcjd89IjmMPbEwL1QMo8EUfGmzyavJ6z0Q85Dgocelk7HhkqAo4f7H20y6WHY_KJpvGX8ep5Z4YXi00GoCbnZ2lPtUofPs1eM3Ll8pXKY3auadKEpQaU2_7oM/s1600/%25E8%2581%25B2%25E9%259F%25B3%25E8%25A8%258A%25E6%2581%25AF.jpg) ### 檔案訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdmEHG312m64Q04UkZqC4L9oQfauOFZynNQyOHvWvsV89F4IQisPlFjon9iy127g3i2FqRFZLb4lU0yZVsfm0jRP1_b65PSBVErur-lpG2pU6Iei06TMuGvORAAbbEkPTykRRPXZYJ1aQ/s1600/%25E6%25AA%2594%25E6%25A1%2588%25E8%25A8%258A%25E6%2581%25AF.jpg) ### 位置訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg0vsDpMO93vwVsJK6BGoREQYKDUO6tvV4V_1YKf2EW50qUnZKE43gRSbYGCuctxCp5ZNuvDw0LKrISBNSfRR0pEg6CU7sDnZq5Mq8DhOEf2A5Xf3KkH77Inl-2hXPRoz-pdESeWBQ7U4/s1600/%25E4%25BD%258D%25E7%25BD%25AE%25E8%25A8%258A%25E6%2581%25AF.jpg) ### Beacon 訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwuws4sX8tYauRiY2wa9bcyotiXMCicaWfbAXIdfQbalNUJcG8r9OfZQ_xfx7dvlzZmvMky-D1zd9bDYRSFV6Eh6ELkT1m7-aEXpWy2V4sEh-_VUvyGdhaKPSDGBvh3vbuzcy37lZO_z8/s1600/BEACON%25E8%25A8%258A%25E6%2581%25AF.jpg) Beacon 是一種感測設備,如果你的手機有開啟定位功能,接近 Beacon 時,就可以被偵測到。這技術被用來做微定位,位置訊息的誤差值很大而且在室內還有可能無法定位。若在一個室內安裝足夠多的 Beacon,就能得知這隻手機的準確位置。 ### Postback 訊息 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MRgtNpaQu4NTP1kVVf5qFZ7PAWv9K7LzMGsY9s3gafm2vF1Q4Ge7islYvT06a0HQROLe7EIZobTiSn1dxsnbUlZDzKa-s-RIrebjcom4bBstHiwuNMo4-jO-Rkz_QiKqgxdh9T7ncpM/s1600/Postback%25E8%25A8%258A%25E6%2581%25AF.jpg) 在你傳送含有按鈕的訊息給用戶後,若用戶點擊了按鈕,你就會收到 Postback 訊息。 以上全部的「好哦~好哦~」都只是簽收而已,還沒有回應訊息,下面才會講怎麼回應訊息。 # Line Messaging API 的各種行動 能做的事情蠻多的,詳細的以後有空再講。今天先講幾個重要的就好。 ### 關於回郵信封的使用 使用回郵信封(Reply Token)就可以不用花錢,在現實世界中是這樣運作的,在 Line Messaging API 也是如此。當你獲得一個回郵信封時,你必須在30秒之內寄出回應。因為回郵信封會在 30 秒之後失效。如果你在失效之後才寄出信, Line 就不會幫你傳話。如果你不使用回郵信封,就得買郵票。 準確地說,Line 允許你回應訊息(Reply Message),但是不允許你主動發訊息(Push Message)。如果你想要主動傳訊息就得付錢。那麼到底要付多少錢呢?他是包月制的,如果你在建立聊天機器人的時候選擇 Develop Trail (試用版),那就還是不用錢。但如果你選擇的是 Free (免費版),免費版要先升級成進階版才能用。顆顆,你每個月至少要給 Line 台幣 $3888元。 超貴 der。 ### 傳送訊息 一次最多可以傳出 5 則訊息。 ### 文字訊息 單一訊息你最多可以傳 2000 個字。 回覆訊息(Reply Message)的情況: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikemBnCFn8eoZoknvgEQFCqjz-t8xlPEt97FMj16boum5NGuzBvupxWvW7ND_pwn2wn6OxZNRJE5v8GIRyo6s5nDM5bOhm_8znFhNulnS2nZwP6ecXgo4JJ1tA_iDZqE-cqF_XLnCqfwQ/s1600/%25E5%259B%259E%25E8%25A6%2586%25E8%25A8%258A%25E6%2581%25AF.jpg) 使用回郵信封(Reply Token)時,不需要指名傳給誰。 主動傳訊(Push Message)的情況: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpyczNsTz7jgXdTp4h4l4BCsuPnmFSZaTdaEKGdsc532pydu6ureb3zIglyL8xqvAwjp-P4KfrN-0gX2jMKPgNPy-_qNXUs_uhvdOeWxKaK4dZnmRrZik4VnIeYpuj9VNoxEz2MDPxDs/s1600/Push.jpg) 不使用回郵信封(Reply Token)時,就必須指定要把訊息傳送到哪裡。 ### 貼圖訊息 一個新的 Line 帳號有四套貼圖可以用。你的 Line 帳號也有這四套貼圖,就是饅頭人、熊大那些。聊天機器人只能傳送這四套貼圖裡的貼圖,不能傳其他的貼圖。所以我覺得沒什麼搞頭。 ### 取得用戶基本資料 你可以拿有加你好友的用戶代碼去查詢用戶資料,你可以獲得他的暱稱、大頭照網址、狀態。 ### 取得圖片、聲音、影片、檔案內容 你可以拿代碼再去查詢內容。你可能會問他為什麼不一開始就給你?因為這些東西比較重,而且你不一定用到,或者你家可能已經有一個一樣的東西。一切都是為了效率R~ # 講一點不是人話的東西 其實哪有這麼爽,做聊天機器人這麼容易的話,大家早就做一堆了。 上面講的全都是擬人化之後的東西,實際上是這樣: ### 前方高能注意 當有人私訊卡米狗時,Line 傳來的通知其實是長這樣: ``` { "replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA", "type": "message", "timestamp": 1462629479859, "source": { "type": "user", "userId": "U4af4980629..." }, "message": { "id": "325708", "type": "text", "text": "Hello, world" } } ``` 請保持耐心地讀完,容我簡單說明一下。 ### 認識結構化資料 因為傳遞結構化的資料,對於後續處理上來說會比較有效率,所以我們(工程師)通常這麼說話。 從 Line 傳來的訊息其實是: - 回郵信封:"nHuyWiB7yP5Zw52FIkcQobQuGDXCTA" (這是一個亂碼,請勿嘗試讀懂他。你看不懂是正常的,因為我也看不懂。) - 通知類型:這是一則訊息 - 傳送時間:1462629479859 (這是從西元19XX年到目前為止經過的總毫秒數) - 來源: - 類型:這是發生在私聊 - 用戶:"U4af4980629..." (雖然這也是亂碼,但是我有注意到一點:開頭肯定是U,應該是代表 User (用戶)的意思。) - 訊息: - 代碼:"325708" - 類型:這是一則文字訊息 - 文字:"Hello, world" 簡單一點的結構化: - 發生什麼事:有人傳私訊 - 是誰:"U4af4980629..." - 他說什麼:"Hello, world" 用人話來說: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5-tKrEB8pdPriZdkk68vwUJ93s39tKFaXiV6R4z597zbLnba_-pCfDiPPRH48FOurgvDkFrtrN3BfvCFH0pxNft2UjU-4Tp9ZytRRopJSXQCjDtNybFC0qR8rzhX37QhQDoQN1ZFBeGU/s1600/JSON.jpg) 卡米狗傳回的其實是長這樣: ``` http_status_code:200 ``` 用人話來說: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVIr7kEh5gUoGyvjzu9MRMuyZXenxg_YQ-rnsHaFfk1p5h9vTDik_e3srzAoJrcwFX9QOc16Q4832Qy55KGk_2ase2J-8G3mFP5QUVOFPYP6SVMqRzvRGB-snKX126_j0d38N6Cmsrcxs/s1600/200OK.jpg) 因為很重要,所以說三次,這是表示簽收,不是回覆私訊。 你若有心要學作卡米狗的話,就得慢慢看懂這些東西。 雖然這些東西會越來越硬,但我會很溫柔。 # 回到訂閱階段 最一開始有提到訂閱階段,你必須要給 Line 你家地址,他才有辦法寄通知來。 但是你家是一個網站。你有發現問題嗎? 問題是你沒有家。 怎麼辦? 這表示你需要蓋一個自己的家。 明天會講架一個網站需要哪些東西。

沒有留言: