Angular中的路线更改后Socket.io停止工作

Question

Poblem

I have a simple Angular app with 3 routes: r1, r2, r3. The r1's controller has listeners to socket events. This is the first route that gets loaded on starting the app. Things work fine when the app is started. However, when I navigate to r2/r3 and then back to r1, sockets stop working. There is no error in the console.

Code

app.js

var host = "http://myhost.com";
var socket = io(host + ':3000');

angular
    .module('myApp', [
        'ngRoute'
    ])
    .config(function ($routeProvider) {
        $routeProvider
                .when('/', {
                    templateUrl: 'views/r1.html',
                    controller: 'r1Ctrl'
                })
                .when('/r2', {
                    templateUrl: 'views/r2.html',
                    controller: 'r2Ctrl'
                })
                .when('/r3', {
                  templateUrl: 'views/r3.html',
                  controller: 'r3Ctrl'
                })
                .otherwise({
                    redirectTo: '/'
                });
    });

r1Ctrl.js

angular.module('myApp')
    .controller('r1Ctrl', function ($scope) {
        // Listeners
        socket.on('event1', function (data) {
            $scope.$apply(function () {
                ...
            });
        });
        ...
});

Answer 1

Even if you leave r1, the socket listener remains registered. When you visit r1 again, another listener is registered for the same event. The only explanation of your problem is that your callback is not built with that fact in mind and fails to do the work if it has already been done.