如何在多页面使用WebSocket的onMessage？切换时重置回调避免重复消息

你遇到的重复消息问题，核心原因是旧页面的回调没有被彻底清理，或是误使用了事件监听添加方式而非直接覆盖回调。针对你的场景，给你几个可行的解决办法：

1. 切换页面时先清空旧回调再绑定新逻辑 #

在page2获取WebSocket实例后，先将旧的onmessage置为null，再绑定新回调，确保旧逻辑不会继续执行：

// page2 code:
ws = vuex.getter.ws
// 先清空旧回调
ws.onmessage = null
// 再绑定新处理逻辑
ws.onmessage = function(e) {
    // do other thing
}

2. 在页面销毁时主动清理回调 #

如果是Vue项目，利用组件生命周期钩子，在页面离开时清理当前页面绑定的WebSocket回调，从根源避免回调残留：

// page1 组件的生命周期钩子（如beforeUnmount）
beforeUnmount() {
  const ws = this.$store.getters.ws
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.onmessage = null
  }
}

3. 统一管理WebSocket消息（更优方案） #

不要直接给WebSocket实例绑定onmessage，而是通过事件分发的方式处理消息，切换页面时只需取消当前页面的消息订阅即可：

// 全局WebSocket初始化（比如Vuex的action中）
ws.onmessage = function(e) {
  // 将收到的消息通过Vuex分发
  store.commit('broadcastWsMessage', e.data)
}

// page1 组件
mounted() {
  // 订阅消息
  this.messageSubscription = this.$store.subscribe((mutation) => {
    if (mutation.type === 'broadcastWsMessage') {
      // page1的消息处理逻辑
    }
  })
}
beforeUnmount() {
  // 取消订阅
  this.messageSubscription()
}

// page2 组件同理，仅在当前组件生命周期内订阅消息

如果你的实际代码中是用addEventListener('message', callback)绑定的回调，必须用removeEventListener移除旧回调才能避免重复，注意要传入和添加时完全相同的回调函数引用。

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