ASP.NET Core SignalR ：学习消息通讯，实现一个消息通知
2019-12-09 10:38
1151 查看
什么是 SignalR
目前我用业余时间正在做一个博客系统，其中有个功能就是评论通知，就是假如A用户评论B用户的时候，如果B用户首页处于打开状态，那么就会提示B用户有未读消息。暂时用SignalR来实现这个功能。我也是看了两天的资料才明白怎么去使用。
关于SignalR的理论知识可以去官网或者百度，我这里只是结合自己的功能来分享下，如果有错，请原谅指出。
下载js
SignalR是需要微软提供的js，因为我的项目是前后端分离的，所以我是单独下载到一个文件夹，然后复制js到我的前端项目里。只需要signalr.js
页面加载创建连接
//创建连接$.ajax({ success: function (response) { connection.start().then(function () { connection.invoke('SetConnectionMaps', response.data.account); } }, });
var connection = new signalR.HubConnectionBuilder().withUrl('http://127.0.0.1:5000/chatHub').build();
//ajax执行成功执行
首先你要了解到SignalR基本运行的原理，官网：https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio
你可以直接继承Hub这个类，我这里用的是强类型Hub<T>，我就是为了让前端和后端统一下。刚开始Hub<T>我纠结了好久，不知道怎么用，最后我手动做了下，认为它只是为了方便前端和后端统一。
如果你只是简单的继承Hub类,你就必须调用SendAsync方法，并且指定前端接收触发的方法名称“InvokeMessage”，如果你后端和前端名字对应不上，就会有问题。
public class SingalrService : Hub
{
private ISingalrSvc _singalrSvc;
public SingalrService(ISingalrSvc singalrSvc)
{
_singalrSvc = singalrSvc;
}
public async Task SendMessageAsync(Message sendMessage)
{
await Clients.All.SendAsync("InvokeMessage",sendMessage);
}
public void SetConnectionMaps(string account)
{
string connectionid = Context.ConnectionId;
_singalrSvc.SetConnectionMaps(connectionid, account);
}
public override Task OnDisconnectedAsync(Exception exception)
{
_singalrSvc.Remove(Context.ConnectionId);
return base.OnDisconnectedAsync(exception);
}
}
所以有了强类型Hub<T>，自己定义一个接口，提过方法InvokeMessage供前前端调用。
/// <summary>
/// 客户端js调用方法
/// </summary>
public interface ISingalrClient
{
Task InvokeMessage(Message sendMessage);
}
public class SingalrService : Hub<ISingalrClient>
{
private ISingalrSvc _singalrSvc;
public SingalrService(ISingalrSvc singalrSvc)
{
_singalrSvc = singalrSvc;
}
public void SetConnectionMaps(string account)
{
string connectionid = Context.ConnectionId;
_singalrSvc.SetConnectionMaps(connectionid, account);
}
//连接中断时执行，微软这样描述的：
//重写 [code]OnDisconnectedAsync 虚方法，以便在客户端断开连接时执行操作。 如果客户端故意断开连接（例如，通过调用 connection.stop()），
exception参数将
null。
//但是，如果客户端由于错误（例如网络故障）而断开连接，则
exception参数将包含描述失败的异常 public override Task OnDisconnectedAsync(Exception exception) { _singalrSvc.Remove(Context.ConnectionId); return base.OnDisconnectedAsync(exception); } }[/code]
这个时候一个用户打开了首页，然后首页有个js方法来初始化连接，同一个页面内的connectionid是一样的，每次刷新或新打开一个窗口的新页面的connectionid是不一样的，并且你刷新页面或者关掉会认为是连接中断，会执行OnDisconnectedAsync方法，这个方法时SingalR自带的，它是个虚方法，你也可以重写，就像我一样。我这里的代码逻辑是将连接id和当前登录人作为键值对存入内存，然后用户关掉页面就会执行OnDisconnectedAsync方法，将相关的coonectionid从内存删掉：
layui.use(['element', 'layer'], function () {
var element = layui.element;
element.render('nav');
initLoad();
//初始化连接，每个页面的connection的connectionid是一样的，但是每次创建的不一样
var connection = new signalR.HubConnectionBuilder().withUrl('http://127.0.0.1:5000/chatHub').build();
//绑定后台触发的方法，前面已经讲过了，具体业务还没实现，
connection.on('InvokeMessage', (reviceMessage) => {
var v = reviceMessage;
});
$.ajax({
url: url + 'user/userInfo',
type: 'get',
dataType: 'json',
beforeSend: function (xhr) {
doBeforeSend(xhr);
},
success: function (response) {
if (response.code == '1') {
$("#nologin").show();
$("#user").hide();
}
else {
$("#nologin").hide();
$("#user").show();
$("#photo").attr('src', response.data.headPhoto);
//连接开始
connection.start().then(function () {
//调用后台方法，不是api接口，将当前登录人账号传过去
connection.invoke('SetConnectionMaps', response.data.account);
})
}
},
complete: function (xhr) {
doComplete(xhr);
},
});
});
这个时候连接已经创建完成，并且用户并没有关闭首页，连接一直处于连接状态。这个时候另一个用户打开了一篇文章详情，并且对它评论提交内容后，我让它触发了一个连接SingalR的事件，
form.on('submit(review)', function (data) {
loading = layer.load(2);
var commentModel = {
'Content': data.field.desc,
}
$.ajax({
url: url + 'article/review/' + id,
contentType: 'application/json; charset=utf-8',
type: 'post',
datatype: 'json',
data: JSON.stringify(commentModel),
beforeSend: function (xhr) {
doBeforeSend(xhr);
},
success: function (response) {
if (response.code == 0) {
//另一个用户创建了连接
var connection = new signalR.HubConnectionBuilder().withUrl('http://127.0.0.1:5000/chatHub').build();
connection.start().then(function () {
var apiRoute=url+'Singalr/admin';//admin是我设置死的，实际应该是自己判断，会调用下面的api，[Route("api/[controller]")],SingalR也是支持api调用的
var token=localStorage.getItem('token');
fetch(apiRoute,{
method:'get',
headers:{
'Authorization':'Bearer ' + token
}
})
event.preventDefault();
})
layer.close(loading);
} else {
layer.close(loading);
layer.msg("评论失败", {
icon: 5
});
}
},
complete: function (xhr) {
doComplete(xhr);
},
})
[ApiController]
public class SingalrController : ControllerBase
{
private IHubContext<SingalrService, ISingalrClient> _hubContext;
private ISingalrSvc _singalrSvc;
public SingalrController(IHubContext<SingalrService, ISingalrClient> hubContext, ISingalrSvc singalrSvc)
{
_hubContext = hubContext;
_singalrSvc = singalrSvc;
}
/// <summary>
/// 查询未处理数量
/// </summary>
/// <param name="account"></param>
/// <returns></returns>
[HttpGet("{account}")]
public async Task NewsCount(string account)
{
Message sendMessage = new Message();
sendMessage.Data = "11";
//刚已经讲了，用户加载首页的时候已经把connectionid和account存入到了内存里面，现在再取用户相关的connectionID，如果直接调用Clinets.ALL就是给所有客户端发送消息
IReadOnlyList<string> connectionIds = (IReadOnlyList<string>)_singalrSvc.GetConnectionIds(account);
await _hubContext.Clients.Clients(connectionIds).InvokeMessage(sendMessage);
}
}
这个时候调用了这个api执行了里面的_hubContext.Clients.Clients(connectionIds).InvokeMessage(sendMessage)，connectionIds是根据业务逻辑所判断的触发的那些客户端;然后前端会根据方法名响应对应的js代码，如下
layui.use(['element', 'layer'], function () {
var element = layui.element;
element.render('nav');
initLoad();
var connection = new signalR.HubConnectionBuilder().withUrl('http://127.0.0.1:5000/chatHub').build();
//我认为是一个用来侦听服务端方法的js
connection.on('InvokeMessage', (reviceMessage) => {
var v = reviceMessage;
//响应后端方法成功后，就开始自己的业务逻辑
});
$.ajax({
url: url + 'user/userInfo',
type: 'get',
dataType: 'json',
beforeSend: function (xhr) {
doBeforeSend(xhr);
},
success: function (response) {
if (response.code == '1') {
$("#nologin").show();
$("#user").hide();
}
else {
$("#nologin").hide();
$("#user").show();
$("#photo").attr('src', response.data.headPhoto);
connection.start().then(function () {
connection.invoke('SetConnectionMaps', response.data.account);
})
}
},
complete: function (xhr) {
doComplete(xhr);
},
});
});
游戏也能赚钱？如果你热爱游戏，并且想通过游戏赢得零花钱，5173是个不错的选择 http://www.5173.com/?recommenduserid=US15061749098191-04F6
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件） ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字， C# WinForm 中英文实现， 国际化实现的简单方法 ASP.NET Core 2 学习笔记（六）ASP.NET Core 2 学习笔记（三）
- ASP.NET中实现MSN通知消息功能
- AngularJS+ASP.NET MVC+SignalR实现消息推送
- asp.net core 实现一个简单的仓储
- ASP.NET中实现MSN通知消息功能
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（十四）之漏掉的客服消息
- （11）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- Thrift高效通讯 （完结）
- AngularJS+ASP.NET MVC+SignalR实现消息推送
- ASP.NET中实现MSN通知消息功能
- 学习ASP.NET Core, 怎能不了解请求处理管道[3]: 自定义一个服务器感受一下管道是如何监听、接收和响应请求的
- ASP.NET中实现MSN通知消息功能
- ASP.NET Core 2.2 基础知识(十七) SignalR 一个极其简陋的聊天室
- asp.net core 实现一个简单的仓储
- AngularJS+ASP.NET MVC+SignalR实现消息推送
- ASP.NET中实现MSN通知消息功能
- asp.net使用signalr实现集群集群下面的消息推送
- [新手上路] [原创]使用ASP.NET MVC 4 Async Action + jQuery 实现消息通知机制
- [转]如何在ASP.NET Core中实现一个基础的身份认证
- 如何在ASP.NET Core中实现一个基础的身份认证
- Asp.net实现即时消息通讯(Ajax)