【ASP.net MVC SignalR】使用SignalR實作廣播、群組特定對象傳送

2013-05-19

20138
0
Asp.net MVC

【ASP.net MVC SignalR】使用SignalR實作廣播、群組特定對象傳送
在做同步網頁的時候，我們通常都是以廣播的形式去更新，畢竟我們希望讓所有用戶都可以取得最新的資訊；但有時候我們可能會遇到其他特殊的需求，部分的群組更新資訊或是某一個特定的人更新資訊(EX：檔案上傳的Process bar、兩人之間的遊戲對戰...)，這時候就會用到群組的特性，或是特定對象的傳送。
廣播、群組特定對象傳送

在做同步網頁的時候，我們通常都是以廣播的形式去更新，畢竟我們希望讓所有用戶都可以取得最新的資訊；但有時候我們可能會遇到其他特殊的需求，部分的群組更新資訊或是某一個特定的人更新資訊(EX：檔案上傳的Process bar、兩人之間的遊戲對戰...)，這時候就會用到群組的特性，或是特定對象的傳送。

廣播

所有用戶端都可以接收到此訊息，下段C#的程式碼，是由JavaScript呼叫C#傳送訊息的Function

Clients 這個類別，可以選擇要更新的目標客戶群，去呼叫他們的JavaScript來更新頁面上的資訊

Clients選擇All的屬性，表示我們選擇了所有的使用者，而接在後面的addMessage是在Client端的JavaScript的Function

廣播的程式碼在網路上很容易搜尋到，所以這邊不再贅述


$(function () {
    var chat = $.connection.chat;

    chat.client.addMessage = function (message) {
        $('#msgbox').append("<li>" + message + "</li>");
    };

    $("#sendmsg").click(function () {
        chat.server.send($("#message").val());
    });

    $.connection.hub.start()//{transport:"longPolling"}webSockets、longPolling、serverSentEvents、foreverFrame
    .done(function () {
            chat.server.hello();
        })
	.fail(function () {
	    alert("Error connecting to realtime service");
	});
});


//C#
public void Send(String Message)
{
    Clients.All.addMessage(Message);
}

群組

要把訊息傳送到群組中，要事先向Hub註冊使用者群組，之後傳送給該群組的資訊，才能夠順利地接收

所以在C#的程式碼中，有個Group的Function，GroupId是要傳入使用者要加入的群組的名稱或是代號；傳送訊息時，也需要傳入這個名稱或代號才會對這個群組執行"廣播"，能接收到訊息的也只有這群組的用戶而已！

所以在傳送訊息的Function，多了一個群組號碼的參數！Clients.Group的這個方法，會呼叫這群組的Clinet端的JavaScript去新增訊息


public void Group(String GroupId)
{
    Groups.Add(Context.ConnectionId, GroupId);
    Clients.Group(GroupId).addMessage("Welcome");
}

public void Send(String GroupId, String Message)
{
    Clients.Group(GroupId).addMessage(Message);
}


$(function () {
    var chat = $.connection.chat;

    chat.client.addMessage = function (message) {
        $('#msgbox').append("<li>" + message + "</li>");
    };

    $("#sendmsg").click(function () {
        chat.server.send("A", $("#message").val());
    });

    $.connection.hub.start().done(function () {//webSockets、longPolling、serverSentEvents、foreverFrame
        chat.server.group("GroupA");
        chat.server.send("da37e11c-987b-4ff5-bf7f-97c8155b469c", "hello"); // Notify other clients
    })
	.fail(function () {
	    alert("Error connecting to realtime service");
	});
});

特定對象

最後要傳訊息給一個特定的用戶，我們使用的是Client的函數，這個函數需要傳入一個使用者個connectionid，而這組代號是一個類似GUID的編碼；傳送訊息給該用戶需要輸入他的代碼，才會將訊息傳送改該用戶，之後只有這個用戶能看到這個資訊


public void SendOne(String ClientId, String Message)
{
    Clients.Client(ClientId).addMessage(Message);
}


$(function () {
    var chat = $.connection.chat;

    chat.client.addMessage = function (message) {
        $('#msgbox').append("<li>" + message + "</li>");
    };

    $("#sendmsg").click(function () {
        chat.server.send("A", $("#message").val());
    });

    $.connection.hub.start().done(function () {//webSockets、longPolling、serverSentEvents、foreverFrame
        chat.server.sendOne("da37e11c-987b-4ff5-bf7f-97c8155b469c", "hello"); // Notify other clients
    })
	.fail(function () {
	    alert("Error connecting to realtime service");
	});
});

後記

在寫作SignalR的時候，一直在前端會有呼叫Javascript失敗的時候，後來看見”<script src="/Signalr/hubs"></script>”的程式碼後，才發現原來我們在Server端的Function名稱與在前端JavaScript的竟然不一樣！！主要原因在於Javascript的Function名稱，開頭的字會是小寫，而第二個字之後看C#的名字處理(若是大寫，JavaScript的名稱也就會是大寫的)，所以在這邊建議大家在寫SignalR的時候，可以把開頭的單字都設定為小寫，第二個在按照統一的命名方式處理！

大家好我是饅頭，希望大家喜歡我的文章

如果有錯誤的地方請不吝指教 ^_^

回首頁