iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

我與 ASP.NET Core 的 30天系列 第 25

[Day25] SignalR - 我與 ASP.NET Core 3 的 30天

  • 分享至 

  • xImage
  •  

ASP.NET Core SignalR 是一個開放原始碼程式庫,提供了Server與Client端之間的即時通訊,並簡化Server端的使用方式。

SignalR所提供的功能有:

  • 自動處理連接管理。
  • 同時將訊息傳送給所有已連線的用戶端。 例如,聊天室。
  • 將訊息傳送給特定用戶端或用戶端群組。
  • 調整以處理增加的流量。

SignalR 適合用在以下情境的應用:

  • 需要經常從伺服器取得更新的應用程式。例如遊戲、社交網路、投票、拍賣、地圖和 GPS 應用程式。
  • 儀表板和監視應用程式。例如公司儀表板、即時銷售更新或旅行警示。
  • 共同作業應用程式。共同作業應用程式的範例包括白板應用程式和小組會議軟體。
  • 需要通知的應用程式。例如社交網路、電子郵件、交談、遊戲、旅行警示和其他使用通知的應用程式。

設定並使用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還包含其他伺服器與用戶端之間通訊的屬性:

  • All
    在所有連線的用戶端上呼叫方法
  • Caller
    在客戶端上呼叫一個呼叫了hub方法的方法
  • Others
    在所有連接的客戶端上呼叫方法,但呼叫該方法的客戶端除外

Hub.Clients還包含了以下方法:

  • AllExcept
    在所有連接的客戶端上呼叫方法(指定連接除外)
  • Client
    在特定的已連接客戶端上呼叫方法
  • Clients
    在特定的已連接客戶端上呼叫方法
  • Group
    在指定組中的所有連接上呼叫方法
  • GroupExcept
    在指定組中除指定連接之外的所有連接上呼叫方法
  • Groups
    在多組連接上呼叫方法
  • OthersInGroup
    在一組連接上呼叫方法,但不包括呼叫集線器方法的客戶端
  • User
    在與特定用戶關聯的所有連接上方法

上面列表中的每個屬性或方法的回傳值都提供呼叫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());
});

設定完畢之後啟動網站進入首頁就能收到通知了
https://ithelp.ithome.com.tw/upload/images/20201010/20129389RhraFBl6wT.png

參考資料
Use hubs in SignalR for ASP.NET Core


上一篇
[Day24] Response快取 - 我與 ASP.NET Core 3 的 30天
下一篇
[Day26] gRPC - 我與 ASP.NET Core 3 的 30天
系列文
我與 ASP.NET Core 的 30天31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言