时间戳

首页 > 解决方案 > Rails 6 加载 web worker 的方法是什么？

javascript - Rails 6 加载 web worker 的方法是什么？

问题描述

我正在使用带有 webpacker 的标准 Rails 6 设置。我正在为 JavaScript 使用 Stimulus，但这并不重要。

对于我的应用程序，我有一个计时器，即使浏览器选项卡未处于活动状态，它也需要继续运行。由于它似乎setInterval可以在选项卡不活动时停止，所以我已经潜心编写一个网络工作者。我读过这个问题，但它的解决方案似乎不适合现代 Rails。

我希望我可以通过我的 Stimulus 控制器来处理这一切，但我的理解是 web worker 文件需要分开，所以我试图弄清楚如何正确加载它。

我为工人创建了一个文件，timer.js. 我应该把这个文件放在哪里，我如何引用它的 URL 以便将它作为工作人员启动？

目前我刚刚把它放在public/timer.js，但是我在加载时在我的浏览器控制台中收到一个错误，所以我认为我做错了：

SyntaxError: import declarations may only appear at top level of a module

在 Rails 6 中加载 web worker 的正确方法是什么？

计时器.js

这是工作文件的内容，以防万一。（我知道这很粗糙；这只是一个草稿。）

import Rails from "@rails/ujs";

let timerInterval = null;
let timeRemaining = null;
let postFailures = 0;
let postUrl = null;

function finishActivity() {
  Rails.ajax({
    type: "POST",
    url: postUrl,
    success: () => {
      postFailures = 0;
    },
    error: () => {
      postFailures++;
      if (postFailures < 5) {
        setTimeout(finishActivity, 1000);
      } else {
        alert("Error.");
      }
    },
  });
}

self.addEventListener("message", (event) => {
  if (event.data.timeRemaining) {
    timeRemaining = event.data.timeRemaining;
    if (timerInterval) clearInterval(timerInterval);
    timerInterval = setInterval(() => {
      if (timeRemaining > 0) {
        timeRemaining = timeRemaining - 0.01;
        postMessage({ timeRemaining: timeRemaining });
      } else {
        timerInterval = null;
        clearInterval(timerInterval);
        finishActivity();
      }
    }, 10);
  }
  if (event.data.postUrl) {
    postUrl = event.data.postUrl;
  }
}, false);

标签： javascriptruby-on-railsweb-workerwebpackerstimulusjs

解决方案

自从我找到解决方案以来已经有一段时间了，但我现在回来分享我的发现。这是我在几个月前从事的宠物项目中采用的解决方案。我不保证这是最好的（甚至是正确的）做事方式，但它对我有用。

我在以下位置创建了工作文件public/timer_worker.js：

let timerInterval = null;
let timerTimeout = 10;

function setTimerInterval() {
  if (!timerInterval) {
    timerInterval = setInterval(function() {
      postMessage("timerTick");
    }, timerTimeout);
  }
}

function clearTimerInterval() {
  clearInterval(timerInterval);
  timerInterval = null;
}

onmessage = function(event) {
  if ("run_flag" in event.data) {
    if (event.data["run_flag"]) {
      setTimerInterval();
    } else {
      clearTimerInterval();
    }
  } else if ("set_timeout" in event.data) {
    timerTimeout = event.data["set_timeout"];
  }
}

在我的 webpack 入口点中app/javascript/packs/application.js，我在全局对象上初始化了 worker window，所以我可以在其他地方引用它：

window.App = {};
App.timerWorker = new Worker("/timer_worker.js");

这是连接工人的一种方法。在此之后，我可以在我的 Stimulus 控制器中使用它。尽管可以在没有刺激的情况下以类似的方式使用工人。

这是我最终使用的刺激控制器。当然，其中一些内容是特定于我的用例的。但关键部分是消息处理，它演示了它如何与工作者交互。我没有在这篇文章中以任何方式缩写这个控制器，希望它能更好地描绘出这个功能。

import { Controller } from "stimulus";
import Rails from "@rails/ujs";

export default class extends Controller {
  static targets = [ "timer", "progressBar" ];

  static values = {
    timeRemaining: Number,
    activityDuration: Number,
    postUrl: String,
  }

  connect() {
    App.timerWorker.postMessage({ "run_flag": true });
    this.timerTarget.textContent = Math.ceil(this.timeRemainingValue);
    this.postFailures = 0;

    let controller = this;
    App.timerWorker.onmessage = function() {
      if (controller.timeRemainingValue > 0) {
        controller.timeRemainingValue = controller.timeRemainingValue - 0.01;
      }

      if (controller.timeRemainingValue > 0) {
        controller.timerTarget.textContent = Math.ceil(controller.timeRemainingValue).toString();
        controller.progressBarTarget.style.width = `${(1 - (controller.timeRemainingValue / controller.activityDurationValue)) * 100}%`;
      } else {
        App.timerWorker.postMessage({ "run_flag": false });
        controller.finishActivity();
      }
    }
  }

  finishActivity() {
    let controller = this;
    Rails.ajax({
      type: "POST",
      url: controller.postUrlValue,
      success: () => {
        this.postFailures = 0;
        App.timerWorker.postMessage({ "set_timeout": 10 });
      },
      error: (e, xhr) => {
        this.postFailures++;
        if (this.postFailures < 3) {
          App.timerWorker.postMessage({ "run_flag": true });
          App.timerWorker.postMessage({ "set_timeout": 1000 });
        } else if (this.postFailures < 5 || xhr === "") {
          App.timerWorker.postMessage({ "run_flag": true });
          App.timerWorker.postMessage({ "set_timeout": 60000 });
        }
      },
    });
  }
}

推荐阅读