在 Url 更改时关闭来自客户端的 socket.io 连接

Question

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

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

Answer 1

当客户端关闭连接时自动关闭，如果你想看到这个，将这段代码写入你的节点服务器并在关闭你的客户端选项卡时查看控制台。

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

Answer 2

正如我们在问题的评论中所讨论的，当您的 Angular ngRoute 控制器部分路由偏离给定状态时，您希望断开与套接字的连接；这是不同的，因为部分路由单页应用程序不会触发全新的页面，而是加载部分内容（在 partial/template 文件或脚本定义中定义）。这就是为什么不能为您在同一个 SPA 中 Angular 路由状态之间的变化开箱即用的关键。

我准备了一个 plunker，它是一个相当基础的 AngularJS 应用程序；它有三个 html 部分，它使用 ngRouter 在三个相应的路线上显示，并在路线发生变化时调用一个函数来。在这种情况下，它会抛出一个警报功能，而在您的情况下，您可能会检查路由是否指向任何东西 而不是 您想要提供套接字功能的路由。

注意：Angularapp每次注册路由变化时都会有一个变化，所以初始建立会注册一个空值给/状态，然后每次变化来自负载，包括 otherwise.redirectTo('/destination1').

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

快速分解：

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

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

在我定义了我的应用程序 (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'
        });
}])

最后，我在应用程序（模块）上调用一个运行块来提供该挂钩以检测更改。我传入 $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 函数 or[=48= 移交 $rootScope 句柄] 只需在 .run 块的函数回调中定义内联处理。 This HTML5rocks.com tutorial 通过挂接到 $rootScope，而不是上面评论中提到的 $scope，在他们的 Angular 应用程序中显示他们的配置。

希望对您有所帮助！

在 Url 更改时关闭来自客户端的 socket.io 连接

Close socket.io connection from client on Url change

node.js

socket.io

angularjs