一、介绍

SignalR 是一个用于实现实时网站的 Microsoft .NET 库。它使用多种技术来实现服务器与客户端间的双向通信,服务器可以随时将消息推送到连接的客户端。

https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?tabs=visual-studio&view=aspnetcore-3.0

二、新建Core MVC项目并安装

三、添加 SignalR 客户端库

在“解决方案资源管理器” 中,右键单击项目,然后选择“添加” >“客户端库”

在“添加客户端库” 对话框中,对于“提供程序” ,选择“unpkg” 。

对于“库” ,输入 @aspnet/signalr@1,然后选择不是预览版的最新版本。

选择“选择特定文件” ,展开“dist/browser” 文件夹,然后选择“signalr.js” 和“signalr.min.js” 。

将“目标位置” 设置为 wwwroot/lib/signalr/ ,然后选择“安装” 。

四、创建 SignalR 中心即操作中心。

Hub 消息处理中心

public class TestHub : Hub
{
public TestHub()
{
} public async Task SendMessage(string message, string name)
{
#region Client
//this.Context.ConnectionId //每个连接一个connectionId 表示唯一客户端
//this.Clients.Client().SendAsync(); //指定发送消息
//this.Clients.Clients()
#endregion //给多个client发消息 #region Group
//this.Clients.Group(); //给某个组发消息
//this.Clients.Groups() //给多个组发消息
//this.Groups.AddToGroupAsync() //将指定连接加入组
//this.Groups.RemoveFromGroupAsync() //将指定连接移除组
#endregion await Clients.All.SendAsync("onMsg", DateTime.Now, message);
} //上下线消息 连接、断开事件 //客户端连接上
public override Task OnConnectedAsync()
{
return base.OnConnectedAsync();
} //客户端断开
public override Task OnDisconnectedAsync(Exception exception)
{
string connectionId = this.Context.ConnectionId;
return base.OnDisconnectedAsync(exception);
}
}

以上可以看到SignalR封装了很多常用方法(发送指定消息、群发...),我们可以很简单的使用达到目的

创建 Hubs 文件夹 。

在 Hubs 文件夹中,使用以下代码创建 ChatHub.cs 文件 :

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks; namespace Ban.Hubs
{
public class ChatHub:Hub
{
/// <summary>
/// /服务端方法 发送消息--发送给所有连接的客户端
/// </summary>
/// <param name="user"></param>
/// <param name="message"></param>
/// <returns></returns>
public async Task SendMessage(string user,string message)
{
//ReceiveMessage 为客户端方法,让所有客户端调用这个方法
await Clients.All.SendAsync("ReceiveMessage",user,message);
} /// <summary>
/// 客户端连接的时候调用
/// </summary>
/// <returns></returns>
public override Task OnConnectedAsync()
{
Trace.WriteLine("客户端连接成功");
return base.OnConnectedAsync();
}//所有链接的客户端都会在这里 /// <summary>
/// 连接终止时调用。
/// </summary>
/// <returns></returns>
public override Task OnDisconnectedAsync(Exception exception)
{
Trace.WriteLine("连接终止");
return base.OnDisconnectedAsync(exception);
} }
}

六、配置 SignalR

必须配置 SignalR 服务器,以将 SignalR 请求传递到 SignalR。

startupConfigureServices方法内部添加SignalR服务services.AddSignalR();Configure中配置具体的Hub(路由器、中转):

    app.UseSignalR(routes =>
{
routes.MapHub<TestHub>("/testHub"); //可以多个map
}); app.UseMvc(); //注意UseSignalR需要在UseMvc()之前

这样SignalR服务器端就开发完成了,网页、Java、.Net客户端都可以连接的

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using test.Hubs; //3、引用 处理客户端 - 服务器通信的高级管道
namespace test
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
// This lambda determines whether user consent for non-essential cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
services.AddSignalR();//1、添加服务
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseSignalR(routes => //2、引用
{
routes.MapHub<ChatHub>("/chatHub");
});
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
}
}

七、添加 SignalR 客户端代码(创建index控制器和视图)

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div class="container">
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-6">&nbsp;</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">&nbsp;</div>
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
</div>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script type="text/javascript">
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//在建立连接之前禁用发送按钮
document.getElementById("sendButton").disabled = true;
//接受消息
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
var encodedMsg = user + " says " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
//开始链接
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
//发送消息
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
</script>
</body>
</html>

Controller中调用SignalR服务

