ASP .网络签名实现消息的即时推送,并使用Push.js实现通知的示例代码

一。使用背景

1.信号员是什么？

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

2.Push.js是什么？【需要浏览器支持H5通知】

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

需要允许哦：

3.很多时候我们只能使用轮询的方式进行数据展示的更新和消息推送。于是就想到有没有一种方式可以完成服务端数据更新时同步更新客户端的一种解决方案。

二。开始部署一个信号员项目【使用【mvc】

1.新建手动音量调节项目

...

2.导入程序包【Vs2015】

工具-NuGet包管理器-程序包管理控制台-安装-打包微软。信号员-等待安装成功

3.新建集线器类

项目-右键-添加-新建项-信号员-信号员永久链接类-保存-【以我的连接一为例】我的连接一

公共类我的连接1 :持久连接{///summary///发送消息////summary////param name=' request '/param///param name=' connectionId '/param///returns/returns protected override Task on connected(IRequest request，string connectionId) { Debug .写行(connectionId)；返回连接。发送（连接标识，"欢迎!");//单推事列} ///摘要///接受客户端消息////summary////param name=' request '/param///param name=' connectionId '/param///param name=' data '/param///returns/returns protected override Task on received(IRequest request，string connectionId，string data) { Debug .WriteLine(数据);返回连接。广播（数据);//广播} ///摘要///掉线////summary////param name=' request '/param///param name=' connectionId '/param///param name=' stop called '/param///returns/returns protected override Task on connected(IRequest request，string connectionId，bool stopCalled) { Debug .WriteLine(“”掉线');返回基地OnDisconnected(请求、连接身份证、停止调用);} ///摘要///重连////summary////param name=' request '/param///param name=' connectionId '/param///return/retained上返回受保护的覆盖任务(IRequest请求，字符串connectionId) { Debug .WriteLine(“”重连');返回基地OnReconnected(请求，连接id)；} }4.新建欧文启动类【信号员遵循欧文标准，启动则是组件的启动，默认会存在启动类，只需修改即可】

我们在配置里面追加以下代码

公共无效配置(IAppBuilder应用程序){ app .mapsignalmonnection1(“/my connection”)；}解释：访问myconnection的时候，触发我的连接一

5.增加客户端【h5】

@{ ViewBag .标题="主页";布局=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=' http : ~/Scripts/jquery-1。10 .2 .js '/script script src=' http : ~/Scripts/jquery。二号先生。2 .1 .js '/脚本类型='text/javascript' var conn=$ .连接(“/我的连接”)；conn.start().完成（函数（数据){ console.log('已连接服务器，当前全局唯一标识符为数据。id)；连接发送(“发送给管理员”)；//发送给服务器});//接受服务器的推送conn.received(函数（数据){ console.log('服务器返回消息：' '数据);});/脚本/正文/html6 .启动项目打开浏览器控制台，你会发现见下图、这就表示你已经完成了第一步。

7.接下来我们需要准备push.js

下载地址https://github.com/Nickersoft/push.js

8.引用js

脚本src=' http:/js/push.js'/script9。创建一个新的js推送演示

函数推送(数据、url、img) { var imgurl=img！='' ?img : './Images/icon . png '；Push.create ('new notification '，{body : data，icon : imgur，requireinteraction 3360 true，onclick 3360 function(){ window . focus()；this . close()；window . location . href=URL；} });}将：data:解释为消息内容

Url:为点击通知输入的链接

Img:是通知显示的图片地址

当requireInteraction:设置为true时，通知将不会关闭，除非用户手动关闭或单击它。消失时间需要设定。请将此属性替换为timeout: 5000单位毫秒

其他活动请阅读：https://www.npmjs.com/package/push.js

10.将两者结合起来

//push varconn=$。实时连接(“/my connection”)；连接开始()。done(function(data){ console . log('已连接到服务器，当前GUID为' data . id ')；});//接受服务器的push conn . received(function(msg){ console . log('服务器返回消息：' msg ')；如果(味精！='') { push(msg，' # '，' ')} })；11.效果如下：

12.实现服务器的主动推送。现在只介绍广播。单推的原则是一致的。

它可以分为广播模式和推送模式。

广播：

var context=GlobalHost。ConnectionManager . GetConnectionContextMyConnection1()；//获取当前的连接连接上下文。连接.广播(‘我是新推送消息！’);//广播推送推送：

var context=GlobalHost。ConnectionManager . GetConnectionContextMyConnection1()；//获取您当前的连接上下文。connection.send (connectionid,“欢迎！”);//单个推理列connectionId:是服务器为每个客户端分配的GUID

13.效果如下：

这样，当我们的服务器处理某个任务时，我们可以调用广播主动推送到客户端，立即更新数据并推送消息。

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