2015年2月12日 星期四

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是必備的
    6.撰寫JS,比較需要了解的對應Server的呼叫及Server如何呼叫Client
        
    
    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 網頁
    點我下載範例