ASP.NET实现消息推送的示例代码(2)-木庄网络博客

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

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

8.引用js

1	`<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 单位毫秒

其他事件请阅读: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.实现服务器的主动推送.现只介绍广播。单推原理一致。

分为广播及单推两种模式。

广播:

1 2	`var` `context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接` `context.Connection.Broadcast("我是一条新的推送消息！");//广播推送`

单推:

1 2	`var` `context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接` `context.Connection.Send(connectionId,` `"Welcome!");//单推事列`

connectionId:是服务端为每个客户端分配的GUID