[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');    };}

结果:

原来的事件处理函数没有被覆写掉，这是怎么一回事呢?
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');    });}

结果:

新的事件有被加上去，不过旧的事件也一起被触发，再做一些调整。

修改后程式:

$(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');    });}

结果:

结语:
使用off()先将旧的事件清除，再用on()注册新的事件，事件处理函数正确的被覆写掉了。