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.效果如下:
这样当我们服务端处理某个任务时就可以调用广播来实现主动推送到客户端，进行数据的即时更新及消息的推送。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Node.js实现数据推送
场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现.但轮询带来的通信资源的浪费是无法忽视的,无论数据是否改变,都照常发送请求并响应,而且每次HTTP请求都带有很长的头部信息. 2. Comet的概念是长连接,客户端发送请求后,后端将连接保持下来,直到连接超时
-
JavaScript数据推送Comet技术详解
JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务
-
使用 Javascript 实现浏览器推送提醒功能的示例
本篇文章内容简单,速读只需两三分钟,通过这两三分钟的时间你就可以给自己的网站实现推送提醒的功能 Notification 类 简单明了,这个类就是负责推送消息的,只要用户当前没有关闭页面,及时是在使用其他程序,浏览器也能够将消息推送给用户 请求权限 我们在手机上都收到过消息推送,在接收推送之前我们会先将消息推送权限开放给应用.在浏览器中也一样,在使用浏览器推送之前,需要先获取权限 Notification.requestPermission().then(permission => { cons
-
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.
-
vue使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等.闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端 第一步:安装依赖 np
-
ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知的示例代码
一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据. 2.Push.js是什么?[需要浏览器支持H5Notifications] Notifications翻译过来即是通知.那么Push.js的通知又是什么样的,见下图:大多数在屏幕的右下角出
-
JAVA Web实时消息后台服务器推送技术---GoEasy
越来越多的项目需要用到实时消息的推送与接收,我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari等等. 支持不同的开发语言:GoEasy推送 提供了Restful API接口,无论你的后台程序用的是哪种语言都可以通过Restful API来实现后台实时推送.
-
php redis实现对200w用户的即时推送
怎么实现对200w用户的即时推送,这个推送可以理解为调用第三方的接口,push,sms之类的东西. 当时先写了一个demo 直接读取DB然后单个推送,结果..可想而知 于是设计一套基于redis+php多进程的方案,用着还不错而去扩展性蛮高的,故分享之. ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 具体的逻辑如下:(无视我的字体) 其实这里还可以优化的,我的设想是如果用户数据再多一些的话,可以在redis里对数据进行分割采取多List,每一个Lis
-
Asp.NET MVC中使用SignalR实现推送功能
一.简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请求或使用轮询技术来获取消息. 可访问其官方网站:https://github.com/SignalR/ 获取更多资讯. 二.Asp.net SignalR 是个什么东东 Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(lo
-
详解Python实现URL监测与即时推送
目录 原理 环境 代码 crontab计划任务配置 预警消息效果 总结 原理 采用Python requests发起请求监测的URL,检测Http响应状态及是否超时,如果Http状态异常或响应超时,则通过聚合云推的消息推送API将预警消息发送至邮箱.钉钉机器人.企业微信机器人.微信公众号等,服务端通过crontab定时(每分钟)执行代码,实现动态监测功能. 环境 操作系统: CentOS 7.x Python版本: 3.6 消息推送服务: tui.juhe.cn 代码 #!/usr/bin/py
-
python实现美团订单推送到测试环境，提供便利操作示例
本文实例讲述了python实现美团订单推送到测试环境,提供便利操作.分享给大家供大家参考,具体如下: 背景: 有时候需要在测试环境下一个美团的订单,每次都找一堆的东西,太繁琐,于是写了接口请求数据,然后把数据推送到测试环境.实现了可以在测试环境进行:生成新订单.取消订单.骑手抢单.骑手送达.申请整单退款.申请部分退款流程. # -*- coding: utf-8 -*- import hashlib import time import requests from order30 import
-
python实现京东订单推送到测试环境，提供便利操作示例
本文实例讲述了python实现京东订单推送到测试环境,提供便利操作.分享给大家供大家参考,具体如下: # -*- coding: utf-8 -*- import hashlib import time import requests from order30 import conf app_key = conf.jd_appkey appSecret = conf.jd_secret token = conf.jd_token def get_md5(string):#返回字符串md5加密后大
-
asp.net mvc实现简单的实时消息推送
因为项目需要,需要在网页上实现消息的推送.在百度上搜索了一下,发现实现网页上的消息推送,可以使用asp.net 中的SignalR类库,当然也可以使用H5的WebSocket Ajax的轮回.当然此处我们使用asp.net 中的SignalR类库.因为它可以实现网页上消息的实时推送.什么是实时推送呢,我简单的说一下我个人的理解吧.实时:在同一时间类发生的事情,当然在计算机中并不是绝对的实时,因为CPU在同一时间片只能处理一个任务,那么这个时候疑问又来了? 我们平时使用电脑又上网,又听音乐是如何
-
php实现websocket实时消息推送
php实现websocket实时消息推送,供大家参考,具体内容如下 SocketService.php <?php /** * Created by xwx * Date: 2017/10/18 * Time: 14:33 */ class SocketService { private $address = '0.0.0.0'; private $port = 8083; private $_sockets; public function __construct($address = '',
-
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
前言 前些日子了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,但网上并不能很方便地找到一篇目前版本的在node下正确实现这个协议的博客. 自己捣鼓了一段时间,理解不深刻,但也算是基本能够达到使用目的. 本文尚未对离线消息的接收顺序进行处理. 代码 服务端: server.js //服务端引入中间件mosca let mosca = require('mosca') let settings = { port: 5112 } let server = new mosca.Server