原文:SignalR--Web客戶端

這里說web客戶端其實(shí)是JavaScript起的作用，也可以說是JavaScript客戶端。

官方的標(biāo)題的JavaScript客戶端。

下面的翻譯，同樣的代碼的形式上傳。

PRCs 遠(yuǎn)程服務(wù)調(diào)用使用客戶端的hub的代理proxy可以調(diào)用服務(wù)端的方法。 服務(wù)端 public class ContosoChatHub : Hub {public void NewContosoChatMessage(string name, string message){Clients.All.addContosoChatMessageToPage(name, message);} } 客戶端(通過代理) var contosoChatHubProxy = $.connection.contosoChatHub; contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {console.log(name + ' ' + message); }; $.connection.hub.start().done(function () {// Wire up Send button to call NewContosoChatMessage on the server.$('#newContosoChatMessage').click(function () {contosoChatHubProxy.server.newContosoChatMessage($('#displayname').val(), $('#message').val());$('#message').val('').focus();}); }); 通過$.connection.contosoChatHub;直接拿到hub代理。 客戶端(沒有代理) var connection = $.hubConnection(); var contosoChatHubProxy = connection.createHubProxy('contosoChatHub'); contosoChatHubProxy.on('addContosoChatMessageToPage', function(name, message) {console.log(name + ' ' + message); }); connection.start().done(function() {// Wire up Send button to call NewContosoChatMessage on the server.$('#newContosoChatMessage').click(function () {contosoChatHubProxy.invoke('newContosoChatMessage', $('#displayname').val(), $('#message').val());$('#message').val('').focus();});}); 先通過var connection=$.connection拿到hub連接,在通過這個(gè)連接創(chuàng)建代理connection.createHubProxy("contosoChatHub");其中contosoProxy為hub類的名字。如果你要為服務(wù)端調(diào)用創(chuàng)建多個(gè)事件處理程序，則不能使用生成的代理。 否則你可以選擇去使用代理而不基于你代碼的引入，如果你選擇不去使用代理， 你不需要引入"/signalr/hubs"這個(gè)URL。客戶端安裝 JavaScript客戶端要引入JQuery和核心SignalR的js文件。JQuery文件必須在1.64版本以上， 如果需要使用代理需要引入生成SignalR代理的js文件。 <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/jquery.signalR-2.1.0.min.js"></script> <script src="signalr/hubs"></script> 最后這個(gè)js文件是動(dòng)態(tài)生成的，而不是物理路徑。 這個(gè)引入順序是固定的。html引入 <script src="~/signalr/hubs"></script>cshtml引入 <script src="@Url.Content("~/signalr/hubs")"></script>aspx <script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>如何為SignalR生成的代理創(chuàng)建物理路徑 作為動(dòng)態(tài)生成代理的替代方法，可以創(chuàng)建一個(gè)物理路徑來保存， 要?jiǎng)?chuàng)建代理文件，請執(zhí)行以下步驟： 1.安裝Microsoft.AspNet.SignalR.Utils. 2.打開命令提示符并瀏覽到SignalR.exe文件的tools文件夾中， tools文件夾位于[your solution folder]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools 3.輸入命令 signalr ghp /path:[path to the .dll that contains your Hub class] .dll文件通常是項(xiàng)目文件夾中的bin文件夾。 上面的命令創(chuàng)建一個(gè)名為server.js的文件在server.exe的同一個(gè)文件夾啊中。如何建立連接 建立連接(生成代理) var contosoChatHubProxy = $.connection.contosoChatHub; contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {console.log(userName + ' ' + message); }; $.connection.hub.start().done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); }).fail(function(){ console.log('Could not Connect!'); }); }); 建立?連接(不生成代理) var connection = $.hubConnection(); var contosoChatHubProxy = connection.createHubProxy('contosoChatHub'); contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {console.log(userName + ' ' + message); }); connection.start().done(function(){ console.log('Now connected, connection ID=' + connection.id); }).fail(function(){ console.log('Could not connect'); }); 通過on創(chuàng)建客戶端方法。默認(rèn)情況下，hub的位置是當(dāng)前服務(wù)，如果想連接不同的hub服務(wù)，需要在start方法之前引入。 $.connection.hub.url="<yourbackenurl>";$.connection.hub和$.hubConnection()創(chuàng)建的是同一個(gè)對(duì)象 前者引入連接對(duì)象，后者調(diào)用獲得的對(duì)象。start是一個(gè)異步方法 它返回的是一個(gè)jQuery Deferred 對(duì)象，所以可以添加回調(diào)函數(shù)， 其中done是建立連接后的回調(diào)函數(shù)，同時(shí)還有fail、pipe。如何建立跨越 通常，如果瀏覽器加載一個(gè)頁面http://contoso.com,則SignalR連接位于 http://contoso.com/signalr。如果頁面http://contoso.com連接到http://consoto.com/signalr, 這就是跨越，默認(rèn)情況下，跨域是禁止的。在SignalR 1.x 中，跨域請求由單個(gè)EnableCrossDomain標(biāo)記控制。此標(biāo)志控制JSONP和CORS請求。 為了更大的靈活性，所有的CORS支持已經(jīng)從SignalR的服務(wù)器組建中刪(如果檢測到瀏覽器支持， 則JavaScript客戶端仍然正常使用CORS)，并且已經(jīng)提供了新的OWIN中間件來支持這些方案。需要通過EnableJSON在HubConfiguration對(duì)象上進(jìn)行設(shè)置來明確的啟用。 1.引入Microsoft.Owin.Cors. 2.調(diào)用UseCors。以下例子的在SignalR中實(shí)現(xiàn)跨域連接 啟用Cors或JSONP,使用Map和RunSignalR而不是MapSignalR。 using Microsoft.AspNet.SignalR; using Microsoft.Owin.Cors; using Owin; namespace MyWebApplication {public class Startup{public void Configuration(IAppBuilder app){// Branch the pipeline here for requests that start with "/signalr"app.Map("/signalr", map =>{// Setup the CORS middleware to run before SignalR.// By default this will allow all origins. You can // configure the set of origins and/or http verbs by// providing a cors options with a different policy.map.UseCors(CorsOptions.AllowAll);var hubConfiguration = new HubConfiguration {// You can enable JSONP by uncommenting line below.// JSONP requests are insecure but some older browsers (and some// versions of IE) require JSONP to work cross domain// EnableJSONP = true};// Run the SignalR pipeline. We're not using MapSignalR// since this branch already runs under the "/signalr"// path.map.RunSignalR(hubConfiguration);});}} }添加連接字符串 可以在連接Hub時(shí)傳遞數(shù)據(jù)，要定義在statr方法之前。$.connection.hub.qs = { 'version' : '1.0' };生成代理var connection=$.hubConnection(); connection.qs={'version'，'1.0'};不生成代理服務(wù)端讀取連接字符串 public class ContosoChatHub : Hub {public override Task OnConnected(){var version = Context.QueryString['version'];if (version != '1.0'){Clients.Caller.notifyWrongVersion();}return base.OnConnected();} }定義傳輸方法 服務(wù)端會(huì)用最好的方法，也可以指定傳輸方法，在start方法之前。 同時(shí)可以定義多個(gè)傳輸方式。$.connection.hub.start( { transport: ['webSockets', 'longPolling'] }); $.connection.hub.start( { transport: 'longPolling' });生成代理var connection = $.hubConnection(); connection.start({ transport: ['webSockets', 'longPolling'] }); var connection =$.hubConnection(); connection.start({transport:'longPolling'});不生成代理其中傳輸方法有:webSockets、foreverFrame、serverSentEvent、longPolling。獲取傳輸名字 $.connection.hub.start().done(function () {console.log("Connected, transport = " + $.connection.hub.transport.name); });var connection = $.hubConnection(); connection.hub.start().done(function () {console.log("Connected, transport = " + connection.transport.name); });如何獲得Hub的代理 客戶端代理的名字遵循駝峰命名發(fā)(首字母小寫)，SignalR會(huì)自動(dòng)匹配。服務(wù)端 public class ContosoChatHub : Hub客戶端 var myHubProxy = $.connection.contosoChatHub；var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');改變Hub的名字 通過[hubName("MyChatHub")],這時(shí)候客戶端將不再匹配駝峰命名法。如何定義客戶端方法讓服務(wù)端調(diào)用 方法名對(duì)大小寫不敏感，定義在start方法之前。使用client這個(gè)屬性。客戶端 var contosoChatHubProxy = $.connection.contosoChatHub; contosoChatHubProxy.client.addContosoChatMessageToPage = function (userName, message) {console.log(userName + ' ' + message); }; $.connection.hub.start().done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); }).fail(function(){ console.log('Could not Connect!'); }); });$.extend(contosoChatHubProxy.client, {addContosoChatMessageToPage: function(userName, message) {console.log(userName + ' ' + message);}; });var connection = $.hubConnection(); var contosoChatHubProxy = connection.createHubProxy('contosoChatHub'); contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {console.log(userName + ' ' + message); }); connection.start().done(function(){ console.log('Now connected, connection ID=' + connection.id); }).fail(function(){ console.log('Could not connect'); });服務(wù)端 public class ContosoChatHub : Hub {public void NewContosoChatMessage(string name, string message){Clients.All.addContosoChatMessageToPage(name, message);} }參數(shù)是復(fù)雜類型 客戶端 var contosoChatHubProxy = $.connection.contosoChatHub; contosoChatHubProxy.client.addMessageToPage = function (message) {console.log(message.UserName + ' ' + message.Message); });var connection = $.hubConnection(); var contosoChatHubProxy = connection.createHubProxy('contosoChatHub'); chatHubProxy.on('addMessageToPage', function (message) {console.log(message.UserName + ' ' + message.Message); });服務(wù)端 public class ContosoChatMessage {public string UserName { get; set; }public string Message { get; set; } }public void SendMessage(string name, string message) {Clients.All.addContosoChatMessageToPage(new ContosoChatMessage() { UserName = name, Message = message }); }客戶端調(diào)用服務(wù)端的方法 使用server這個(gè)屬性，方法名符合駝峰命名法，SignalR會(huì)自動(dòng)匹配。無返回值的服務(wù)端方法 服務(wù)端 public class ContosoChatHub : Hub {public void NewContosoChatMessage(ChatMessage message){Clients.All.addContosoChatMessageToPage(message);} }public class ChatMessage {public string UserName { get; set; }public string Message { get; set; } }客戶端 contosoChatHubProxy.server.newContosoChatMessage({ UserName: userName, Message: message}).done(function () {console.log ('Invocation of NewContosoChatMessage succeeded');}).fail(function (error) {console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);}); 直接調(diào)用contosoChatHubProxy.invoke('newContosoChatMessage', { UserName: userName, Message: message}).done(function () {console.log ('Invocation of NewContosoChatMessage succeeded');}).fail(function (error) {console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);});通過invoke方法調(diào)用。可以為服務(wù)器的方法打上屬性標(biāo)簽，此時(shí)將不再遵守駝峰命名法，需完全匹配 用[HubMethodName("myMethodName")]來完成標(biāo)記服務(wù)端 public class ContosoChatHub : Hub {[HubMethodName("NewContosoChatMessage")]public void NewContosoChatMessage(string name, string message){Clients.All.addContosoChatMessageToPage(name, message);} }客戶端 contosoChatHubProxy.server.NewContosoChatMessage(userName, message).done(function () {console.log ('Invocation of NewContosoChatMessage succeeded');}).fail(function (error) {console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);});contosoChatHubProxy.invoke('NewContosoChatMessage', userName, message).done(function () {console.log ('Invocation of NewContosoChatMessage succeeded');}).fail(function (error) {console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);});有返回值的服務(wù)端方法服務(wù)端 public class StockTickerHub : Hub {public IEnumerable<Stock> GetAllStocks(){return _stockTicker.GetAllStocks();} }public class Stock {public string Symbol { get; set; }public decimal Price { get; set; } }客戶端 function init() {return stockTickerProxy.server.getAllStocks().done(function (stocks) {$.each(stocks, function () {var stock = this;console.log("Symbol=" + stock.Symbol + " Price=" + stock.Price);});}).fail(function (error) {console.log('Error: ' + error);}); }function init() {return stockTickerProxy.invoke('getAllStocks').done(function (stocks) {$.each(stocks, function () {var stock = this;console.log("Symbol=" + stock.Symbol + " Price=" + stock.Price);});}).fail(function (error) {console.log('Error: ' + error);}); } 通過each方法遍歷stocks。如何處理連接生命周期事件 SignalR提供一下可以處理的連接生命周期事件。 starting：在連接發(fā)送任何數(shù)據(jù)之前引發(fā)。 received：在連接上收到任何數(shù)據(jù)時(shí)觸發(fā)，提供收到的數(shù)據(jù)。 connectionSlow：當(dāng)客戶端檢測到緩慢或頻繁掉線時(shí)觸發(fā)。 reconnectiong:當(dāng)?shù)讓觽鬏旈_始重新連接時(shí)引發(fā)。 reconnected：當(dāng)?shù)讓舆\(yùn)輸工具重新連接時(shí)觸發(fā)。 stateChanged：連接的狀態(tài)發(fā)生變化時(shí)觸發(fā)，提供舊狀態(tài)和新狀態(tài)。 disconnected：連接斷開時(shí)觸發(fā)。處理conectionSlow事件 $.connection.hub.connectionSlow(function(){ console.('we are currently experiencing difficulties with the connection.'); });var connection = $.hubConnection(); connection.connectionSlow(function () {console.log('We are currently experiencing difficulties with the connection.') });如何處理錯(cuò)誤 SignalR JavaScript客戶端提供了一個(gè)error可以為其添加處理程序的事件。 還可以使用fail方法為由服務(wù)器方法調(diào)用產(chǎn)生的錯(cuò)誤添加一個(gè)處理程序。 如果沒在服務(wù)端顯示啟用詳細(xì)的錯(cuò)誤消息，則SignalR在錯(cuò)誤后返回的異常對(duì)象 包含最少的錯(cuò)誤信息。出于安全考慮，不建議在生產(chǎn)中發(fā)送詳細(xì)的錯(cuò)誤消息給客戶端。在服務(wù)端啟用詳細(xì)信息 var hubConfiguration=new HubConfiguration(); hubConfiguration.EnableDetailedErrors=true; app.MapSignalR(hubConfiguration);在客戶端處理錯(cuò)誤信息 添加一個(gè)錯(cuò)誤處理程序 $.connection.hub.error(function (error) {console.log('SignalR error: ' + error) });var connection = $.hubConnection(); connection.error(function (error) {console.log('SignalR error: ' + error) });var connection = $.hubConnection(); connection.error(function (error) {console.log('SignalR error: ' + error) });處理來自方法的調(diào)用的錯(cuò)誤 contosoChatHubProxy.newContosoChatMessage(userName, message).fail(function(error) { console.log( 'newContosoChatMessage error: ' + error) });contosoChatHubProxy.invoke('newContosoChatMessage', userName, message).fail(function(error) { console.log( 'newContosoChatMessage error: ' + error) });啟用客戶端日志記錄 在start();方法之前。 $.connection.hub.logging = true; $.connection.hub.start();var connection = $.hubConnection(); connection.logging = true; connection.start();

　　

總結(jié)

以上是生活随笔為你收集整理的SignalR--Web客户端的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。