Ninja Pirate Marksman

    nb-blob-worker

    1.7.3 • Public • Published

    nb-blob-worker

    This is a standalone web worker with inline script (generate by Blob)

    Installation

    Bower:

    bower install nb-blob-worker --save
    

    NPM:

    npm install nb-blob-worker --save
    

    Yarn:

    yarn add nb-blob-worker
    

    Introduction

    There are one method and one class return from this module.

    By default

     
    import NbBlobWorker from 'nb-blob-worker';
    // or using the ES6 destructuring
    import {NbBlobWorkerEvent} from 'nb-blob-worker';
     
    // or a common js style
     
    const NbBlobWorker = require('nb-blob-worker')['default'];
     
    const NbBlobWorkerEvent = require('nb-blob-worker')['NbBlobWorkerEvent'];
     

    Basic Example:

    This is an ES6 example from our production code:

     
    const Worker = require('nb-blob-worker');
     
    const localWorker = Worker(); // this will always return a new worker();    
     
    localWorker.postMessage({
        url: 'url_to_http_fetch',
        type: 'GET' // 'POST'
        data: {} // optional
    });
     

    The above example will make a call to the end point url.

     
    localWorker.onmessage = function(e)
    {
        var data = e.data;
        // do whatever you need with the result     
    };
     
    localWorker.onerror = function(e)
    {
        var error = e.data;
        // handle your error;
    };
     

    Using NbBlobWorkerEvent

     
    import {NbBlobWorkerEvent} from 'nb-blob-worker';
     
    const workerInstance = new NbBlobWorkerEvent({
        url: 'url_to_http_fetch',
        type: 'GET',
        auto: true // then it will execute this call immediately
    });
     
    workerInstance.$on('GET' , (data) =>
    {
        // the e.data return here
    });
     
    workerInstance.$on('error' , (error) =>
    {
        // handle your error
    });
     
    // later on if you need to call the same url again
     
    workerInstance.$execute();
     
    // of if you need to pass a different parameters
     
    workerInstance.$execute({data: {id: 1}});
     

    Interval Example:

     
    const Worker = require('nb-blob-worker');
     
    const localWorker = Worker(); // this will always return a new worker();    
     
    localWorker.postMessage({
        url: 'url_to_http_fetch',
        type: 'GET', // 'POST'
        data: {}, // optional
        timer: 2000 // in ms  
    });
     

    Now the above code will get call every 2 seconds.

    JSONP (v1.3.0)

    Example:

     
    const Worker = require('nb-blob-worker');
     
    const localWorker = Worker(); // this will always return a new worker();    
     
    localWorker.postMessage({
        url: 'external_url_to_http_fetch',
        type: 'JSONP', // make sure its upper case!!!
        data: {} // see explain
    });
     

    When you use the JSONP (uppercase please!) option. Please do not pass any query parameter. Instead put them int the data parameter, it will automatically append it for you.

    The reason is the code dynamically add several options to the url.

    • The callback name will be nbWorkerCallback make sure your code create corresponded response. If you want to use your own callback name. See example below.
    • add cb=randomNumber AKA cache buster.

    Using your own callback name

     
        const worker = require('nb-blob-worker');
     
        const localWorker = worker({jsonpFnName: 'yourCallbackName'});
     
     
        localWorker.postMessage({
            url: 'external_url_to_http_fetch',
            type: 'JSONP', // make sure its upper case!!!
            data: {} // see explain
        });
     

    Using NbBlobWorkerEvent:

     
    import {NbBlobWorkerEvent} from 'nb-blob-worker';
     
    const workerInstance = new NbBlobWorkerEvent({
        jsonpFnName: 'yourCallbackName',
        url: 'url_to_http_fetch',
        type: 'GET',
        auto: true // default, false then it will not execute the call immediately
    });
     
    // if you don't pass the auto option
    workerInstance.$execute();
     

    Then in your server code just wrap the data in the name you specified.

    DEBUG , TIMEOUT

    @2016-11-04 add two new configuration properties debug and timeout

    when you add debug (value is anything not falsy)

     
    const Worker = require('nb-blob-worker');
     
    const localWorker = Worker(); // this will always return a new worker();    
     
    localWorker.postMessage({
        url: 'url_to_http_fetch',
        type: 'GET',
        debug: true
    });
     

    In your onmessage call

     
        localWorker.onmessage = function(e)
        {
            var data = e.data;
            if (data.debug) {
                // the value is the xhr object
            }
            /// ...
        };

    And now you can set a timeout property (in mil seconds)

     
    const Worker = require('nb-blob-worker');
     
    const localWorker = Worker(); // this will always return a new worker();    
     
    localWorker.postMessage({
        url: 'url_to_http_fetch',
        type: 'GET',
        timeout: 2000
    });
     

    Internally we have set a onTimeout error handler. So you will get an error message {error: 'TIMEOUT'} when its timeout.

    NOTE ABOUT SETTING YOUR URL

    Please make sure you set the absolute url path.

    If you pass something like

     
        localWorker.postMessage({
            url: '/api/something',
            type: 'GET'
        });

    Your browser might complain about cross origin. Instead you could do it like this:

     
        localWorker.postMessage({
            url: window.location.origin + '/api/something',
            type: 'GET'
        });

    DEV

    We are using yarn instead of npm to handle the devDependencies.

    If you don't have yarn:

    npm install yarn -g
    

    Then cd into the directory:

    yarn install
    

    There is one command to run (turn the ES6 --> ES5)

    npm run compile 
    

    IMPORTANT

    I have to cheat a little bit to get the ES5 version to work. It has to do with the babel configuration. Just open the worker-es5.js and check the comment.

    Also we are using a new standard jsnext:main to notify the importer / bundler this is a ES6 first module.


    Joel / Oct 2016 / London

    to1source

    Install

    npm i nb-blob-worker

    DownloadsWeekly Downloads

    56

    Version

    1.7.3

    License

    MIT

    Last publish

    Collaborators

    • joelchu