Web Worker onmessage事件未触发问题求助——定时提醒功能异常

我尝试开发一个指定日期的提醒功能，使用Web Worker结合主动等待机制，但Worker始终无法执行到onmessage函数内部的代码。试过this.onmessage、self.onmessage以及addEventListener，都没有效果。使用的API基于JavaScript，必须用JS开发。

现有代码 #

Main.js #

function reminder(message, api) {
  var worker = new Worker("./worker.js");
  var mesCore = message.body.substr(message.body.indexOf(" ") + 1);
  worker.onmessage = function (e) {
    api.sendMessage("Ding dong " + mesCore, message.threadID);
};
worker.postMessage(mesCore);
}

worker.js #

const cron = require('node-cron');

// 创建Worker时会执行此行代码

onmessage = function(e) {
    // 从未执行到此处
    console.log(e.data);
    var origin = new Date(e.data);
    cron.schedule("* * *", function() {
        var now = new Date();
        if (
            origin.getFullYear() == now.getFullYear() &&
            origin.getMonth() == now.getMonth() &&
            origin.getDate() == now.getDate()
        ) {
            postMessage('message');
            return;
        }
    });
}

解决方案 #

问题根源 #

浏览器环境的Web Worker不支持Node.js的require语法和node-cron模块，这会导致Worker初始化失败，代码根本无法执行到onmessage逻辑。

修改步骤及代码 #

1. 移除Worker中的Node.js依赖，改用浏览器原生的setInterval实现日期轮询检查
2. 确保Worker的消息监听语法正确，添加错误监听便于排查问题

修改后的worker.js

self.addEventListener('message', function(e) {
    console.log(e.data);
    const targetDate = new Date(e.data);
    // 每分钟检查一次日期是否匹配
    const checkTimer = setInterval(() => {
        const now = new Date();
        if (
            targetDate.getFullYear() === now.getFullYear() &&
            targetDate.getMonth() === now.getMonth() &&
            targetDate.getDate() === now.getDate()
        ) {
            self.postMessage('message');
            clearInterval(checkTimer); // 触发提醒后停止轮询
        }
    }, 60000); // 60秒间隔
});

优化后的Main.js（添加错误监听）

function reminder(message, api) {
  try {
    const worker = new Worker("./worker.js");
    const mesCore = message.body.substr(message.body.indexOf(" ") + 1);
    
    worker.onmessage = function (e) {
      api.sendMessage("Ding dong " + mesCore, message.threadID);
      worker.terminate(); // 任务完成后终止Worker，释放资源
    };

    // 监听Worker错误，快速定位加载或运行问题
    worker.onerror = function(error) {
      console.error('Worker 错误:', error.message, '文件:', error.filename, '行号:', error.lineno);
    };

    worker.postMessage(mesCore);
  } catch (err) {
    console.error('初始化Worker失败:', err);
  }
}

说明 #

浏览器Web Worker运行在独立的浏览器线程中，只能使用浏览器原生API，不支持Node.js专属模块。改用setInterval轮询日期，既符合浏览器环境要求，也能实现指定日期的提醒功能。触发提醒后记得终止Worker或清除定时器，避免不必要的资源消耗。

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