.net core 2.1 以上SignalR實現
本教程教生成實時應用程序使用 ASP.NET Core SignalR 的基礎知識。
SignalR在.net core2.1以前是需要下載 Microsoft.AspNetCore.SignalR 包。在.net core 2.1的時候sdk集成了這個包，所以就不要添加包，本文演示的也是基於.net core 2.1的，請確保你的sdk為2.1如果不是請安裝.net core 2.1。
官方SDK下載地址為：https://www.microsoft.com/net/download/visual-studio-sdks。
完整程序代碼：https://pan.baidu.com/s/1pYp9oxBaRmwoq8AAkpji1A
本教程演示SignalR以下內容：
1、在 ASP.NET 核心 web 應用上創建 SignalR。
2、創建一個 SignalR 集線器，以將內容推送到客戶端。
3、修改Startup類並將應用配置。
必要條件：
1、.NET 核心 2.1.0 預覽 2 SDK或更高版本
2、Visual Studio 2017 15.7 或使用更高版本ASP.NET 和 web 開發工作負荷或者Visual Studio Code（不推薦，不知道是插件安裝不對嗎,代碼提示不智能）
3、npm
本文以Visual Studio 2017 開發工具講解。
創建 ASP.NET Core 項目承載 SignalR 客戶端和服務器
-
將類添加到項目中，通過選擇文件 > 新建 > 文件並選擇Visual C# 類。
-
繼承自
Microsoft.AspNetCore.SignalR.Hub。Hub類包含屬性和管理連接和組，以及發送和接收數據的事件。 -
創建
SendMessage將消息發送到所有連接的聊天客戶端的方法。 請註意它將返回任務，這是因為 SignalR 是異步的。 更好地縮放異步代碼。using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.SignalR; namespace SignalRChat.Hubs { public class ChatHub : Hub { ///
<summary> /// 建立連接時觸發 /// </summary> /// <returns></returns> public override async Task OnConnectedAsync() { await Clients.All.SendAsync("ReceiveMessage", $"{Context.ConnectionId} joined"); } /// <summary> /// 離開連接時觸發 /// </summary> /// <param name="ex"></param> /// <returns></returns> public override async Task OnDisconnectedAsync(Exception ex) { await Clients.All.SendAsync("ReceiveMessage", $"{Context.ConnectionId} left"); } /// <summary> /// 向所有人推送消息 /// </summary> /// <param name="message"></param> /// <returns></returns> public Task Send(string message) { return Clients.All.SendAsync("ReceiveMessage", $"{Context.ConnectionId}: {message}"); } /// <summary> /// 向指定組推送消息 /// </summary> /// <param name="groupName"></param> /// <param name="message"></param> /// <returns></returns> public Task SendToGroup(string groupName, string message) { return Clients.Group(groupName).SendAsync("ReceiveMessage", $"{Context.ConnectionId}@{groupName}: {message}"); } /// <summary> /// 加入指定組並向組推送消息 /// </summary> /// <param name="groupName"></param> /// <returns></returns> public async Task JoinGroup(string groupName) { await Groups.AddToGroupAsync(Context.ConnectionId, groupName); await Clients.Group(groupName).SendAsync("ReceiveMessage", $"{Context.ConnectionId} joined {groupName}"); } /// <summary> /// 推出指定組並向組推送消息 /// </summary> /// <param name="groupName"></param> /// <returns></returns> public async Task LeaveGroup(string groupName) { await Groups.RemoveFromGroupAsync(Context.ConnectionId, groupName); await Clients.Group(groupName).SendAsync("ReceiveMessage", $"{Context.ConnectionId} left {groupName}"); } /// <summary> /// 向指定Id推送消息 /// </summary> /// <param name="userid">要推送消息的對象</param> /// <param name="message"></param> /// <returns></returns> public Task Echo(string userid, string message) { return Clients.Client(Context.ConnectionId).SendAsync("ReceiveMessage", $"{Context.ConnectionId}: {message}"); } /// <summary> /// 向所有人推送消息 /// </summary> /// <param name="user"></param> /// <param name="message"></param> /// <returns></returns> public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", Context.ConnectionId, message); } } }
配置項目以使用 SignalR
必須配置 SignalR 服務器，這樣就知道要傳遞給 SignalR 的請求。
-
若要配置 SignalR 項目，請修改項目的
Startup.ConfigureServices方法。services.AddSignalR作為的一部分添加 SignalR中間件管道。 -
配置路由到你使用的中心
UseSignalR。1 using Microsoft.AspNetCore.Builder; 2 using Microsoft.AspNetCore.Hosting; 3 using Microsoft.AspNetCore.Http; 4 using Microsoft.Extensions.Configuration; 5 using Microsoft.Extensions.DependencyInjection; 6 using SignalRChat.Hubs; 7 8 namespace SignalRChat 9 { 10 public class Startup 11 { 12 public Startup(IConfiguration configuration) 13 { 14 Configuration = configuration; 15 } 16 17 public IConfiguration Configuration { get; } 18 19 public void ConfigureServices(IServiceCollection services) 20 { 21 services.Configure<CookiePolicyOptions>(options => 22 { 23 options.CheckConsentNeeded = context => true; 24 options.MinimumSameSitePolicy = SameSiteMode.None; 25 }); 26 27 services.AddMvc(); 28 37 services.AddSignalR(); 38 } 39 40 public void Configure(IApplicationBuilder app, IHostingEnvironment env) 41 { 42 if (env.IsDevelopment()) 43 { 44 app.UseBrowserLink(); 45 app.UseDeveloperExceptionPage(); 46 } 47 else 48 { 49 app.UseExceptionHandler("/Error"); 50 app.UseHsts(); 51 } 52 53 app.UseHttpsRedirection(); 54 app.UseStaticFiles(); 55 app.UseCookiePolicy(); 57 app.UseSignalR(routes => 58 { 59 routes.MapHub<ChatHub>("/chathub"); 60 }); 61 app.UseMvc(); 62 } 63 } 64 }
創建 SignalR 客戶端代碼
-
替換中的內容Pages\Index.cshtml替換為以下代碼：
@page <div class="container"> <div class="row"> </div> <div class="row"> <div class="col-6"> </div> <div class="col-6"> User..........<input type="text" id="userInput" /> <br /> Message...<input type="text" id="messageInput" /> <input type="button" id="sendButton" value="Send Message" /> </div> </div> <div class="row"> <div class="col-12"> <hr /> </div> </div> <div class="row"> <div class="col-6"> </div> <div class="col-6"> <ul id="messagesList"></ul> </div> </div> </div><script src="~/lib/SingnlR/signalr.js"></script> <script type="text/javascript"> const connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build(); connection.on("ReceiveMessage", (user, message) => { const encodedMsg = user + " says " + message; const li = document.createElement("li"); li.textContent = encodedMsg; document.getElementById("messagesList").appendChild(li); }); document.getElementById("sendButton").addEventListener("click", event => { const user = document.getElementById("userInput").value; const message = document.getElementById("messageInput").value; connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString())); event.preventDefault(); }); connection.start().catch(err => console.error(err.toString())); </script>
前面的 HTML 顯示名稱和消息字段和提交按鈕。 請註意在底部的腳本引用： 至於 SignalR在中運行以下命令程序包管理器控制臺窗口，
npm init -y npm install @aspnet/signalr請從項目根：復制signalr.js文件從node_modules\ @aspnet\signalr\dist\browser* 到lib*項目文件夾中的。
運行應用
- Visual Studio
- Visual Studio Code
-
選擇調試 > 啟動而不調試啟動瀏覽器並加載網站本地。 從地址欄復制 URL。
-
打開另一個瀏覽器實例 （任何瀏覽器），然後在地址欄中粘貼該 URL。
-
選擇任一瀏覽器，輸入名稱和消息，然後單擊發送按鈕。 名稱和消息會顯示在兩個頁面上立即。
.net core 2.1 以上SignalR實現