ASP.NET Core SignalR：基礎概述

1、簡介

　　ASP.NET Core SignalR 是一個開源代碼庫，它簡化了嚮應用添加實時 Web 功能的過程。 實時 Web 功能使服務器端代碼可以即時將內容推送到客戶端。

　　SignalR 的適用對象：

• 須要來自服務器的高頻率更新的應用。 例如：遊戲、社交網絡、投票、拍賣、地圖和 GPS 應用。
• 儀表板和監視應用。 示例包括公司儀表板、銷售狀態即時更新或行程警示。
• 協做應用。 協做應用的示例包括白板應用和團隊會議軟件。
• 須要通知的應用。 社交網絡、電子郵件、聊天、遊戲、行程警示以及許多其餘應用都使用通知。

　　SignalR 提供了一個用於建立服務器到客戶端遠程過程調用（RPC）的 API。 RPC 經過服務器端 .NET Core 代碼調用客戶端上的 JavaScript 函數。

如下是 ASP.NET Core SignalR 的一些功能：

• 自動管理鏈接。
• 同時向全部鏈接的客戶端發送消息。 例如，聊天室。
• 將消息發送到特定的客戶端或客戶端組。
• 擴展以處理增長的流量。

2、軟件

　　一、vs2017

　　二、.Net Core SDK 2.2

3、添加SignalR客戶端庫

　　一、在「解決方案資源管理器」 中，右鍵單擊項目，而後選擇「添加」 >「客戶端庫」 。

　　二、在「添加客戶端庫」 對話框中，對於「提供程序」 ，選擇「unpkg」 。

　　三、對於「庫」 ，輸入 @aspnet/signalr@1，而後選擇不是預覽版的最新版本。

　　

　　四、選擇「選擇特定文件」 ，展開「dist/browser」 文件夾，而後選擇「signalr.js」 和「signalr.min.js」 。

　　五、將「目標位置」 設置爲 wwwroot/lib/signalr/ ，而後選擇「安裝」，將會建立 wwwroot/lib/signalr 文件夾並將所選文件複製到該文件夾 。

　　

 4、建立SginalR類

　　建立文件BaseHub.cs。

namespace SignalRDemo.Hubs { public class BaseHub : Hub { public async Task SendMessage(string user,string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); } } }

　　BaseHub類繼承SginalR的Hub類。Hub管理鏈接、組和消息。

　　客戶端可經過調用SendMessage向客戶端發送消息。SignalR 代碼是異步模式，可提供最大的可伸縮性。

5、配置SignalR

　　在 Startup.cs 文件中將SignalR注入到中間件管道，並註冊前端的訪問地址。

public IConfiguration Configuration { get; } 
        public void ConfigureServices(IServiceCollection services) { 　　//...... services.AddSignalR(); }
        public void Configure(IApplicationBuilder app, IHostingEnvironment env) { 　　　　　　　　//...... app.UseSignalR(routes => { routes.MapHub<BaseHub>("/Hub"); }); 　　　　　　　　//..... }

6、客戶端頁面通訊

　　一、引用 signalr.js

<script src="~/lib/signalr/dist/browser/signalr.js"></script>

　　二、建立而且啓動鏈接

　　三、添加接收服務器端消息ReceiveMessage的處理程序

　　四、添加點擊事件，發送消息至服務器端SendMessage方法

<script type="text/javascript">
    //一、建立而且啓動鏈接
    var connection = new signalR.HubConnectionBuilder().withUrl("/Hub").build(); connection.start().then(function () { }).catch(function (err) { return console.error(err.toString()); }); //二、添加接收服務器端消息ReceiveMessage的處理程序
    connection.on("ReceiveMessage", function (user, message) { $('#content').append(user + ":" + message); }); //三、添加點擊事件，發送消息至服務器端SendMessage方法
    $(document).on('click','#btn_submit', function () { var user = $("#user").val(); var message = $("#message").val(); connection.invoke("SendMessage", user, message).catch(function (err) { return console.error(err.toString()); }); event.preventDefault(); }) </script>

　　五、頁面元素

<div class="text-center">
    <input type="text" id="user"/>
    <input type="text" id="message"/>
    <input type="button" value="發送" id="btn_submit"/>
</div>
<div id="content">

</div>

7、效果

　　

 

 　　在兩個輸入框輸入信息，點擊發送會在頁面上顯示。