實時web應用方案——SignalR(.net core)

想做鏟屎官發表於2020-06-26

何為實時

先從理論上解釋一下兩者的區別。

大多數傳統的web應用是這樣的:客戶端發起http請求到服務端,服務端返回對應的結果。像這樣:

 

也就是說,傳統的web應用都是客戶端主動發起請求到服務端。

那麼實時web應用呢?它不需要主動發起請求,服務端可以主動推送資訊到客戶端。

舉栗子的話,實時聊天工具、web遊戲等都可以算是實時應用。

什麼是SignalR

如果想做一個實時應用,最好用web socket。很早以前我也寫過web socket的實現方式,但不夠全面,這裡再補上一篇。

來說說signalR,它是一款開源的實時框架,可以使用三種方式實現通訊(long polling、server sent events、web socket)。它很好的整合了底層技術,讓我們可以不用關注底層技術實現而把精力聚焦在業務實現上。一個完整的signalR包括客戶端和服務端,服務端支援net core/net framework,還支援大部分客戶端,比如瀏覽器和桌面應用。

回落機制

為了相容不同瀏覽器(客戶端)和服務端,signalR採用了回落機制,使得它可以根據情況協商使用不同的底層傳輸方式。假如瀏覽器不支援web socket,就自動降級使用sse,再不行就long polling。當然,也可以禁用這種機制,指定其中一種。

三種通訊方式

long polling(長輪詢)

長輪詢是客戶端發起請求到服務端,伺服器有資料就會直接返回。如果沒有資料就保持連線並且等待,一直到有新的資料返回。如果請求保持到一段時間仍然沒有返回,這時候就會超時,然後客戶端再次發起請求。

這種方式優點就是簡單,缺點就是資源消耗太多,基本是不考慮的。

server sent events(sse)

如果使用了sse,伺服器就擁有了向客戶端推送的能力,這些資訊和流資訊差不多,期間會保持連線。

這種方式優點還是簡單,也支援自動重連,綜合來講比long polling好用。缺點也很明顯,不支援舊的瀏覽器不說,還只能傳送本文資訊,而且瀏覽器對sse還有連線數量的限制(6個)。

web socket

web socket允許客戶端和服務端同時向對方傳送訊息(也就是雙工通訊),而且不限制資訊型別。雖然瀏覽器同樣有連線數量限制(可能是50個),但比sse強得多。理論上最優先使用。

進入正題

開始之前,還需要了解RPC和Hub的概念。

RPC:全程Remote Procedure Call,字面意思遠端服務呼叫,可以像呼叫本地方法一樣呼叫遠端服務。前端可以呼叫後端方法,後端也可以呼叫前端方法。

Hub:基於RPC,接受從客戶端發過來的訊息,也同時負責把服務端的訊息傳送給客戶端。客戶端可以呼叫Hub裡面的方法,服務端可以通過Hub呼叫客戶端裡面的方法。

好了,概念已經理解清楚了,接下來上程式碼。

在專案裡新增Hub類:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRDemo.Server
{
    public class SignalRHub : Hub
    {
        /// <summary>
        /// 客戶連線成功時觸發
        /// </summary>
        /// <returns></returns>
        public override async Task OnConnectedAsync()
        {
            var cid = Context.ConnectionId;

            //根據id獲取指定客戶端
            var client = Clients.Client(cid);

            //向指定使用者傳送訊息
            await client.SendAsync("Self", cid);

            //像所有使用者傳送訊息
            await Clients.All.SendAsync("AddMsg", $"{cid}加入了聊天室");
        }
    }
}

為了讓外部可以訪問,我們還需要一個控制器。在控制器裡宣告隨便建一個:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using SignalRDemo.Server;
using System.Threading.Tasks;

namespace SignalRDemo.Controllers
{
    public class HomeController : Controller
    {
        private readonly IHubContext<SignalRHub> _countHub;

        public HomeController(IHubContext<SignalRHub> countHub)
        {
            _countHub = countHub;
        }

        /// <summary>
        /// 傳送資訊
        /// </summary>
        /// <param name="msg"></param>
        /// <param name="id"></param>
        /// <returns></returns>
        public async Task Send(string msg, string id)
        {
            await _countHub.Clients.All.SendAsync("AddMsg", $"{id}:{msg}");
        }
    }
}

再然後進入StartUp設定端點:

endpoints.MapHub<SignalRHub>("/hub");

完成以後,配置signalr客戶端:

setupConn = () => {
    conn = new signalR.HubConnectionBuilder()
        .withUrl("/hub")
        .build();

    conn.on("AddMsg", (obj) => {
        $('#msgPanel').append(`<p>${obj}</p>`);
    });

    conn.on("Finished", () => {
        conn.stop();
        $('#msgPanel').text('log out!');
    });

    conn.on("Self", (obj) => {
        $('#userId').text(obj);
    });

    conn.start()
        .catch(err => console.log(err));
}

要注意withUrl裡面的路徑就是之前設定好的端點。

執行效果:

 

 

 Hub還支援組操作,比如:

//將使用者新增到A組
await
Groups.AddToGroupAsync(Context.ConnectionId, "GroupA");
//將使用者踢出A組
await Groups.RemoveFromGroupAsync(Context.ConnectionId, "GroupA");
//向A組所有成員廣播訊息
await Clients.Group("GroupA").SendAsync("AddMsg", "群組訊息");

更多操作請參考官方文件。

本文演示demo的原始碼見git,地址:https://gitee.com/muchengqingxin/SignalRDemo.git

相關文章