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

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"

    <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />   
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
    
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"  >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
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