2015-05-07 22 views
0

我指的是我的前一篇文章,我有一些连接到SignalR跨域的帮助Here和我使用This示例来构建我的POC。然而,我使用的例子是一个单一的从SignalR交叉域获取没有消息,但ping工作

我仍然在试图弄清楚SignalR的魔法是如何工作的,我想我理解它的大部分,但不知何故,我没有得到这个工作。我的代码很好地连接到集线器,如果我离开它,我将继续从发送的ping获得乒乓结果。

但是,我似乎没有从我的中心得到任何回应。这里是我的全部代码,希望有人能指出我在正确的方向:

Startup.cs:

public partial class Startup 
{ 
    public void Configuration(IAppBuilder app) 
    { 
     . 
     . 
     . 

     app.UseCors(_CorsOptions.Value); 

     // Branch the pipeline here for requests that start with "/signalr" 
     app.Map("/signalr", map => 
     { 
      map.RunSignalR(new HubConfiguration { EnableDetailedErrors = true }); 
     }); 
    } 

    private static Lazy<CorsOptions> _CorsOptions = new Lazy<CorsOptions>(() => 
    { 
     return new CorsOptions 
     { 
      PolicyProvider = new CorsPolicyProvider 
      { 
       PolicyResolver = context => 
       { 
        var policy = new CorsPolicy(); 

        foreach (string allowedCOrsOrigin in ConfigurationManager.AppSettings["AllowedCORS-Origins"].Split(',').ToArray()) 
        { 
         if(!string.IsNullOrEmpty(allowedCOrsOrigin) && !policy.Origins.Contains(allowedCOrsOrigin)) 
         { 
          policy.Origins.Add(allowedCOrsOrigin); 
         } 
        } 

        policy.AllowAnyMethod = true; 
        policy.AllowAnyHeader = true; 
        policy.SupportsCredentials = true; 
        return Task.FromResult(policy); 
       } 
      } 
     }; 
    }); 
} 

_SignalBase.cs:

public abstract class _SignalRBase<THub> : ApiController where THub : IHub 
{ 
    private readonly Lazy<IHubContext> _hub = new Lazy<IHubContext>(
     () => GlobalHost.ConnectionManager.GetHubContext<THub>() 
    ); 

    protected IHubContext Hub 
    { 
     get { return _hub.Value; } 
    } 
} 

FooHub.cs:

[HubName("foos")] 
public class FooHub : Hub { } 

FooController.cs:

[RoutePrefix("api/foo")] 
public class FooController : _SignalRBase<FooHub> 
{ 
    public IHttpActionResult Bar(FooDTO foo) 
    { 
     // notify all connected clients    
     Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext<FooHub>() 
      .Clients.All.newFoo(foo); 

     return Ok(foo); 
    } 
} 

FooDTO.cs:

public class FooDTO 
{ 
    public int First { get; set; } 

    public int Second { get; set; } 
} 

Sender.html

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <button type="button" ng-click="DoSignalR()" ></button> 
     </div> 
    </div> 
</div> 

<!-- Reference the autogenerated SignalR hub script --> 
<script src="//localhost:31374/signalr/hubs"></script> 

Receiver.html:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div> 
       <ul> 
        <li ng-repeat="foo in receivedFoos"> 
         Foo {{foo.First}} &amp; {{foo.Second}} 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- Reference the autogenerated SignalR hub script --> 
<script src="//localhost:31374/signalr/hubs"></script> 

角控制器:

.controller('SignalRCtrl', function ($scope, TESTSignalR, $rootScope) {  
    $scope.receivedFoos = []; 

    var newFoo = function(data) { 
     console.log("newFoo function"); 
     $scope.$apply(function() { 
      $scope.receivedFoos.push(data); 
     }); 
    }; 

    TESTSignalR.initialize(newFoo); 

    // Sender  
    $scope.DoSignalR = function() {   
     var FooDTO = { 
      "First": 1234, 
      "Second": 3456 
     }; 

     TESTSignalR.DoSignalR(FooDTO); 
    }; 
}) 

角服务:

.factory('TESTSignalR', function($http, APIPath, $rootScope) {  
    var proxy = null; 

    var initialize = function (callback) { 

     // fetch connection object and create proxy 
     var connection = $.hubConnection(); 
     this.proxy = connection.createHubProxy('foos'); 

     $.connection.hub.url = "http://localhost:31374/signalr"; 

     // start connection 
     $.connection.hub.start({ xdomain: true }) 
      .done(function() { 
       console.log('Connected to signalR. connectionId : ' + $.connection.hub.id); 
      }) 
      .fail(function() { 
       console.log('Could not connect to signalR!'); 
      }); 

     var hubConnection = $.connection.foos; 

     hubConnection.client.newFoo = function(data) { 
      callback(data); 
     }; 
    }; 

    var DoSignalR = function (foo) { 
     var url = "http://localhost:31374/api/foo/bar"; 

     $http.post(url, foo) 
     .success(function(response) { 
      console.log(response); 
     }) 
     .error(function(error) { 
     console.log(error); 
     }); 
    } 

    return { 
     initialize: initialize, 
     DoSignalR: DoSignalR 
    }; 
}) 

编辑:我更新了上面的代码,以反映@萨尔 - 德尼罗指出的最新变化。它现在应该都工作正常了

回答

1

看起来你正试图在FooController的上下文中调用一个Hub方法,你会做一个稍微不同的调用。是否有一个原因,你为什么从控制器这样做,而不是从客户端调用服务器集线器方法?请尝试以下,如果你需要从控制器

[RoutePrefix("api/foo")] 
public class FooController : ApiController 
{ 
    public IHttpActionResult Bar(FooDTO foo) 
    { 
     // notify all connected clients 
     GolbalHost.ConnectionManager.GetHubContext<FooHub>().Clients.All.newFoo(foo); 

     return Ok(foo); 
    } 
} 

也有可能你是不完全正确引用您的代理您[HubName("foos")]枢纽调用。观察你的newFoo执行,请尝试以下

var hubConnection = $.connection.foos; 

hubConnection.client.newFoo = function(data) { 
    // data 
} 
+0

我只是认为这将是更容易理解/保持如果逻辑是在同一个地方,但意见是为了改变,如果它会更符合惯例,那么我宁愿以不同的方式做。这个想法是,如果我在页面上有一个列表(接收者),我希望能够将要删除的对象从发件人发送到该页面。就像酒店房间列表一样,如果由其他人预订,则不再可用。酒吧的行动将是预订行动,我想通知所有房间哪些不再可用的房间 – Ebbs