Git Product home page Git Product logo

vue-worker's Issues

how to pass an external function to the worker?

Currently I would like to know if it is possible: Scenario, have two functions; The first is a generic function to create workers and returns value. The second is an external function that accesses through the mixin. My question is how do I pass this mixin function as a parameter for the worker's function to execute it?

How delete the worker

Hi,

I have a problem to stop the worker before it finishes its task.
I tried to set worker = null in the destroyed method of the component but the execution continues.

How to do if for example we change page and stop the worker ?

Regards

Error when importing into a electron-vue app

Hi,

I'm trying to use VueWorker in an app created with electron-vue, [https://github.com/SimulatedGREG/electron-vue].

When importing VueWorker, I get the following error,
Uncaught SyntaxError: Unexpected token import at createScript (vm.js:74) at Object.runInThisContext (vm.js:116) at Module._compile (module.js:533) at Object.Module._extensions..js (module.js:580) at Module.load (module.js:503) at tryModuleLoad (module.js:466) at Function.Module._load (module.js:458) at Module.require (module.js:513) at require (internal/module.js:11) at eval (external "vue-worker"?b6d5:1)

I don't know if this is a problem with electron-vue or with VueWorker, thought I'll ask here first.
The error is reported in \node_modules\vue-worker\index.js:1.

Steps:

Create an empty project with vue init simulatedgreg/electron-vue my-project

Then npm install vue-worker and import it in the main.js created by electron-vue.

As soon as you start the application, you'll see the error.

Any ideas ?

Thanks.

I posted an issue on electron-vue as well, SimulatedGREG/electron-vue/issues/562

how to use vue-worker in Axios

for example，request callback

getCoreIndicatorList(params).then(({ data }) => {
       this.$worker.run((context,source)=>{
          context.coreIndicator= source.todayTotalAmount | 0
      },[this,data]).
       .then(() => // do something})
       .catch(console.error)

Failed to execute 'postMessage' on 'Worker': function () { [native code] } could not be cloned.

[Question] Context of `this`

As the title suggest what is the context of the this keyword inside the function this.$worker.run() i am i getting access to my data components?

Uncaught ReferenceError: xxx is not defined 

// worker.js

const add = (a, b) => {
    return a + b
}

export const testfun = (a, b) => {
   return add(a, b)
}


import { testfun } from './worker.js';

const r = await this..$worker.run(testfun, [1,2]);

I get this:

Uncaught ReferenceError: add is not defined

Error in Laravel

I'm using Laravel, but I get an error when I try to import VueWorker

I only added the import VueWorker from 'vue-worker'; so that must be the error.

emil@debian:/var/www/dashboard$ gulp --production
[16:37:02] Using gulpfile /var/www/dashboard/gulpfile.js
[16:37:02] Starting 'all'...
[16:37:02] Starting 'sass'...
[16:37:04] Finished 'sass' after 2.4 s
[16:37:04] Starting 'webpack'...
{ Error
    at new JS_Parse_Error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)
    at expect_token (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2110:9)
    at expect (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2113:36)
    at eval (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2686:13)
    at eval (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)
    at expr_atom (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2616:35)
    at maybe_unary (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)
  message: '/var/www/dashboard/app.js: SyntaxError: Unexpected token punc «(», expected punc «:»',
  fileName: '/var/www/dashboard/app.js',
  lineNumber: 42975,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)\n    at croak (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)\n    at token_error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)\n    at expect_token (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2110:9)\n    at expect (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2113:36)\n    at eval (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2686:13)\n    at eval (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)\n    at expr_atom (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2616:35)\n    at maybe_unary (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }

failed to run fetch in vue-worker 

created() {
      this.$worker.run((arg) => {
        fetch("http://localhost:8080/dataPersistence/getApiList",{
          method:'GET',
          cache:"force-cache",
          headers:{
            "Content-Type": "application/json; charset=utf-8"
          }
        }).then(function(response) {
          response.json()
            .then(data => {
              console.log(data)              
            })
            .catch(error => {
              console.log('failed')
            })
        })
          .catch(function(myJson) {
            console.error('failed',myJson)
          })

        return `Hello, ${arg}!`
      }, ['World'])
    }

As you can see ,fetch is not run。。。
qq 20181227152000

setInterval dosen't work

This is my code:

methods: {
   setTimer(val) {
      this.timerWorker = this.$worker.run(function(val) {
        console.log(setInterval)
        console.log(val)
        const timer = setInterval(function() {
          val -= 17
          console.log('setInterval', val)
        }, 17);
        return val
      }, [val]).then(res => {
        console.log(res)
      })
    }
}

And then, 'setInterval' didn't show up.

Synchronous example

Are you able to provide an example of how this can be used in a synchronous way at all using a setTimeout or something to then resolve the promise? And correctly destroying the instance.

Thanks

How to use methods in worker ?

i have methods like this

methods: {
    workerJob(){
        var count = 0;
        for (var i = 0; i < 5; i++) {
            count ++;
        }
   }
}

How can i call workerJob() using vue-worker ? below code is giving error Uncaught ReferenceError: _this is not defined

this.$worker.run(this.workerJob());

Trying to install using npm but stuck with dependency

As per document I am trying to install using npm I received following error

c:\readinglog>npm install --save vue-worker
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Error: EPERM: operation not permitted, rename 'c:\readinglog\node_modules.staging\fsevents-4d267589\node_modules\readable-stream' -> 'c:\readinglog\node_modules.staging\readable-stream-5774a0a3'

npm ERR! path c:\readinglog\node_modules\simple-web-worker
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'c:\readinglog\node_modules\simple-web-worker' -> 'c:\readinglog\node_modules.simple-web-worker.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nd185089\AppData\Roaming\npm-cache_logs\2020-07-27T13_13_02_273Z-debug.log

If I try to install other dependencies it goes on utill finally stuck with following error

c:\readinglog>npm install --save bufferutil utf-8-validate fsevents
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS: darwin
npm ERR! notsup Valid Arch: any
npm ERR! notsup Actual OS: win32
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nd185089\AppData\Roaming\npm-cache_logs\2020-07-27T13_20_27_964Z-debug.log

imported lodash functions not working in the worker function

When I run a function which uses imported lodash functions, I get an error:

Uncaught ReferenceError: __WEBPACK_IMPORTED_MODULE_10_lodash___default is not defined

Is there a workaround for this, or imported modules cannot be used in the function that are sent to the worker?

Uncaught ReferenceError: _ref2 is not defined 

submitFlag() {
      const { flag, token } = this.$data;
      const info = this.info;
      const local = { owner: "user", repository: "repo" };
      const upstream = {
        owner: config.owner,
        repository: config.submissionsRepo
      };

      this.$worker
        .run(
          async (flag, info, token, local, upstream) => {
            const NIZKCTF = require("../services/nizkctf");
            const nizkctf = new NIZKCTF(token, local, upstream);

            return await nizkctf.submitFlag(flag, info);
          },
          [flag, info, token, local, upstream]
        )
        .then(r => console.log(r))
        .catch(r => console.log("Error", r));
    }

How to send a message from vue-worker like worker.onmessage

I have that code:

    setInterval(() => {
      const options = { timeZone: "America/New_York"}, myTime = new Date();
      let est_time = myTime.toLocaleString("en-US", options)
      let now = new Date(est_time)

      let millisTill8 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0, 0) - now;
      if (millisTill8 < 0) {
        millisTill8 += 86400000; // try after 24 hours tomorrow
      }
      setTimeout(() => {
        this.is_live_chat_active = true
      }, millisTill8);

      let millisTill20 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 20, 0, 0, 0) - now;
      if (millisTill20 < 0) {
        millisTill20 += 86400000; // try after 24 hours tomorrow
      }
      setTimeout(() => {
        this.is_live_chat_active = false
      }, millisTill20);
    }, 86400000);

