ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知的示例代码
一.使用背景
1. signalr是什么？
asp.net signalr 是为 asp.net 开发人员提供的一个库，可以简化开发人员将实时 web 功能添加到应用程序的过程。实时 web 功能是指这样一种功能：当所连接的客户端变得可用时服务器代码可以立即向其推送内容，而不是让服务器等待客户端请求新的数据。
2.push.js是什么？【需要浏览器支持h5notifications】
notifications翻译过来即是通知。那么push.js的通知又是什么样的，见下图:大多数在屏幕的右下角出现。
需要允许哦:
3.很多时候我们只能使用轮询的方式进行数据展示的更新和消息推送。于是就想到有没有一种方式可以完成服务端数据更新时同步更新客户端的一种解决方案。
二.开始部署一个 signalr项目【使用mvc】
1.新建mvc项目
.....................
2.导入程序包【vs2015】
工具->nuget包管理器-> 程序包管理控制台->install-package microsoft.aspnet.signalr->等待安装成功
3.新建集线器类
项目->右键->添加->新建项->signalr->signalr 永久链接类->保存->【以myconnection1为例】myconnection1
public class myconnection1 : persistentconnection
{
/// <summary>
/// 发送消息
/// </summary>
/// <param name="request"></param>
/// <param name="connectionid"></param>
/// <returns></returns>
protected override task onconnected(irequest request, string connectionid)
{
debug.writeline(connectionid);
return connection.send(connectionid, "welcome!");//单推事列
}
/// <summary>
/// 接受客户端消息
/// </summary>
/// <param name="request"></param>
/// <param name="connectionid"></param>
/// <param name="data"></param>
/// <returns></returns>
protected override task onreceived(irequest request, string connectionid, string data)
{
debug.writeline(data);
return connection.broadcast(data);//广播
}
/// <summary>
/// 掉线
/// </summary>
/// <param name="request"></param>
/// <param name="connectionid"></param>
/// <param name="stopcalled"></param>
/// <returns></returns>
protected override task ondisconnected(irequest request, string connectionid, bool stopcalled)
{
debug.writeline("掉线");
return base.ondisconnected(request, connectionid, stopcalled);
}
/// <summary>
/// 重连
/// </summary>
/// <param name="request"></param>
/// <param name="connectionid"></param>
/// <returns></returns>
protected override task onreconnected(irequest request, string connectionid)
{
debug.writeline("重连");
return base.onreconnected(request, connectionid);
}
}
4.新建 owin startup 类【signalr遵循owin标准，startup则是组件的启动，默认会存在startup类，只需修改即可】
我们在configuration里面追加以下代码
public void configuration(iappbuilder app)
{
app.mapsignalr<myconnection1>("/myconnection");
}
解释:访问myconnection的时候，触发myconnection1
5.增加客户端【h5】
@{
viewbag.title = "home page";
layout = null;
}
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script src="~/scripts/jquery.signalr-2.2.1.js"></script>
<script type="text/javascript">
var conn = $.connection("/myconnection");
conn.start().done(function (data) {
console.log("已连接服务器,当前guid为" + data.id);
conn.send("to admin");//发送给服务器
});
//接受服务器的推送
conn.received(function (data) {
console.log("服务器返回消息： " + data);
});
</script>
</body>
</html>
6.启动项目 打开浏览器控制台，你会发现见下图、这就表示你已经完成了第一步。
7.下面我们需要准备 push.js
下载地址 https://github.com/nickersoft/push.js
8.引用js
<script src="../js/push.js"></script>
9.新建js推送demo
function push(data, url, img) {
var imgurl = img != "" ? img : "../images/icon.png";
push.create("新通知", {
body: data,
icon: imgurl,
requireinteraction: true,
onclick: function () {
window.focus();
this.close();
window.location.href =url;
}
});
}
解释:data:为消息内容
url：为点击通知进入的链接
img: 为通知展示的图片地址
requireinteraction: 设置为true时，除非用户手动关闭或单击该通知，否则该通知不会关闭。需要设置消失时间请替换该属性为timeout: 5000 单位毫秒
其他事件请阅读:https://www.npmjs.com/package/push.js
10.组合两者
//实时推送
var conn = $.connection("/myconnection");
conn.start().done(function (data) {
console.log("已连接服务器,当前guid为" + data.id);
});
//接受服务器的推送
conn.received(function (msg) {
console.log("服务器返回消息： " + msg);
if (msg != "") {
push(msg, "#", "")
}
});
11.效果如下：
12.实现服务器的主动推送.现只介绍广播。单推原理一致。
分为广播及单推两种模式。
广播:
var context = globalhost.connectionmanager.getconnectioncontext<myconnection1>();//获取你当前的connection连接
context.connection.broadcast("我是一条新的推送消息！");//广播推送
单推:
var context = globalhost.connectionmanager.getconnectioncontext<myconnection1>();//获取你当前的connection连接 context.connection.send(connectionid, "welcome!");//单推事列
connectionid:是服务端为每个客户端分配的guid
13.效果如下:
这样当我们服务端处理某个任务时就可以调用广播来实现主动推送到客户端，进行数据的即时更新及消息的推送。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： amchart设置纵坐标起始值与间隔