在Url上关闭来自客户端的socket.io连接

Question

我正在使用Socket.IO来绘制用于绘制图形的数据 var socket = io.connect(); 我的Node js服务器的io.on('connection', function(socket){})启动一个函数，每隔1秒就会向连接的客户端发送数据。

我希望套接字在客户端更改Url（远离app）时关闭，服务器应该停止发送数据。

Answer 1

正如我们在对问题的评论中所讨论的那样，当您的Angular ngRoute控制器部分路径从给定状态改变时，您希望断开与套接字的连接;这是不同的，因为部分路由单页面应用程序不会触发全新页面，而是加载部分内容（在部分/模板文件或脚本定义中定义）。这就是为什么Furkan Başaran's answer无法在开箱即用的情况下解决同一SPA中Angular路由状态之间的变化的原因。

我准备了一个相当基本的AngularJS应用程序的plunker;它有三个html部分，它使用ngRouter在三个相应的路径上显示，并调用一个函数到＆lt; do-something＆gt;当路线发生变化时。在这种情况下，它会抛出一个警报功能，而在你的情况下，你可以检查路由是否是不你希望提供套接字功能的路由。

注意：每次Angular应用程序注册路由更改时都会发生更改，因此初始建立将使用/状态的空值注册，然后每次从负载更改时，包括otherwise.redirectTo('/destination1')。

Plunker（嵌入式）链接： http://embed.plnkr.co/ayjgYCsox7RGl5OjyGsV/

快速分解：

1. 我首先定义我的处理函数，以便在ngRouter更改时触发。传递的值是注册路由（在/或/index.html之后），例如/potatoes，就像我的示例中的情况一样。您应该在这里执行socket.disconnect();。

function changedMyPartialRoute(val){
    alert('url has changed to: ' + val);
}

1. 在我定义我的应用程序（angular.module('appName', [...）后，我为我的ngRouter设置定义了配置。

.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/meat', {
            templateUrl: 'meat.html',
            controller: 'MeatCtrl',
            controllerAs: 'meat'
        })
        .when('/potatoes', {
            templateUrl: 'potatoes.html',
            controller: 'PotatoCtrl',
            controllerAs: 'potato'
        })
        .when('/bacon', {
            templateUrl: 'bacon.html',
            controller: 'BaconCtrl',
            controllerAs: 'bacon'
        })
        .otherwise({
            redirectTo: '/meat'
        });
}])

1. 最后，我在app（模块）上调用一个运行块来提供检测更改的钩子。我传入了$ rootScope和$ location，它在$ rootScope上执行$ watch来检测$ location.path（）中的更改。整个运行块：

.run( function($rootScope, $location) {
   $rootScope.$watch(function() { 
      return $location.path(); 
    },
    function(val){
      // the handling function from step 1
      changedMyPartialRoute(val);
    });
})

如果您需要使用$ rootScope执行某些操作，我怀疑您可能需要通过changedMyPartialRoute函数或切换$ rootScope句柄，只需定义您的处理方式内联.run块中的函数回调。 This HTML5rocks.com tutorial通过挂钩到$ rootScope来显示他们在Angular应用程序中的配置，而不是您在上面的评论中提到的$ scope。

我希望有所帮助！

Answer 2

当客户端关闭连接自动关闭时，如果要查看此内容，请将此代码写入节点服务器，并在关闭客户端选项卡时查看控制台。

io.on('disconnect', function() {
   console.log("Connection disconnected");
})