由於signalr2.2.0 依賴於jQuery,雖然在vuejs 略顯臃腫， 但是對於目前剛接觸 vuejs 和想實現 前後分離的我來說 這已經很好了。目前先實現功能， 然後如果有時間或者期望大牛將signalr 改成不依賴jQuery的signalr.項目結構是分服務端asp.net webAPI 前端vuejs。所以牽扯到跨域的問題，但是目前的signalr 版本已經支持，只有服務端支持跨域就可以了。由於時間關系先簡略記下當前的主要解決方法。

服務端：

asp.net webapi

  1 using System.Threading.Tasks;
  2 using Microsoft.AspNet.SignalR;
 
  3 using System.Collections.Generic;
  4 
  5 namespace DMS.WebApi.Hubs
  6 {
  7 /// < summary>
  8 /// SmartEMSHub 這是我們要定義的hub
  9 /// </ summary>
 10 public class SmartEMSHub : Hub
 11 {
 12 /// < summary>
 13 /// 
 14 /// </ summary>
 15 public static List<string> Users = new List<string
 
>();
 16 
 17 /// <summary>
 18 /// The OnConnected event.
 19 /// </summary>
 20 /// <returns></returns>
 21 public override Task OnConnected()
 22 {
 23 string clientId = GetClientId();
 24 if (Users.IndexOf(clientId) == -1)
 25 {
 26 Users.Add(clientId);
 27 }
 28 Send(Users.Count);
 29
 
 var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
 30 context.Clients.Client(clientId).updateUserName(clientId);
 31 return base.OnConnected();
 32 }
 33 
 34 /// <summary>
 35 /// The OnReconnected event.
 36 /// </summary>
 37 /// <returns></returns>
 38 public override Task OnReconnected()
 39 {
 40 string clientId = GetClientId();
 41 if (Users.IndexOf(clientId) == -1)
 42 {
 43 Users.Add(clientId);
 44 }
 45 Send(Users.Count);
 46 return base.OnReconnected();
 47 }
 48 
 49 /// <summary>
 50 /// The OnDisconnected event.
 51 /// </summary>
 52 /// <param name="stopCalled"></param>
 53 /// <returns></returns>
 54 public override Task OnDisconnected(bool stopCalled)
 55 {
 56 string clientId = GetClientId();
 57 
 58 if (Users.IndexOf(clientId) > -1)
 59 {
 60 Users.Remove(clientId);
 61 }
 62 Send(Users.Count);
 63 return base.OnDisconnected(stopCalled);
 64 }
 65 
 66 /// <summary>
 67 /// Get‘s the currently connected Id of the client.
 68 /// This is unique for each client and is used to identify
 69 /// a connection.
 70 /// </summary>
 71 /// <returns></returns>
 72 private string GetClientId()
 73 {
 74 string clientId = "";
 75 
 76 // clientId passed from application 
 77 if (Context.QueryString["clientId"] != null)
 78 {
 79 clientId = this.Context.QueryString["clientId"];
 80 }
 81 
 82 if (string.IsNullOrEmpty(clientId.Trim()))
 83 {
 84 clientId = Context.ConnectionId;
 85 }
 86 
 87 return clientId;
 88 }
 89 
 90 /// <summary>
 91 /// Sends the update user count to the listening view.
 92 /// </summary>
 93 /// <param name="count">
 94 /// The count.
 95 /// </param>
 96 public void Send(int count)
 97 {
 98 // Call the addNewMessageToPage method to update clients.
 99 var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
100 context.Clients.All.updateUsersOnlineCount(count);
101 }
102 /// <summary>
103 /// 自己寫的一個服務端方法Hello.
104 /// </summary>
105 /// <param name="msg">參數
106 /// </param>
107 public void Hello(string msg)
108 {
109 var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
110 context.Clients.All.clientMethod("server:"+msg);
111 }
112 }
113 }

當然還要支持跨域

 1 using Microsoft.AspNet.SignalR;
 2 using Microsoft.Owin;
 3 using Microsoft.Owin.Cors;
 4 using Owin;
 5 
 6 [assembly: OwinStartup(typeof(DMS.WebApi.Hubs.Startup))]
 7 namespace DMS.WebApi.Hubs
 8 {
 9 public class Startup
10 {
11 public void Configuration(IAppBuilder app)
12 {
13 // 連接標識
14 app.Map("/signalr", map =>
15 {
16 //跨域
17 map.UseCors(CorsOptions.AllowAll);
18 var hubConfiguration = new HubConfiguration
19 {
20 EnableJSONP = true
21 };
22 //啟動配置
23 map.RunSignalR(hubConfiguration);
24 });
25 }
26 }
27 }

> Javascript client(vuejs)

客戶端利用webpack 來使用時 發現很難 動態加載<code>../signalr/hub</code> 於是找到了另一種方式來解決這個問題

我這裏只做了一個組件， 其他方式應該也是可以

 <template>
    <div>
        signalr connect
        <div>
            <div>{{showmsg}}< /div>
            <input v-model="value" placeholder="請輸入..." />
            <Button type="info" @click="sendMsg">信息按鈕</Button>
        </div>
    </div>
    </template>
    <script>
    import $ from ‘jquery‘
    import signalR from ‘../assets/js/signalr.2.2.2.js‘
    // import Hubs from ‘../signalr/hubs‘
    export default {
    name: "Signalr",
    data() {
        return {
            value: "",
            showmsg: "222",
            proxy: {}
        }
    },
    mounted() {
        var $this = this;
        $this.connectServer();
    },
    methods: {
        connectServer() {
            var $this = this;
            var conn = $.hubConnection("http://localhost:52656/signalr", { qs: "clientId=1232222" })
            $this.proxy = conn.createHubProxy("smartEMSHub");
            $this.getMsg();
            conn.start().done((data) => {
                $this.sendMsg();
            }).fail((data) => {
            });
        },
        sendMsg() {
            var $this = this;
            $this.proxy.invoke("Hell", $this.value).done((msg) => {
            });
        },
        getMsg() {
            var $this = this;
            $this.proxy.on("clientMethod", (data) => {
                $this.showmsg = data;
            })
        }
    }
    }
    </script>

    <style>

    </style>

--------------------------
2017年7月21日 由於時間倉促，還待補充

vue js 和signalr 結合實現消息推送1