ASP.NET Core SignalR 是一個開放原始碼程式庫,提供了Server與Client端之間的即時通訊,並簡化Server端的使用方式。
SignalR所提供的功能有:
SignalR 適合用在以下情境的應用:
以下範例為使用ASP.NET Core建立SignalR應用
首先先使用 .NET CLI 建立一個MVC的專案dotnet new mvc -o SignalRSample
接著在根目錄下建立一個Hubs的目錄,並新增SampleHub.cs
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;
namespace SignalRSample.Hubs
{
public class SampleHub : Hub
{
public Task SendMessage(string user, string message)
{
return Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}
Clients
是Hub中的屬性(property),透過All.SendAsync
來對所有連線的用戶發送訊息
Clients
還包含其他伺服器與用戶端之間通訊的屬性:
Hub.Clients還包含了以下方法:
上面列表中的每個屬性或方法的回傳值都提供呼叫SendAsync方法。SendAsync可以指定要呼叫用戶端的方法名稱,並傳入參數。
接著在Startup.ConfigureServices
中註冊SignalR的服務
services.AddSignalR();
並在Startup.Configure
的Endpoint中加入對應的Hub與路由
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<SampleHub>("/samplehub"); //加入這行 代表連接SignalR的路由與配對的Hub
});
Server端的部分就設定完畢了
接著下方的範例就簡單示範由js呼叫Server端的sampleHub
在Views/Home/Index.cshtml加入以下內容
@* 用CDN的方式載入signalr.js *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.js"></script>
<script>
//設定SignalR的連線資訊
var connection = new signalR.HubConnectionBuilder().withUrl("/sampleHub").build();
//開啟ReceiveMessage的通道,Server只要呼叫ReceiveMessage,這邊就會接著執行function
connection.on("ReceiveMessage", function (user, message) {
alert(`connect ${user} ${message}`)
});
//與Server建立連線
connection.start().then(function () {
//呼叫Hub中的SendMessage方法,並傳入參數(參數數量要相等,不然會報錯)
connection.invoke("SendMessage", 'hi', 'ATai').catch(function (err) {
return console.error(err.toString());
});
}).catch(function (err) {
return console.error(err.toString());
});
設定完畢之後啟動網站進入首頁就能收到通知了
參考資料
Use hubs in SignalR for ASP.NET Core