主线程更新静态队列后Worker线程读取为空的问题排查与解决

主线程向静态队列context.event_queue添加事件，但Worker线程读取该队列时始终为空。实现逻辑如下：

• EventListener.trigger触发EventHandler.add将事件加入context.event_queue
• Worker线程运行EventListener.listen定时轮询队列并处理事件
• EventContext类维护静态队列，主线程创建Worker后触发事件

相关代码：

// EventListener.js
import context from "./EUEventContext.js";

export default class EventListener{
  static listen() {
    setInterval(() => {
      if (context.event_queue.isEmpty() === false) {
        const e = context.event_queue.deque()
        if (e !== null)
          EventHandler.handle(e)
      }
    }, 200);
  }

  // 触发事件，将事件加入context.event_queue
  static trigger(event: Event) {
    EventHandler.add(event)
  }
}

// ListenerThread.js
import EventListener from './EventListener.js';

EventListener.listen()

// main.js
const worker = new Worker(listener_path)
console.log(listener_path)

const e =  new Event("test_event")
console.log(e.name)
EventManager.install(e)
EventManager.on(e, () => {
  console.log("Hello World!")
})
setTimeout(()=>{
  EventListener.trigger(e)
}, 2000)

// EventContext.js
export default class EventContext {
  private static _queue: Queue<Event> = new Queue<Event>();

  static get event_queue() {
    return this._queue;
  }
}

• 主线程与Worker线程是完全隔离的运行环境：二者拥有独立的内存空间，静态类、全局变量不会跨线程共享。主线程中EventContext的静态队列和Worker线程中初始化的EventContext静态队列是两个完全独立的实例，主线程添加的事件根本不会进入Worker的队列。
• 当前代码逻辑错误地假设静态变量可以跨线程共享，但这不符合JavaScript Worker的设计规范。

方案1：使用Worker标准消息传递API（推荐） #

Worker与主线程只能通过postMessage和onmessage进行通信，这是官方规定的安全通信方式，无需依赖共享内存。

改造主线程代码 #

将EventListener.trigger改为直接向Worker发送事件：

// main.js 改造部分
const worker = new Worker(listener_path);

// 改造EventListener的trigger方法（或直接在调用处发消息）
class EventListener {
  static trigger(event: Event) {
    // 发送事件数据，注意自定义对象需可序列化（如果有不可序列化属性，需提前处理）
    worker.postMessage({ type: 'event', payload: event });
  }
}

// 原触发逻辑不变
setTimeout(()=>{
  EventListener.trigger(e)
}, 2000)

改造Worker线程代码 #

去掉轮询逻辑，直接监听消息事件处理：

// ListenerThread.js
import EventHandler from './EventHandler.js';

// 监听主线程发来的消息
self.addEventListener('message', (msg) => {
  if (msg.data.type === 'event') {
    const event = msg.data.payload;
    EventHandler.handle(event);
  }
});

方案2：使用共享内存（仅特殊场景使用） #

如果必须使用队列共享，可基于SharedArrayBuffer实现线程安全队列，但需要满足以下条件：

• 环境支持SharedArrayBuffer（现代浏览器需配置COOP/COEP跨域头）
• 自己实现或使用线程安全的队列库（避免竞态条件）
  此方案复杂度高，仅适用于对性能要求极高的场景，一般不推荐。

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