ASP.NET SignaiR 实现消息的即时推送,并使用Push.js实现通知的示例代码

一.使用背景

1. SignalR是什么?

ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。

2.Push.js是什么?【需要浏览器支持H5Notifications】

Notifications翻译过来即是通知。那么Push.js的通知又是什么样的,见下图:大多数在屏幕的右下角出现。

ASP.NET SignaiR 实现消息的即时推送,并使用Push.js实现通知的示例代码

需要允许哦:

ASP.NET SignaiR 实现消息的即时推送,并使用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.启动项目 打开浏览器控制台,你会发现见下图、这就表示你已经完成了第一步。

ASP.NET SignaiR 实现消息的即时推送,并使用Push.js实现通知的示例代码

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

ASP.NET SignaiR 实现消息的即时推送,并使用Push.js实现通知的示例代码

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

ASP.NET SignaiR 实现消息的即时推送,并使用Push.js实现通知的示例代码

13.效果如下:

ASP.NET SignaiR 实现消息的即时推送,并使用Push.js实现通知的示例代码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-01-02

vue使用stompjs实现mqtt消息推送通知

最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等.闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端 第一步:安装依赖 np

JavaScript数据推送Comet技术详解

JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务

Node.js学习教程之HTTP/2服务器推送【译】

前言 最近Node.js v8.4+版本发布带来了体验版的HTTP/2,你可以自己通过设置参数--expose-http2启动. 这篇文章,我将介绍HTTP/2最重要的一方面服务器推送并且创建一个小的Node.js程序案例来使用它.下面话不多说了,来一起看看详细的介绍吧. 关于HTTP/2 HTTP/2 的目的是通过支持完整的请求与响应复用来减少延迟,通过有效压缩 HTTP 标头字段将协议开销降至最低,同时增加对请求优先级和服务器推送的支持. 更多关于HTTP/2内容,请查看文章HTTP/2.

Node.js实现数据推送

场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现.但轮询带来的通信资源的浪费是无法忽视的,无论数据是否改变,都照常发送请求并响应,而且每次HTTP请求都带有很长的头部信息. 2. Comet的概念是长连接,客户端发送请求后,后端将连接保持下来,直到连接超时

使用 Javascript 实现浏览器推送提醒功能的示例

本篇文章内容简单,速读只需两三分钟,通过这两三分钟的时间你就可以给自己的网站实现推送提醒的功能 Notification 类 简单明了,这个类就是负责推送消息的,只要用户当前没有关闭页面,及时是在使用其他程序,浏览器也能够将消息推送给用户 请求权限 我们在手机上都收到过消息推送,在接收推送之前我们会先将消息推送权限开放给应用.在浏览器中也一样,在使用浏览器推送之前,需要先获取权限 Notification.requestPermission().then(permission => { cons

HTTP/2 协议用于 iOS 推送提醒服务 (APNS)

苹果最近更新了他们的推送提醒服务协议,APNS.这个新版本的协议基于HTTP/2和JSON,相比于旧的二进制协议,新的协议有了巨大改进. 新的APNS协议基于HTTP/2: 新的特性和功能: 基于JSON的请求和响应 对于每个通知,如果成功响应,将会返回200标识 - 不用再去猜测通知是否被接收到 响应错误将会以JSON字符的形式返回 消息的长度从2048个字节增加到4096个字节 连接状态可以通过HTTP/2的ping框架来进行检查 支持主题 通用的推送证书 - 开发和生产使用同一个证书即可

百度实时推送api接口应用示例

网站质量不错的网站可以在百度站长平台/数据提交/sitemap栏目下看到实时推送的功能, 目前这个工具是邀请开放, 百度的实时推送的api接口可以实时推送我们新发布的文章, 保证百度在第一时间收录.   百度站长平台 http://zhanzhang.baidu.com/ 打开百度站长平台, 点开实时推送的添加新数据接口获得带token的api推送地址:     http://ping.baidu.com/sitemap?site=www.yourdomain.com&resource_name

Asp.NET MVC中使用SignalR实现推送功能

一.简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请求或使用轮询技术来获取消息. 可访问其官方网站:https://github.com/SignalR/ 获取更多资讯. 二.Asp.net SignalR 是个什么东东 Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(lo

ajax实现服务器与浏览器长连接的功能

有时候,需要服务器主动给浏览器推送数据,这里用ajax来实现这种功能,具体请看这里: <script type="text/javascript" src="__CSS__/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <script type="text/javascript"> var uid = "{$uid}"; var i

Android实现几种推送方式解决方案

本文介绍在Android中实现推送方式的基础知识及相关解决方案.推送功能在手机开发中应用的场景是越来起来了,不说别的,就我们手机上的新闻客户端就时不j时的推送过来新的消息,很方便的阅读最新的新闻信息.这种推送功能是好的一面,但是也会经常看到很多推送过来的垃圾信息,这就让我们感到厌烦了,关于这个我们就不能多说什么了,毕竟很多商家要做广告.本文就是来探讨下Android中实现推送功能的一些解决方案,也希望能够起到抛砖引玉的作用.^_^ 1.推送方式基础知识: 在移动互联网时代以前的手机,如果有事情发

iOS10推送通知开发教程

虽然通知经常被过度使用,但是通知确实是一种获得用户关注和通知他们需要更新或行动的有效方式.iOS 10有了新的通知,如新消息.商业信息和时间表的变化.在本教程中,我将向你展示如何使用通知在你的iOS应用程序,并且显示iOS 10引入了新特性.开发iOS 10推送通知你需要最新版本的Xcode,Xcode 8测试版,这些目前都是可下载的,在下载页面. 你可以去Github下载本教程的整个工程. 开始 在Xcode中启用推送通知是很容易的,但你需要几个步骤. 创建一个新的工程,给它起一个唯一的Bun

Java Socket聊天室编程(一)之利用socket实现聊天之消息推送

相关阅读:Java Socket聊天室编程(二)之利用socket实现单聊聊天室 网上已经有很多利用socket实现聊天的例子了,但是我看过很多,多多少有一些问题存在. 这里我将实现一个比较完整的聊天例子,并解释其中的逻辑. 由于socket这一块比较大,所以我将分出几篇来写一个比较完整的socket例子. 这里我们先来实现一个最简单的,服务器与客户端通讯,实现消息推送的功能. 目的:服务器与客户端建立连接,客户端可以向服务器发送消息,服务器可以向客户端推送消息. 1,使用java建立socke

ASP.NET实现推送文件到浏览器的方法

本文实例讲述了ASP.NET实现推送文件到浏览器的方法.分享给大家供大家参考.具体分析如下: 这里主要实现从服务器到浏览器,推送文件,提供用户下载/浏览的功能. 提示: 在AJAX UpdatePanel里面将无效.如果代码从按钮单击事件中被调用,该按钮需要在 AJAX UpdatePanel的外部. 具体代码如下: /// <summary> /// Downloads (pushes) file to the client browser. /// **** NOTE **** Canno