[Day 8] 讓 C# 也可以很 Social — .NET 6 C# 與 Line Services API 開發 — Text、Sticker、Image Message
Hihi 各位好,今天開始會對 Line Bot 可推送訊息進行詳細的介紹,那今天這篇的內容就是針對以下這三種訊息介紹與實作:
<<回顧上一篇<<
一、Text Message 介紹 & 實作 文件連結
Line Bot 可推送的Text Message 是由 text(文字)、emoji 組成。
- text 想必不用多說,而 Emoji 的部分根據文件描述,emoji 可以使用 Line 提供的 emojis,也可以使用 Unicode emojis(也就是手機鍵盤可以直接按出來的emoji)。
- Line 提供的 emojis : 請參考這個清單「List of available LINE emojis」內的 emojis,只有這些 emojis 可以提供給 Line Bot 傳送。
- Unicode emojis : 直接將對應的 emoji 放入 Text 內即可。
實作 Text Message
在上一篇建立傳訊機制時已經宣告了 TextMessageDto,現在只要添加 Emoji Property 到這個 Class 中即可。
- Emoji 文件內容,注意 Line Emoji 使用方式需在 Text 中使用 “$” 符號作為 emoji 位置的標記,並且在下方添加 emoji object 將 Index 設為該 “$” 符號的位置,則訊息傳送到 Line 後有被對應到的 “$” 符號就會被對應的 Line emoji 替換。
- 在 TextMessageDto.cs 下新增 Class
public class TextMessageEmojiDto
{
public int Index { get; set; }
public string ProductId { get; set; }
public string EmojiId { get; set; }
}
- 添加新的 Property 至 TextMessageDto
public List<TextMessageEmojiDto>? Emojis { get; set; }
測試
- 使用廣播功能測試 Text Message 有沒有正確宣告。
- 測試用 RequestBody
{
"Messages" : [
{
"Type":"text",
"Text" : "$ 表情符號文字測試訊息 $ ?",
"Emojis" : [
{
"Index" : 0,
"ProductID" :"5ac1bfd5040ab15980c9b435",
"EmojiId":"003"
},
{
"Index" : 13,
"ProductID" :"5ac1bfd5040ab15980c9b435",
"EmojiId":"004"
}
]
}
]
}
- 結果
二、Sticker Message 介紹 & 實作 文件連結
Line Bot 能傳送的貼圖訊息也請參考這個「List of available stickers」,只有在裡面的貼圖能夠傳送。
實作 Sticker Message
- 貼圖訊息非常單純,照著文件的格式就好
- 在 Dtos/Messages 資料夾下新增 StickerMessageDto.cs
using LineBotMessage.Enum;
namespace LineBotMessage.Dtos
{
public class StickerMessageDto : BaseMessageDto
{
public StickerMessageDto()
{
Type = MessageTypeEnum.Sticker;
}
public string PackageId { get; set; }
public string StickerId { get; set; }
}
}
- 因為多加了一種訊息類別,所以修改 LineBotService 中的 BroadcastMessageHandler Function
/// <summary>
/// 接收到廣播請求時,在將請求傳至 Line 前多一層處理,依據收到的 messageType 將 messages 轉換成正確的型別,這樣 Json 轉換時才能正確轉換。
/// </summary>
/// <param name="messageType"></param>
/// <param name="requestBody"></param>
public void BroadcastMessageHandler(string messageType, object requestBody)
{
string strBody = requestBody.ToString();
dynamic messageRequest = new BroadcastMessageRequestDto<BaseMessageDto>();
switch (messageType)
{
case MessageTypeEnum.Text:
messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<TextMessageDto>>(strBody);
break;
case MessageTypeEnum.Sticker:
messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<StickerMessageDto>>(strBody);
break;
}
BroadcastMessage(messageRequest);
}
測試
- 使用廣播功能測試 Sticker Message 有沒有正確宣告。
- 測試用 RequestBody
{
"Messages" : [
{
"Type":"sticker",
"PackageId":"789",
"StickerId":"10855"
}
]
}
- 結果
三、Image Message 介紹 & 實作 文件連結
圖片訊息也可說是非常重要的訊息內容了,除了圖片給人的印象遠比文字還深刻以外,圖片能表達出的訊息也能比文字豐富許多,所以在考慮廣告行銷時,將宣傳圖片傳給使用者是比文字更好的選擇。
實作 Image Message
- Line Bot 傳送圖片訊息時有幾項需要注意的:
- 不是將圖片檔直接丟給 Line 去傳送,而是傳送圖片在網路上的絕對路徑
- 圖片網址必須是 Https 協定(網址長度小於2000)
- 圖片檔案必須是 JPEG or PNG
- 圖片長寬大小沒有限制,但是檔案大小分別有限制 10MB & 1MB
- 先在 Dtos/Messages 資料夾下新增 ImageMessageDto.cs
using LineBotMessage.Enum;
namespace LineBotMessage.Dto
{
public class ImageMessageDto : BaseMessageDto
{
public ImageMessageDto()
{
Type = MessageTypeEnum.Image;
}
public string OriginalContentUrl { get; set; }
public string PreviewImageUrl { get;set; }
}
}
- 在 LineBotService 中的 BroadcastMessageHandler Function 添加對應的 case
case MessageTypeEnum.Image:
messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<ImageMessageDto>>(strBody);
break;
圖片絕對路徑取得方法
圖片訊息需要使用圖片在網路上的絕對路徑,意思就是圖片需要自己來管理,Line 並不處理圖片存放的問題,那這邊針對這個問題提供兩種方法,這兩種方法在後面都會使用到~那目前就先選擇一種使用即可。
- 將圖片放到可提供公開的絕對路徑的網站 例如: imgur
2. 使用 Static Files (推薦一起實作)
- 在專案中新增一個資料夾 “UploadFiles”,並將圖檔放入資料夾中。
- 在 Program.cs 內新增
// -------- 新增內容 --------
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath, "UploadFiles")),
RequestPath = "/UploadFiles",
});
// -------- 新增內容 --------
app.MapControllers();
app.Run();
- 此時就透過 Host (ngrok 網址) + “/UploadFiles/” + FileName 去存取圖片
測試
- 準備兩張圖片,放到 UploadFiles 資料夾中
- 使用 swagger 測試圖片訊息能否正確傳送
- 測試用 RequestBody
{
"Messages" : [
{
"Type":"image",
"OriginalContentUrl" : "your original content url",
"PreviewImageUrl" : "your preview image url"
}
]
}
- 在電腦版 Line 的畫面中,Preview Image 會一直顯示在聊天室畫面中,但把圖片點開後就是 Original Content 的圖片。
各位可以去看看手機版的 Line 對於 Image Message 是怎麼顯示的~
結語
今天的介紹就到這邊了,下一篇要介紹的訊息會是 Video、Audio、Location 的訊息,各位就敬請期待吧。
腦筋急轉彎
- 如果發現某張圖片的使用量(reuqests)很高,有沒有什麼方式能夠加速的方式呢?
範例程式碼
如果想要參考今天範例程式碼的部份,下面是 Git Repo 連結,方便大家參考。
Day8_Text、Sticker、Image Message
>>下一篇>>