Framework7与AngularJS中socket.io事件重复触发问题的解决咨询

这个问题的核心原因很明确：每次返回页面时，你都重复绑定了notification事件监听器，而之前的监听器没有被移除。当事件触发时，所有已绑定的监听器都会执行，导致触发次数随页面返回次数递增。这和Framework7的页面生命周期、AngularJS的控制器实例化逻辑都有关系，下面分点说明解决方案和背后的原理：

一、最稳妥的方案：离开页面时移除事件监听 #

Socket.io提供了off()方法来移除事件监听器，我们需要结合AngularJS或Framework7的页面销毁钩子，在离开页面时清理绑定的事件。

方法1：利用AngularJS控制器的$destroy事件 #

在你的something.js对应的AngularJS控制器中，保存事件回调的引用，然后在控制器销毁时移除监听器：

angular.module('yourApp').controller('SomethingPageCtrl', function($scope) {
  // 单独定义回调函数，方便后续精准移除
  function handleNotification(notification) {
    // 你的原有业务代码
    console.log('收到通知:', notification);
  }

  // 绑定socket事件
  socket.on('notification', handleNotification);

  // 监听控制器销毁事件，清理当前绑定的监听器
  $scope.$on('$destroy', function() {
    socket.off('notification', handleNotification);
  });
});

方法2：利用Framework7的页面生命周期钩子 #

如果你的页面是通过Framework7路由配置加载的，可以在页面的pageBeforeRemove钩子中移除监听器，确保页面离开时清理资源：

// Framework7路由配置示例
{
  path: '/something/',
  component: {
    templateUrl: 'something.html',
    on: {
      pageInit() {
        // 初始化时先移除旧监听器（防止缓存残留），再绑定新的
        socket.off('notification');
        socket.on('notification', function(notification) {
          // 你的业务代码
        });
      },
      pageBeforeRemove() {
        // 页面即将被移除时，清理事件监听器
        socket.off('notification');
      }
    }
  }
}

注意：如果用socket.off('notification')不带回调参数，会移除该事件的所有监听器。如果你在其他地方也绑定了notification事件，建议保存回调引用，只移除当前页面的监听器，避免影响其他功能。

二、备选方案：只绑定一次事件（按需使用） #

如果你的业务场景是该事件只需要触发一次（比如页面加载后只接收一次通知），可以用Socket.io的once()方法替代on()，它会在事件触发一次后自动移除监听器：

socket.once('notification', function(notification) {
  // 你的代码，这个回调只会执行一次
});

但这个方案只适用于单次触发的场景，如果需要每次进入页面都能接收通知，还是建议用第一种方案。

三、问题与Framework7/AngularJS的关联 #

1. Framework7页面缓存：Framework7默认会缓存页面（尤其是使用view.router.load()等方法导航时），如果页面被缓存，控制器不会被销毁，再次进入时可能会重复执行初始化代码（包括socket绑定）。你可以在路由配置中添加cache: false禁用缓存，配合事件清理更稳妥。
2. AngularJS控制器实例化：每次进入页面如果重新创建了控制器实例（比如视图被重新渲染），就会重复执行控制器内的socket.on()代码，导致多份监听器存在。$destroy事件是AngularJS控制器销毁时的标准钩子，用来清理资源非常合适。

内容的提问来源于stack exchange，提问作者Raz