# SignalR 介紹

## 架設 SignalR 伺服器

到 NuGet 安裝 [Microsoft.AspNet.SignalR](https://www.nuget.org/packages/Microsoft.AspNet.SignalR/) 套件。


Microsoft.AspNet.SignalR 安裝好之後，我們要先建立一個 Hub，分別有 `OnConnected()`、`OnReconnected()`、`OnDisconnected(bool stopCalled)` 可以觸發使用。

using System;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNet.SignalR;

public class UploadHub : Hub
{
    /// <summary>
    /// 連線建立觸發
    /// </summary>
    /// <returns></returns>
    public override Task OnConnected()
    {
        return base.OnConnected();
    }

    /// <summary>
    /// 重新連線觸發
    /// </summary>
    /// <param name="groups"></param>
    /// <returns></returns>
    public override Task OnReconnected()
    {
        return base.OnReconnected();
    }
    
    /// <summary>
    /// 連線關閉觸發
    /// </summary>
    /// <returns></returns>
    public override Task OnDisconnected(bool stopCalled)
    {
        return base.OnDisconnected(stopCalled);
    }
}   

最後建立一個 Startup 把它註冊在 OwinStartup，伺服器的部分大致上就準備完成了。

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(AspNetSignalRSamples.SignalR.Startup))]

namespace AspNetSignalRSamples.SignalR
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

## 實作 SignalR 前端

SignalR 的 Web Client 我們可以引入 `jquery.signalR-x.x.x.js` 這個 js 檔來實現，引入之後首要第一件事就是建立 Hub Proxy，客戶端建立 Hub Proxy 有兩種方法。

**With the generated proxy**

SignalR 的伺服器端 Web Site 預設會提供一個 `/signalr/hubs` Web Api，是由 SignalR 自己自動產生的 Hub Proxy Script，只要引用它就有 Hub Proxy 可以用。

<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<script src="~/signalr/hubs"></script>
<script>
    $(function () {
        // Create Hub Proxy
        var uploadHub = $.connection.uploadHub;

        // ToDo: 註冊給伺服器端呼叫的方法
        $.connection.hub.start().done(function () {
            // ToDo: 與伺服器連線註冊成功後要執行的作業
        });
   });
</script>

**Without the generated proxy**

如果我們不引用 Hub Proxy Script，就要自己寫 Code 建立。

<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<script>
    $(function () {
        // Create Hub Proxy
        var connection = $.hubConnection();
        // 手動建立
        var uploadHub = connection.createHubProxy('uploadHub');

        // ToDo: 註冊給伺服器端呼叫的方法
        $.connection.start().done(function () {
            // ToDo: 與伺服器連線註冊成功後要執行的作業
        });
   });
</script>

## 簡單呼叫 Hub

在 uploadHub 上，實作簡單的方法。

public void SendMessage(string name)
{
    Clients.All.hello(name);
}

在 Web 上，實作呼叫 Hub 方法。

var upload = $.connection.uploadHub;

$.connection.start().done(function () {
    var name = "John";
    //呼叫 Hub 端方法
    upload.server.sendMessage(name);
});

//從 Hub 端回傳
upload.client.hello = function(data) {
    alert(data);
}

## 推播的各項方法

##### 1. 呼叫所有使用者

Clients.All.alertMessage(message);

##### 2. 呼叫除了自己的使用者

Clients.Others.alertMessage(message);

##### 3. 呼叫所有使用者除了某個 ConnectionId 的使用者

Clients.AllExcept(Context.ConnectionId).alertMessage(message);

##### 4. 呼叫自己

Clients.Caller.alertMessage(message);

##### 5. 呼叫特定使用者

Clients.Client(Context.ConnectionId).alertMessage(message);

##### 6. 呼叫群組使用者

Clients.Group(groupId).alertMessage(message);

# SignalR 使用