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 網頁
    點我下載範例

    2015年2月10日 星期二

    Android 安裝PhoneGap 2.9.0

    安裝完Cordova後覺得好像還是用eclipse來開發PhoneGap比較順
    雖然平常的開發工具都是VS系列
    可能是對於Cordova資料夾內容還不是很熟

    1.New Android Application Project 然後就跟跟一般的方法一樣這邊簡略...
    2.下載phonegap解壓
    3.到lib > android > example 裡將資料cpoy到eclipse裡
    assets/www
    libs/cordova-2.9.0.jar
    res/xml

    4.cordova-2.9.0.jar右鍵如下圖

    5.開啟AndroidManifest.xml將exmaple裡supports-screens 及uses-permission android:name都copy貼上
    activity裡加入 android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
    
        
    
        
        
        
        
        
        
        
        
        
        
        
           
           
        
        
        
        
        
            
                
                    
    
                    
                
            
        
    
    6.MainActivity裡修改
    package com.example.test;
    
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    
    import org.apache.cordova.*;//import
    
    public class MainActivity extends DroidGap {//改public DroidGap
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            //setContentView(R.layout.activity_main);
            super.loadUrl("file:///android_asset/www/index.html");//加入
    
        }  
    }
    
    至於為何要使用2.9.0,因為3.0以上改為node.js來安裝,2.9.1裡面無jar檔試了一下怎麼裝都起不來
    參考網站:
    PhoneGap 教學 - Hello World
    範例下載

    Visual Studio 開發Corodva前需額外安裝項目

    今天心血來潮想使用VS2013開發Cordova
    新增專案後會提示需安裝Multi-Device Hybrid Appsok下載
    執行後又出現警告需安裝2013 update4ok下載..
    執行後又出現警告需安裝Management Frameworkok下載...

    裝完以上三個後終於出現安裝頁面^ ^Y