SignalR的Javascript客戶端API使用方式整理

SignalR的服務端提供了兩種實現方式，分別是PersistentConnection和Hub，這兩種方式的側重點不一樣：

PersistentConnection更接近於底層，編程接口比較簡單，傳輸的數據格式爲純文本，客戶端只須要調用發送和定義接收方法就能夠實現跟服務端的交互。

Hub則位於更高的層次，更加的面向對象，定義了服務端方法和客戶端方法，客戶端經過代理對象調用服務端方法，經過客戶端方法獲取服務返回結果。

下圖是這兩個服務端API在整個SignalR中的所處位置（引用自SignalR Programming In Microsoft ASP.NET)

 

兩種不一樣的服務端實現方式，其對應的客戶端API的使用方式也不一樣，其中基於Hub的客戶端API根據是否使用生成的代理對象又有一些區別。

基於上述狀況，分紅三大類型整理了Javascript客戶端在不一樣實現方式下的與服務器交互的API代碼使用方式

	PersistentConnection	Hub/生成Proxy模式	Hub/非生成Proxy模式
服務端配置	app.Map("/messageConnection", map =>            {                map.RunSignalR<MessageConnection>();            });	app.Map("/messageHub", map =>            {                map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true });            });	app.Map("/messageHub", map =>             {                 map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true });             });
引入js文件	jquery-1.6.4.min.js jquery.signalR-2.2.0.min.js	jquery-1.6.4.min.js jquery.signalR-2.2.0.min.js /messageHub/js 上述js文件是動態生成，其中messageHub的爲服務端定義的路徑	jquery-1.6.4.min.js jquery.signalR-2.2.0.min.js
建立鏈接	var connection = $.connection("/message");	var connection = $.connection;	var connection = $.hubConnection();
開啓鏈接	connection.start()                 .done(function () {                     connected = true;                 })                 .fail(function () {                     alert("鏈接失敗");                 });	connection.hub.start()                 .done(function () {                     connected = true;                 })                 .fail(function () {                     alert("鏈接失敗");                 });	connection.start()                 .done(function () {                     connected = true;                 })                 .fail(function () {                     alert("鏈接失敗");                 });
代理對象	無	var proxy = connection.MessageService; MessageService是Hub的名稱	var proxy = connection.createHubProxy("MessageService"); MessageService是Hub的名稱
定義客戶端方法	無	proxy.client.hello = function (message) {                       console.log(message);    }	proxy.on("hello", function (message) {                           console.log(message); });
接收消息	connection.received(function (message) {                 alert(message);             });	經過服務器調用客戶端方法實現	經過服務器調用客戶端方法實現
發送消息	connection.send(message);	經過調用服務端方法實現 proxy.server.hello(message);	經過調用服務端方法實現 proxy.invoke("hello", message);
設置QueryString	在建立connection時指定 var connection = $.connection("/messageConnection", { username: "qs" + username });	connection.hub.qs = { username: "qs" + username };	connection.qs = { username: "qs" + username };
設置Cookie	document.cookie = "username=" + username;	document.cookie = "username=" + username;	document.cookie = "username=" + username;
設置State	無	proxy.state.ClientType = "HubAutoProxy";	proxy.state.ClientType = "HubNonAutoProxy";

示例代碼下載