Web Worker的onMessage事件重复接收两次消息的问题如何解决

问题核心原因 #

Web Worker 的 message 事件不存在事件冒泡逻辑，stopPropagation() 对该事件完全无效，你遇到的重复触发 99% 是因为重复注册了 message 事件监听器。

修复方案 #

• 第一步：排查重复绑定逻辑
  检查 Worker 代码，是否同时使用了 onmessage = 处理函数 和 addEventListener('message', 处理函数) 两种绑定方式，两种方式会独立触发处理逻辑，删掉其中一种即可。
  如果是在框架的生命周期钩子（比如 React 的 useEffect、Vue 的 onMounted）里绑定的监听器，要确保钩子只会执行一次，避免重渲染时重复注册。
• 第二步：使用防重复的绑定写法
  直接在绑定前先清理旧的监听器，彻底避免历史绑定残留：

  修复后的 onmessage 写法

  /// <reference lib="webworker" />
  
  // 先清空之前的绑定
  self.onmessage = null;
  
  self.onmessage = function(e) {
      console.log('@@ in web worker' + JSON.stringify(e.data));
  }
  

  修复后的 addEventListener 写法

  /// <reference lib="webworker" />
  
  function messageHandler(e: MessageEvent) {
      console.log('@@ in web worker' + JSON.stringify(e.data));
  }
  
  // 先移除再绑定，避免重复注册
  self.removeEventListener('message', messageHandler);
  self.addEventListener('message', messageHandler);
  

极端情况排查 #

如果上述操作后问题仍然存在，可以做以下验证：

• 在 Worker 代码最顶部添加 console.log('worker 实例初始化')，如果控制台打印两次，说明你实际创建了两个 Worker 实例，即使你认为实例唯一，需要排查主线程的实例创建逻辑。
• 如果你使用了 Comlink、workerize 等 Worker 封装库，不要手动绑定 message 监听器，这类库本身会绑定内置的 message 监听器，手动额外绑定会导致重复触发，按照库的官方规范实现消息逻辑即可。

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