I want to put it in vue worker. Every day, when the time is 8am or 8pm i want to toggle a boolean variable within a component.

Using just workers that would be possible by:

Worker.onmessage = (toggle) => {
  this.toggle_variable = toggle
}

But i can't figure out how to do this using vue-worker

How can we use data and methods in vue-worker ?

I have read this

It is not possible to pass as an arg this from a Vue Component. You can pass this.$data or any variable within data or computed

but no idea how to access data and methods insight worker ?

 export default {
        components: {
            Attribute,
            vueCustomScrollbar,
            Time
        },
        data() {
            return {
              user : {},
            }
        },
       computed:{
           reversedMessage: function () {
              return 100000;
            }
       },
       mounted() {
       // how to use vue worker to access 
           this.$worker.run(this.userDetails()); // not working
           this.$worker.run((arg1) => `this.$worker run 2: ${arg1}`, [this.$reversedMessage]). // not working
          this.$worker.run((arg1) => `this.$worker run 2: ${arg1}`, [this.$data.user]). // working
       },
        methods: {
          userDetails(){
          }
        }
}

Failed to execute 'postMessage' on 'Worker'

got this error, any ideas?

DOMException: Failed to execute 'postMessage' on 'Worker': function (){return ccall(ident,returnType,argTypes,arguments)} could not be cloned.
    at eval (webpack-internal:///622:1:3485)
    at new Promise (<anonymous>)
    at Worker.o.post (webpack-internal:///622:1:3301)
    at Object.run (webpack-internal:///622:1:3729)
    at eval (webpack-internal:///241:87:26)
    at http://code.dappbench.com/browser-solc.min.js:1:141533
    at HTMLScriptElement.d.readyState.d.onload (http://code.dappbench.com/browser-solc.min.js:1:141310)

How to postMessage continuously?

hello,I'm a user of ur vue-worker,It's useful,but I encounter a problem

The scene:
I need a timerTask to post new Date to mainPage,So I write a demo as follow:
I write a timeout/interval in Fuction.run , but it's not take effect,could u give me a resolution?

preThx for help~

methods: {
startClock() {
    this.clock_worker = this.$worker
    .run(() =>{
       //var timer=()=>{
        //     setTimeout(timer,1000);
        // }
        // timer();     
        // setInterval(postMessage(new Date()),1000)
        //---------PS:  SETTIMEOUT && SETINTERVAL is not take effect
    })
    .then(res => console.log(res)) // logs 'this.$worker run 1: Function in other thread'
    .catch(console.error); // logs any possible error
}
},
mounted() {
if (typeof Worker === "undefined") {
  this.$message("您的浏览器不支持WebWorker,某些特性可能无法完美呈现");
} else {
  this.startClock();
}
}
 };

Add the possibility to link a node to itself

Hi,

first thanks for the framework it really works great!

Do you think it would be possible to add links from a node to itself (i.e. a link with tid === sid)
so that it would be visible? As of now you can of course add that link but it isn't drawn

That would be really cool!

vuex and vue-worker

Is it possible to access the vuex store from within a function passed onto a worker ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.