本教程教生成实时应用程序使用 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*项目文件夹中的。
运行应用
-
选择调试 > 启动而不调试启动浏览器并加载网站本地。 从地址栏复制 URL。
-
打开另一个浏览器实例 （任何浏览器），然后在地址栏中粘贴该 URL。
-
选择任一浏览器，输入名称和消息，然后单击发送按钮。 名称和消息会显示在两个页面上立即。
