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

【问题标题】：Close socket.io connection from client on Url change在 URL 更改时关闭来自客户端的 socket.io 连接
【发布时间】：2023-03-17 10:48:01
【问题描述】：

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

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

【问题讨论】：

它会自动关闭，你不需要做任何事情。 disconnect 事件将在代码中触发。
您是在谈论用户实际上正在离开页面吗？在这种情况下，它会自行断开连接。还是您使用pushState()？如果是这样，您可以在听完window.onpopstate 后断开连接。
您的意思是完全远离 Angular 应用程序，还是仅仅通过部分路由（通过 ng-router 或 ui-router）在 Angular SPA 的不同部分之间进行导航？
@EricMcCormick 是的，我想在改变角度路线时断开连接。这就是我正在使用的$scope.$on('$destroy', function(){ socket.disconnect();});
我目前不在使用键盘，等我回来再做一个例子。

标签： angularjs node.js socket.io

【解决方案1】：

正如我们在问题的 cmets 中所讨论的，当您的 Angular ngRoute 控制器部分路由从给定状态改变时，您希望断开与套接字的连接；这是不同的，因为部分路由单页应用程序不会触发全新的页面，而是加载部分内容（在部分/模板文件或脚本定义中定义）。这就是为什么 Furkan Başaran's answer 不能立即为您在同一个 SPA 中的 Angular 路由状态之间的更改工作的关键。

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

注意：每次 Angular 应用注册路由变化时都会发生变化，所以初始建立时会注册一个空白值为/ 状态，然后每次从负载变化时，包括@987654325 @。

Plunker（嵌入式）链接： 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 函数传递 $rootScope 句柄或只需在.run 块中的函数回调。 This HTML5rocks.com tutorial 通过挂钩 $rootScope 在他们的 Angular 应用程序中显示他们的配置，而不是您在上面的 cmets 中提到的 $scope。

希望对你有帮助！

【讨论】：

【解决方案2】：

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

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

【讨论】：