在构造函数注入IHubContext<>就可以直接使用了,非常方便:

   private readonly IHubContext<TestHub> _hubContext;

    public HomeController(IHubContext<TestHub> hubContext)
{
_hubContext = hubContext;
} public async Task<IActionResult> Notify()
{
//拿不到当前Hub的clientId 线程是唯一的
await _hubContext.Clients.All.SendAsync("onMsg", "from controller msg");
return Ok();
}

一、在 ASP.NET Core 中使用 SignalR的更多相关文章

  1. 在 ASP.NET Core 中使用 SignalR

    https://weblogs.asp.net/ricardoperes/signalr-in-asp-net-core 作者:Ricardo Peres 译者:oopsguy.com 介绍 Sign ...

  2. asp.net core 中的SignalR与web前端进行实时通信

    一.介绍 SignalR是.net 开源库,用于构建需要实时进行用户交互和数据更新的web应用,如在线聊天,游戏,天气等实时应用程序,且简化了构建实时应用的过程,包括服务端库和js端库,继承了数种常见 ...

  3. 二、在 ASP.NET Core 中使用 SignalR之类库

    一.前段代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="view ...

  4. 在ASP.NET Core下使用SignalR技术

    一.前言 上次我们讲到过如何在ASP.NET Core中使用WebSocket,没有阅读过的朋友请参考 WebSocket in ASP.NET Core 文章 .这次的主角是SignalR它为我们提 ...

  5. ASP.NET Core 中的实时框架 SingalR

    目录 SignalR 是什么? 在 ASP.NET Core 中使用 SignalR 权限验证 横向扩展 源代码 参考 SignalR 是什么? ASP.NET Core SignalR 是一个开源的 ...

  6. Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)

    目录 SignalR系列目录(注意,是ASP.NET的目录.不是Core的) 前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于Signal ...

  7. ASP.NET Core 2.0 SignalR 示例

    # 一.前言 上次讲SignalR还是在<[在ASP.NET Core下使用SignalR技术](http://dotnet.ren/2017/02/21/%E5%9C%A8ASP-NET-Co ...

  8. 玩转ASP.NET Core中的日志组件

    简介 日志组件,作为程序员使用频率最高的组件,给程序员开发调试程序提供了必要的信息.ASP.NET Core中内置了一个通用日志接口ILogger,并实现了多种内置的日志提供器,例如 Console ...

  9. 在Asp.net Core中使用中间件来管理websocket

    介绍 ASP.NET Core SignalR是一个有用的库,可以简化Web应用程序中实时通信的管理.但是,我宁愿使用WebSockets,因为我想要更灵活,并且与任何WebSocket客户端兼容. ...

随机推荐

  1. SettingBar的点击事件拦截

    接下来我们再来看另外一个案例,正如上面界面上显示的两个条目,车辆选择和始发地点选择,他们都有一个共同的特点就是都有共同的标题,内容和右剪头按钮,这种情况下我们都会把它封装成一个组合的自定义View来显 ...

  2. 第十周java学习总结

    目录 第十周java学习总结 学习内容 代码上传截图 代码链接 第十周java学习总结 学习内容 第12章 Java多线程机制 主要内容 Java中的线程 Thread类与线程的创建 线程的常用方法 ...

  3. Make jQuery throw error when it doesn't match an element

    Make jQuery throw error when it doesn't match an element 解答1 You could make a plugin to use to ensur ...

  4. laravel中model类中好用的方法

    public function field() { return $this->belongsTo(HrmAuthFieldsModel::class, 'filed_id', 'id'); } ...

  5. shell脚本之case用法

    你会经常发现自己在尝试计算一个变量的值,在一组可能的值中寻找特定值.在这种情形下, 你不得不写出很长的if-then-else语句,就像下面这样. $ cat test25.sh #!/bin/bas ...

  6. shell脚本之结构化命令if...then...fi

    if的用法日常主要用于数值或者字符串的比较来实现结构化的,模拟人脑,就是如果遇到什么事情,我们应该做什么 语法格式分为 1. if command;then command;fi    (如果if满足 ...

  7. SpringMVC中mvc:view-controller的使用

    1.重定向 <mvc:view-controller path="/" view-name="redirect:/admin/index"/> 即如 ...

  8. spring + springMVC +hibernate 配置2

    这种方式比较精简 配置项不多 spring采用自动扫描配置 ,分spring_springMVC.xml  . hibernate_config.xml 两个文件 web.xml配置如下 <?x ...

  9. 有关MSSQL2000在Win7上的安装

    https://baijiahao.baidu.com/s?id=1593533837896849226&wfr=spider&for=pc 怎么在win7下安装sql server2 ...

  10. apicloud 运费计算js+页面

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...