Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores que quiero documentar para ayudar a otros usuarios que experimenten las mismas fallas.
Cabe mencionar que mi entorno de trabajo es Comlink con WebAssembly, Vue 3, Vite y Pinia. Varias de esas tecnologías no afectan al uso de Comlink pero me parece importante mencionarlas.
Estos errores, en un contexto de JavaScript puro son fáciles de solucionar. El Maximum call stack size exceeded normalmente es causado porque una función recursiva se ha salido de control, y el cannot read property of undefined es porque una variable es undefined y tratamos de leer una propiedad.
Sin embargo, con Comlink los errores son distintos.
Maximum call stack size exceeded: era porque estaba exportando el resultado de Comlink.wrap
en una store. Tengo mi store de Pinia así:
import DbWorker from "@/worker?worker"
import * as Comlink from "comlink"
const worker = new DbWorker();
const DbHelper = Comlink.wrap(worker);
DbHelper.iniciar();
Fíjate que DbHelper
es lo que Comlink.wrap
devolvió. Y el error Maximum call stack size exceeded con Comlink era causado porque yo estaba exponiendo la variable DbHelper así:
export const useWasmStore = defineStore('wasm', () => {
return {DbHelper}
})
Así que la solución es no exponer esa variable. Si quieres usarla puedes exponer un método desde la store y luego desde ese método local usar la variable.
Por ejemplo mira mi store en donde, después de limpiar mi código, la variable que se llamaba DbHelper
es envolturaWorkerPuenteWasm
y la estoy exponiendo con la función ejecutarAccionEnWasm
, de este modo cualquiera puede invocar a ejecutarAccionEnWasm
pero ya no estoy exponiendo el resultado de Comlink.wrap
:
import { defineStore } from 'pinia'
import * as Comlink from "comlink"
import ArchivoWorkerPuenteWasm from "@/worker_puente_wasm?worker"
const workerPuenteWasm = new ArchivoWorkerPuenteWasm();
const envolturaWorkerPuenteWasm = Comlink.wrap(workerPuenteWasm);
// @ts-ignore
await envolturaWorkerPuenteWasm.iniciar();
export const useWasmStore = defineStore('wasm', () => {
async function ejecutarAccionEnWasm(accion: string, datos: Array<any>) {
// @ts-ignore
const resultado = await envolturaWorkerPuenteWasm.ejecutarAccionEnWasm(accion, datos);
return resultado.resultado;
}
return { ejecutarAccionEnWasm }
})
El error contenía el siguiente mensaje:
comlink.js?v=8e4c773e:40 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘apply’) at callback
Era porque estaba invocando a una función que no existe.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.