iT邦幫忙

3

[SignalR] 覆寫Client上的事件處理函數

前幾天在寫SignalR時遇到了一個需求,在啟動SignalR後想要點不同的按鈕去觸發不同的事件處理函數,程式碼範例如下:

$(function () {
    hub = $.connection.messageHub;

    $.connection.hub.start().done(function () {
        connId = $.connection.hub.id;
    });
    
    hub.client.getMessage = function (message) {
        console.log('default event handler');
    };
});

function btnClick1() {
    console.log('btnClick1');
    hub.client.getMessage = function (message) {
        console.log('btn1 event handler');
    };
}

function btnClick2() {
    console.log('btnClick2');
    hub.client.getMessage = function (message) {
        console.log('btn2 event handler');
    };
}

結果:
http://ithelp.ithome.com.tw/upload/images/20170928/20106865al8GYCdAVF.jpg
原來的事件處理函數沒有被覆寫掉,這是怎麼一回事呢?
Google後發現解答
https://stackoverflow.com/questions/16064651/the-on-event-on-the-signalr-client-hub-does-not-get-called
hub.client.getMessage這種寫法,只有在呼叫start()之前有效,在呼叫start()後想要覆寫事件處理函數,則要使用on()這個方法。

修改後程式:

$(function () {
    hub = $.connection.messageHub;

    $.connection.hub.start().done(function () {
        connId = $.connection.hub.id;
    });
    
    hub.client.getMessage = function (message) {
        console.log('default event handler');
    };
});

function btnClick1() {
    console.log('btnClick1');
    hub.on("getMessage", function (message) {
        console.log('btn1 event handler');
    });
}

結果:
http://ithelp.ithome.com.tw/upload/images/20170928/20106865kpwtAN5JLm.jpg
新的事件有被加上去,不過舊的事件也一起被觸發,再做一些調整。

修改後程式:

$(function () {
    hub = $.connection.messageHub;

    $.connection.hub.start().done(function () {
        connId = $.connection.hub.id;
    });
    
    hub.client.getMessage = function (message) {
        console.log('default event handler');
    };
});

function btnClick1() {
    console.log('btnClick1');
    hub.off("getMessage", null);
    hub.on("getMessage", function (message) {
        console.log('btn1 event handler');
    });
}

function btnClick2() {
    console.log('btnClick2');
    hub.off("getMessage", null);
    hub.on("getMessage", function (message) {
        console.log('btn2 event handler');
    });
}

結果:
http://ithelp.ithome.com.tw/upload/images/20170928/20106865NGNJrVDeQm.jpg

結語:
使用off()先將舊的事件清除,再用on()註冊新的事件,事件處理函數正確的被覆寫掉了。


尚未有邦友留言

立即登入留言