ASP.NET SignalR 是為 ASP.NET 開發人員提供的一個函式庫，可簡化開發人員將即時 Web 功能新增至應用程式的過程。有興趣的可以了解一下。
一.使用背景
#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
下載位址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;
}
});
}圖片位址
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.效果如下：
var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接
context.Connection.Broadcast("我是一条新的推送消息！");//广播推送var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接 context.Connection.Send(connectionId, "Welcome!");//单推事列
以上是ASP.NET實作訊息推播的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
