一.使用背景

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.效果如下:

这样当我们服务端处理某个任务时就可以调用广播来实现主动推送到客户端，进行数据的即时更新及消息的推送。

NET SignaiR 实现消息的推送，并使用Push.js实现通知的更多相关文章

  1. ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知

    一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

  2. #研发中间件介绍#异步消息可靠推送Notify

    郑昀 基于朱传志的设计文档 最后更新于2014/11/11 关键词:异步消息.订阅者集群.可伸缩.Push模式.Pull模式 本文档适用人员:研发   电商系统为什么需要 NotifyServer? ...

  3. PHP版微信公共平台消息主动推送,突破订阅号一天只能发送一条信息限制

    2013年10月06日最新整理. PHP版微信公共平台消息主动推送,突破订阅号一天只能发送一条信息限制 微信公共平台消息主动推送接口一直是腾讯的私用接口,相信很多朋友都非常想要用到这个功能. 通过学习 ...

  4. Swift - 本地消息的推送通知（附样例）

    使用UILocalNotification可以很方便的实现消息的推送功能.我们可以设置这个消息的推送时间,推送内容等. 当推送时间一到,不管用户在桌面还是其他应用中,屏幕上方会都显示出推送消息. 1, ...

  5. .NET之微信消息模板推送

    最近在项目中使用到了微信消息模板推送的功能,也就是将对应的消息推送到对应的用户微信上去,前提是你必须要有一个微信公众号并且是付费了的才会有这个功能,还有就是要推送的用户必须是的关注了你的微信公众号的. ...

  6. dwr3实现消息精确推送详细步骤

    最近项目中需要用到推送消息,找了很久终于找到一篇不错的文章,方便以后查看就转载了,也分享给大家,希望能帮到有需要的人. 第一.在项目中引入dwr.jar,然后在web.xml中进行配置,配置如下: & ...

  7. 基于HTTP协议之WEB消息实时推送技术原理及实现

    很早就想写一些关于网页消息实时推送技术方面的文章,但是由于最近实在忙,没有时间去写文章.本文主要讲解基于 HTTP1.1 协议的 WEB 推送的技术原理及实现.本人曾经在工作的时候也有做过一些用到网页 ...

  8. RabbitMQ 延迟队列，消息延迟推送

    目录 应用场景 消息延迟推送的实现 测试结果 应用场景 目前常见的应用软件都有消息的延迟推送的影子,应用也极为广泛,例如: 淘宝七天自动确认收货.在我们签收商品后,物流系统会在七天后延时发送一个消息给 ...

  9. spring boot 集成 websocket 实现消息主动推送

    spring boot 集成 websocket 实现消息主动 前言 http协议是无状态协议,每次请求都不知道前面发生了什么,而且只可以由浏览器端请求服务器端,而不能由服务器去主动通知浏览器端,是单 ...

随机推荐

  1. html/html5中的download属性

    兼容性不是很好, 只是了解一下: 主要表现在跨域策略的处理上,Chrome浏览器和FireFox浏览器: 如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以 ...

  2. bzoj4390

    树上差分 感觉挺巧妙的... 每次更新就是在u,v上+1,x是lca(u,v),在x和fa[x]上-1,那么每个点的权值就是子树和,正确性yy一下就行了 不过树状数组的常数真是小,改成前缀和才快了20 ...

  3. springMVC访问根路径问题

    当web.xml没有配置欢迎页:如下 <welcome-file-list> <welcome-file>login.jsp</welcome-file> < ...

  4. Metasloit渗透测试魔鬼训练营

    总结一句话  漏洞  攻击   拿权限  维持访问 课程目标 掌握黑客渗透攻击流程 掌握常用攻击软件     渗透测试工程师 掌握常见windows漏洞挖掘和攻击 掌握常见linux漏洞挖掘和攻击 参 ...

  5. JS Promise API

    一.描述 我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以继续下一个任务. 这种“单线程”的好处就是 ...

  6. bzoj 3566: [SHOI2014]概率充电器【树形概率dp】

    设g[u]为这个点被儿子和自己充上电的概率,f[u]为被儿子.父亲和自己充上电的概率 然后根据贝叶斯公式(好像是叫这个),1.P(A+B)=P(A)+P(B)-P(A)*P(B),2.P(A)=(P( ...

  7. 51nod 1190 最小公倍数之和 V2【莫比乌斯反演】

    参考:http://blog.csdn.net/u014610830/article/details/49493279 这道题做起来感觉非常奇怪啊--头一次见把mu推出来再推没了的-- \[ \sum ...

  8. 深入浅出索引--Mysql45讲笔记记录 打卡day3

    看了极客时间的mysql45讲记录一下自己理解的关于索引部分 为什么会有索引呢? 答:索引就像书的目录一样,可以让你快速知道你要看的部分在多少页.换句话说,索引就是为了提高数据库的查询效率. 索引的数 ...

  9. POJ2482 Stars in Your Window（扫描线+区间最大+区间更新）

    Fleeting time does not blur my memory of you. Can it really be 4 years since I first saw you? I stil ...

  10. Django 源码安装及使用

    首先我们使用的是最新版的CentOS系统:CentOS 7.4 在安装django之前,我们首先保证系统中已经安装好setuptools Django安装: 1.首先我们在Django官网下载最新版本 ...