製作婚禮現場即時留言版- Azure SignalR Service II

第 12 屆 iThome 鐵人賽

DAY 29

Modern Web

宅男的浪漫 - 用 .NET Core 打造 Line 婚禮聊天機器人經驗分享系列第 29 篇

12th鐵人賽 .net core azure azure signalr c#

Kyle Shen

2020-10-13 12:23:59

1892 瀏覽

分享至

第12 屆iT邦幫忙鐵人賽系列文章 (Day29)

在上一篇我們用 Console App 發送訊息到 Api 的 Server Hub，並呈現在HTML上，今天這篇我們要來結合 chatbot，其實就是在chatbot當成SignalR的client而已，實際效果如下(本篇不會介紹CSS部分)：

新增一個 MessageBoard class 來處理留言板發送，這部分可以看這篇

而透過 Line 的 User Id ，我們能取得使用者的大頭照.姓名…等等資訊

public async Task ReplyAsync(string replyToken)

{

var profile = await lineProfileUtility.GetUserProfile(userId);

var hubClient = new ClientSignalR();

await hubClient.Initialize("http://localhost:12733/message");

await hubClient.SendHubMessage("SendMessage", profile.pictureUrl, profile.displayName, message);

await lineMessageUtility.ReplyMessageAsync(replyToken, "謝謝您，我們已收到留言");

}

GetUserProfile

public async Task<UserProfile> GetUserProfile(string userId)

{

using (var httpClient = new HttpClient())

{

using (var request = new HttpRequestMessage(new HttpMethod("GET"), $"{lineMessageApiBaseUrl}/{userId}"))

{

request.Headers.TryAddWithoutValidation("Authorization", $"Bearer {accessToken}");

var response = await httpClient.SendAsync(request);

if(response.StatusCode != HttpStatusCode.OK)

{

// 這邊未來應該要 log 起來

throw new Exception("get_profile_error");

}

var result = await response.Content.ReadAsStringAsync();

return JsonConvert.DeserializeObject<UserProfile>(result);

}

}

}

HTML 部分

這邊是用JavaScript去塞DOM，如果用主流框架Angular/Vue/React寫起來應該更簡潔~

document.addEventListener('DOMContentLoaded', function () {

// 建立連線

var connection = new signalR.HubConnectionBuilder()

.withUrl('/message') //因為是同個網域，要視情況換成完成Server Hub的URL

.build();

// 開始連線

connection.start()

.then(function () {

console.log('連線成功...');

})

.catch(function (error) {

console.error(error.message);

});

bindConnectionMessage(connection);

// 呈現資料到Html

function createMessageEntry(imgUrl, encodedName, encodedMsg) {

var entry = document.createElement('li');

var html = '<a href="#"><div><div id="divcss5"><img src="' + imgUrl +'" />';

html += '<span class="displayName">' + encodedName+'</span>';

html += '</div></div><p>' + encodedMsg+'</p></a>';

entry.innerHTML = html;

console.log(html);

return entry;

}

// 監聽接收訊息事件

function bindConnectionMessage(connection) {

connection.on('CallBackMessage', function (imgUrl, displayName, message) {

if (!message) return;

var encodedName = displayName;

var encodedMsg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");

var messageEntry = createMessageEntry(imgUrl, encodedName, encodedMsg);

var messageBox = document.getElementById('messages');

messageBox.appendChild(messageEntry);

messageBox.scrollTop = messageBox.scrollHeight;

});

}

});

這樣就能完成即時用Line傳送的留言板了，但這個只是Demo，真正的話還是要審核一下訊息，不然把怪怪的訊息發送到大螢幕就不好啦。Azure SignalR Service 已經大大降低做即時通訊的開發門檻，透過這種服務就能去發想更多的應用！