第一次使用就上手!!
如果有這種人那就是高手了，小弟是用了一天才會
重點整理
原為1.x升到2.x方式
目前是想說用SignalR來做一個線上人數的統計，
asp.net 使用Application和Session物件統計線上人數一般都會這樣做
後來想一下使用SignalR來做的話是不是對系統效能會好點
1.首先使用NuGet安裝SignalR(安裝方式網路有許多不另教學)
2.新增一個類別,SignalR Hub類別，如果非沒有這項的話也可以新增一個類別
加入以下
using Microsoft.AspNet.SignalR;
public class MyHub : Hub
3.新增一個Class來紀錄使用者資訊
public class UserData
{
public string id { get; set; }
public string ip { get; set; }
public string url { get; set; }
public string browser { get; set; }
}
4.撰寫Server後端的Class
public class MyHub : Hub
{
//目前所有連線的list
static List UserData = new List(0);
public void userConnected(string pUrl, string pBrowser)
{
//使用者連線 加入清單
var query = from u in UserData
where u.id == Context.ConnectionId
select u;
if (query.Count() == 0)
{ //這段自由發揮
UserData.Add(new UserData { id = Context.ConnectionId, ip = PublicClass.GetIpAddress(), url = pUrl, browser = pBrowser });
}
Clients.All.getList(UserData);//呼叫前端function
}
public override Task OnDisconnected()
{
//離開時清除清單
Clients.All.removeList(Context.ConnectionId);
var item = UserData.FirstOrDefault(x => x.id == Context.ConnectionId);
if (item != null)
{
UserData.Remove(item);//刪除
Clients.All.onUserDisconnected(item.id); //呼叫前端function
}
return base.OnDisconnected();
}
}
5.前端的Html及加入參考
需先參考jQuery，再參考SignalR
後面/signalr/hubs是必備的
<div>
<ul id="lst"></ul>
</div>
<script src="/Scripts/jquery-1.11.2.min.js"></script>
<script src="/Scripts/jquery.signalR-2.0.1.js"></script>
<script src="/signalr/hubs"></script>
6.撰寫JS，比較需要了解的對應Server的呼叫及Server如何呼叫Client
<script type="text/javascript">
$(function () {
//建立與Server端的Hub的物件，注意Hub的開頭字母一定要為小寫
var onlineHub = $.connection.myHub;
//將連線打開
$.connection.hub.start().done(function () {
onlineHub.server.userConnected(location.href, navigator.userAgent);//呼叫server
});
//讓server呼叫(抓取資料)
onlineHub.client.getList = function (userList) {
//內容自由發揮
var HasObj = $('#lst');
if (!HasObj.length)
return;
$("#lst").html("");
var li = "";
$.each(userList, function (index, data) {
li += "<li id='" + data.id + "'>ip:" + data.ip + "-Url:" + data.url + "-Brower:" + data.browser + "</li>";
});
$("#lst").html(li);
}
//讓server呼叫(移除離開人員)
onlineHub.client.onUserDisconnected = function (id) {
//內容自由發揮
$('#' + id).remove();
}
});
</script>
7.如果為2.0版本需新增一個Owin啟動類別並加入
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
如果為1.0在Global.asax加入
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHubs();
}
了解運作方式後其實可以做其他許多功能，以上如有錯誤請告知謝謝!!
參考來源
[轉貼&下載]SignalR聊天室 / 升級SignalR v2的步驟
[.NET]SignalR簡介 - 建立 realtime 的網站
SignalR 再次超越你對 Web 的想像 - 建立即時互動的 Web
悠閒 Coding 系列 (一) - 認識 SignalR 建立 realtime 網頁
點我下載範例
