How to use Web Workers to run CPU Intensive queries

[krishnagogada]

We are requesting more than 250 million rows, and then our page is getting page unresponsive.

So we decided to use web workers. We faced few problems while using web workers.

• We tried in this method, but here dist/worker.sql-wasm.js and dist/worker.sql-wasm.wasm resulted in page not found, hence we copy-pasted the code from node_modules.

• From this line we got an error var worker = new Worker("./worker.sql-wasm.js"); Uncaught SyntaxError: Unexpected token '.'.

• So we used blob URL as shown below

sqlWorkers.js

import sqlWebWorker from './worker.sql-wasm'

export function myWorker(workerURL) {
   return new Worker(
      URL.createObjectURL(
         new Blob(['(' + workerURL.toString() + ')()'], {
            type: 'text/javascript'
         })
      )
   )
}

export function sqlWorker(query, uInt8Array) {
   var worker = new myWorker(sqlWebWorker)

   worker.onmessage = () => {
      console.log('Database opened')
      worker.onmessage = event => {
         console.log(event.data) // The result of the query
      }

      worker.postMessage({
         action: 'exec',
         sql: query
      })
   }

   worker.onerror = e => console.log('Worker error: ', e)

   worker.postMessage({
      action: 'open',
      buffer: uInt8Array /*Optional. An ArrayBuffer representing an SQLite Database file*/
   })
}

worker.sql-wasm.js

export default () => {
   var initSqlJsPromise = ''

   var initSqlJs = function(moduleConfig) {
      if (initSqlJsPromise) {
         return initSqlJsPromise
      }
   
      //--------> copy-pasted code from node_modules(sql/dist/worker.sql-wasm.js) <-----------

if (typeof exports === 'object' && typeof module === 'object') {
      module.exports = initSqlJs
      // This will allow the module to be used in ES6 or CommonJS
      module.exports.default = initSqlJs
   } else if (typeof define === 'function' && define['amd']) {
      define([], function() {
         return initSqlJs
      })
   } else if (typeof exports === 'object') {
      exports['Module'] = initSqlJs
   }
}

This method didn't give any error, but the Database opened string is not logged in worker.onmessage.

Can you help us with how to use web workers in sql.js.

TIA

[lovasoa]

We tried in this method, but here dist/worker.sql-wasm.js and dist/worker.sql-wasm.wasm resulted in page not found, hence we copy-pasted the code from node_modules.

I'm not sure what you mean. You have to download the files mentioned in the instruction, and serve them from your web server. You can download the latest version here: https://github.com/sql-js/sql.js/releases/tag/v1.5.0
Then you should not copy and paste dist/worker.sql-wasm.js, but replace this by the path at which the files are available on your server.

So we used blob URL as shown below

If you want to use the normal sql.js api, you should create your own web worker, require sql.js from it, and define your own communication protocol between your worker and your main thread. Then you let whatever packer you are using in your project create the web worker js file that will contain both your code and the sql.js dependency.

[lovasoa]

For discussion about web workers and sql.js, see #377

[krishnagogada]

@lovasoa

Yeah, it worked. But,

1. The page went unresponsive when requested more than 1.6 million rows.
2. Even though we are doing this using Web workers, the web page is getting stuck like above and is working fine after the entire data is fetched.

Is this behavior expected?