c# - 使用 Angular 路线后 SignalR 不工作

Question

问题是，如果我首先加载“#/chat”，我的信号 R 聊天就可以完美运行。但是，如果我先加载“#/”，然后路由到“#/chat”，我的聊天将无法正常进行。

我是 Signal R 的新手，所以我实际上并不知道这个问题。这是我的代码:

app.js

module.config(function ($routeProvider) {
        $routeProvider.when("/", {
            controller: "ItemsController",
            templateUrl: "/templates/itemsView.html"
        });


        $routeProvider.when("/item/:id", {
            controller: "SingleItemController",
            templateUrl: "/templates/singleItemView.html"
        });


        $routeProvider.when("/login", {
            controller: "LoginController",
            templateUrl: "/templates/loginView.html"
        });

        $routeProvider.when("/chat", {
            controller: "ChatController",
            templateUrl: "/templates/chatView.html"
        });

        $routeProvider.otherwise({ redirectTo: "/" });
    });

  $(function () {
       $.connection.hub.logging = true;  //for debugg
       $.connection.hub.start();
  });

   $.connection.hub.error(function (err) {
       console.log('An error occurred: ' + err);
   });

   angular.module('ogateApp').value("chat", $.connection.chat);

ChatHub.cs

  [HubName("chat")]
    public class ChatHub : Hub
    {   
        public void SendMessage(string message)
        {
            Clients.All.newMessage(message);
        }   

    }

ChatController.js

module.controller("ChatController", function ($scope, chat) {        

    $scope.messages = [];

    $scope.sendMessage = function() {

       chat.server.sendMessage($scope.newMessage);

        $scope.newMessage = "";
    };

    chat.client.newMessage = function (message) {
        $scope.messages.push({ message: message });
        $scope.$apply();
        console.log(message);
    };       

});

Answer 1

在调试时我发现集线器仍然连接到一个超出范围的陈旧 Controller 。 SignalR 没有为您导航回我们的页面时创建的新 Controller 实例重新启动集线器。

为了解决这个问题，如果您在每次更改路线时停止 hub，那么当您导航回初始页面时 hub 会再次正确启动。

以下代码解决了这个问题:

app.run([
    '$rootScope', function ($rootScope, security) {

        $rootScope.$on('$routeChangeStart', function (event, currRoute, prevRoute) {
            $.connection.hub.stop();
        });
}]);

有关详细信息，请转到此 LINK