SignalR 第一次使用就上手!!實作即時在線人員

第一次使用就上手!!
如果有這種人那就是高手了，小弟是用了一天才會
重點整理
原為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 網頁
點我下載範例