2015-09-26 98 views
2

我将使用带角度的SingalR;我的要求是,只有一次将连接id作为单例模式获得,并在整个单一应用程序中使用,因为在我的情况下,浏览器将首次加载,以便clientid保留控制器中剩余的视图。如何使用SingalR与角度js中的多个控制器

所以,第一个问题就是我创建工厂(如下所示),但是当我使用这个工厂,我得到的错误:

undefined factory.Uncaught ReferenceError: signalRHubProxy is not defined(…).

我所做的每包括JS对指数的每一件事情的安装文件在服务器端。

在给定的代码我的问题,我该怎么办。任何示例代码?

  1. 为什么不能获得工厂方法。
  2. 如何在任何消息激活时,在每个控制器上使用addChatMessage侦听器。

希望一切都清除干净。

还有一件事,如果我使用此代码工作正常,但我的场景是我上面定义的。

如果我在索引页上这样简单。

index.html 

$(function() { 
      $.connection.hub.url = Config._HubConnectionUrl; 
      $.connection.hub.logging = true; 

      var chat = $.connection.communicationHub;    
      chat.client.addChatMessage = function (userId, message) { 
       debugger 
       console.log("wajih"); 
      }; 

      $.connection.hub.start().done(function() { 
       debugger 
       $("#clientId").text($.connection.hub.id);    
      }); 
     }); 

当我发送任何消息方法addMessage事件触发, 但上述我希望利用对多个控制器以下的结构。 这是我的代码。

RealTimeFactory.js Factory:- 
'use strict'; 

var singalR = angular.module('signalRHubProxy', []); 

singalR.factory('signalRHubProxy', function ($rootScope) { 
    function signalRHubProxyFactory(serverUrl, hubName, startOptions, $rootScope) { 
     var connection = $.hubConnection(); 
     var proxy = connection.createHubProxy(hubName); 
     connection.start(startOptions).done(function() { 
       debugger 
     }); 

     return { 
      on: function (eventName, callback) { 
       proxy.on(eventName, function (result) { 
        $rootScope.$apply(function() { 
         if (callback) { 
          callback(result); 
         } 
        }); 
       }); 
      }, 
      off: function (eventName, callback) { 
       proxy.off(eventName, function (result) { 
        $rootScope.$apply(function() { 
         if (callback) { 
          callback(result); 
         } 
        }); 
       }); 
      }, 
      invoke: function (methodName, callback) { 
       proxy.invoke(methodName) 
        .done(function (result) { 
         $rootScope.$apply(function() { 
          if (callback) { 
           callback(result); 
          } 
         }); 
        }); 
      }, 
      connection: connection 
     }; 
    }; 

    return signalRHubProxyFactory; 
}); 

My Global controller:- 

var app = angular.module('sgApp.controllers', ['signalRHubProxy']); 

现在我想在我的控制器中使用这个工厂,但如上所述我给出了错误。

ChatController.js 

app.controller('ChatCtrl', function ($rootScope, $scope, signalRHubProxy) { 

    //var clientHubProxy = signalRHubProxy(
    // signalRHubProxy.defaultServer, 'communicationHub', 
    //  { logging: true }); 

    //clientHubProxy.on('addChatMessage', function (data) { 
    // debugger 
    // var x = clientHubProxy.connection.id; 
    //}); 

}); 

HomeController.js 

app.controller('HomeCtrl', function ($rootScope, $scope, signalRHubProxy) { 

    //var clientHubProxy = signalRHubProxy(
    // signalRHubProxy.defaultServer, 'communicationHub', 
    //  { logging: true }); 

    //clientHubProxy.on('addChatMessage', function (data) { 
    // debugger 
    // var x = clientHubProxy.connection.id; 
    //}); 

}); 

这里是服务器端的代码HUB: -

public class CommunicationHub : Hub 
    { 
     public void SendTo(string userId, string message) 
     { 
      Clients.Client(userId).addChatMessage(userId, message); 
     } 
    } 

回答

0
'use strict'; 

var SignalRWPFactory = function ($rootScope, DataService) { 
    var _this = this; 
    _this.rootScope = $rootScope; 
    _this.dataService = DataService; 


    _this.init = function (myHub, fn) { 
     var _this = this; 
     $.connection.hub.url = "http://localhost:5207/signalr";//i think in the startup we had specified this 

     _this.create(myHub, fn); 
     _this.update(myHub, fn); 
     _this.deleteItem(myHub, fn); 

     $.connection.hub.start(); 
    }, 
    _this.create = function (myHub, fn) { 
     var _this = this; 
     myHub.client.language = function (response) { 
      if (response != "") {     
       $rootScope.$apply(function() { 
        fn(response, 'create'); 
       }); 
      } 
     }; 
    }, 
    _this.update = function (myHub,fn) { 
     var _this = this; 
     myHub.client.languageUp = function (response) { 
      if (response != "") {     
       $rootScope.$apply(function() { 
        fn(response, 'update'); 
       }); 
      } 
     }; 
    }, 
    _this.deleteItem = function (myHub, fn) { 
     var _this = this; 
     myHub.client.languageDel = function (response) { 
      if (response != "") {     
       $rootScope.$apply(function() { 
        fn(response, 'deleteItem'); 
       }); 
      } 
     }; 
    } 

    return { 
     init: _this.init, 
     create: _this.create, 
     update: _this.update, 
     deleteItem: _this.deleteItem 
    }; 
}; 


SignalRWPFactory.$inject = ['$rootScope', 'DataService']; 
webAdmin.factory('SignalRWPFactory', SignalRWPFactory); 



**> here is the usage from my end 
> 
> in the controller use like this** 

// Declare a proxy to reference the hub. 
     var myHub = $.connection.languageHub; 
     _this.signalRWPFactory.init(myHub, signalRCallback); 
     function signalRCallback(data, callType) { 
      _this.data = _this.dataService.handleSignalRData(_this.data, data, callType); //it will delete the data from data array        
      // $scope.$apply(); 
     } 

_this.data is the array object you can handle create separate service. 

** 

> here is the data handler method as well 

** 

handleSignalRData: function (dataArr, data, type) { 
     var _this = this; 

     //sometimes its coming as object 
     if (Object.prototype.toString.call(data) === '[object Array]') { 
      data = data[0]; 
     } 

     switch (type) { 
      case 'create': 
       dataArr.push(data); 
       break; 
      case 'update': 
       dataArr = _this.update(dataArr, data); //it will update the row              
       break; 
      case 'deleteItem': 
       dataArr = _this.deleteByAttr(dataArr, "id", data.id); //it will update the row              
       break; 
      default: 
     } 
     return dataArr; 
    } 
相关问题