WebSQL Database in Web Worker

1,490 views
Skip to first unread message

html5css3

unread,
Sep 27, 2010, 11:28:39 PM9/27/10
to Chromium HTML5
Hi,
Can anyone tell me if it is possible to open a WebSQL Database and
issue commands to it from within a worker?

I have a test file here:
http://virtualbos.com/workdir/offline/worker/html5test.htm

This file opens a WebSQL Database using javascript, then another using
a web worker.
The javascript one works fine, however I cannot get the one in the web
worker to work.

Is there a way to do this?

Thanks

Dumitru Daniliuc

unread,
Sep 28, 2010, 12:09:31 AM9/28/10
to html5css3, Chromium HTML5
it should be possible to open both sync and async DBs from workers. are you sure you're not getting some other exception? in particular, are you sure you're not getting a "'worker' undefined" error when you call worker.postMessage() on line 18? try moving the call right after worker = new Worker('worker.js') if this is your problem.

dumi



--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.


html5css3

unread,
Sep 28, 2010, 12:19:07 AM9/28/10
to Chromium HTML5
Hi Dumi,
I moved the worker.postMessage() up to the next line after new
Worker('worker.js') as suggested
The problem I have is that I have no console errors, it just does not
start up the database at all.
It does however start the one I setup through javascript (no worker)

I stripped down both files to the basics and still not getting the
webworker started WebSQL Database..

Here is the html page code:
<html>
<head>
<title>Worker example</title>
<script>
function setupDB(){
if(window.openDatabase){ db=openDatabase("JStestDB","1.0","JS Test
DataBase",10240);}
}
worker = new Worker('worker.js');
worker.postMessage();
</script>
</head>
<body onload='setupDB()'>
</body>
</html>

And the worker.js code:
onmessage = function (event)
{ db=openDatabase("WWtestDB","1.0","WebWorker Test DataBase",10240);}

When I load this page I only get the JStestDB showing up in Storage,
no sign of the WWtestDB??
Am I missing something simple here to get this working?

Thanks




On Sep 28, 2:09 pm, Dumitru Daniliuc <d...@chromium.org> wrote:
> it should be possible to open both sync and async DBs from workers. are you
> sure you're not getting some other exception? in particular, are you sure
> you're not getting a "'worker' undefined" error when you call
> worker.postMessage() on line 18? try moving the call right after worker =
> new Worker('worker.js') if this is your problem.
>
> dumi
>
>
>
>
>
>
>
> On Mon, Sep 27, 2010 at 8:28 PM, html5css3 <i...@virtualbos.com> wrote:
> > Hi,
> > Can anyone tell me if it is possible to open a WebSQL Database and
> > issue commands to it from within a worker?
>
> > I have a test file here:
> >http://virtualbos.com/workdir/offline/worker/html5test.htm
>
> > This file opens a WebSQL Database using javascript, then another using
> > a web worker.
> > The javascript one works fine, however I cannot get the one in the web
> > worker to work.
>
> > Is there a way to do this?
>
> > Thanks
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium HTML5" group.
> > To post to this group, send email to chromium-ht...@chromium.org.
> > To unsubscribe from this group, send email to
> > chromium-html5+unsubscr...@chromium.org<chromium-html5%2Bunsubscr...@chromium.org>
> > .

Dumitru Daniliuc

unread,
Sep 28, 2010, 12:21:48 AM9/28/10
to html5css3, Chromium HTML5
here's my code (tested in chrome 6.0.472.62 (Official Build 59676)):

test.html:
<html>
<head>
<script>
function test() {
  db = openDatabase("Foo", "", "", 1);
  if (db)
    alert(1);
  else
    alert(2);

  worker = new Worker('worker.js');
  worker.onmessage = function(event) {
    alert(event.data);
  }
}
</script>
</head>
<body onload="test()">
</body>
</html>

worker.js:
db = openDatabase("WorkerFoo", "", "", 1);
if (db)
  postMessage(3);
else
  postMessage(4);


when i run test.html, i get an alert with message "1", followed by an alert with message "3". give it a try and see if this works for you.

dumi


To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

html5css3

unread,
Sep 28, 2010, 12:29:17 AM9/28/10
to Chromium HTML5
Thanks Dumi,

Looks like it was starting up the db all along.
I also got an alert of 1 then alert of 3 so it is there.

Any ideas how I get access to viewing the WebSQL Database opened in
the worker?
I still do not see it in the storage area.
I assume this is because it is not opened on that html page.
So is there a way to view the WebSQL created by a web worker similar
to inspect element for the html page?

Thanks
> > <chromium-html5%2Bunsubscr...@chromium.org<chromium-html5%252Bunsubscr...@chromium.org>

Dumitru Daniliuc

unread,
Sep 28, 2010, 12:51:29 AM9/28/10
to html5css3, Chromium HTML5
i'm not very familiar with how devtools work. when i need to inspect a database, i usually open it with a sqlite tool. all your web sql dbs should be in c:/Users/<your_username>/AppData/Local/Google/Chrome/UserData/Default/databases/ (or something similar). open Databases.db, and look for the 'id' corresponding to your database in the "Databases" table. then you can find your database file at <your_origin>/<the_id_you_got_from_Databases.db>.

i would STRONGLY advise against modifying Databases.db.

dumi


To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

html5css3

unread,
Sep 28, 2010, 1:08:26 AM9/28/10
to Chromium HTML5
Thanks again

I assume the fact that I cannot see it in devtools storage is because
the webworker database is not being opened bythe html page but by the
webworker, so devtools is only showing the database that was opened by
standard js in the html page.

This makes me wonder if a database opened in a web worker is
accessable by other webworkers?

For instance if I start one web worker that sets up the database and
builds tables.
I then start another web worker that accesses this database and
displays results from it.

Do you know is it possible to use multiple web workers to access a
database opened in only one of those web workers?
Or can the database opened by that web worker only be accessed by that
same web worker?
Thanks
> > > > <chromium-html5%2Bunsubscr...@chromium.org<chromium-html5%252Bunsubscr...@chromium.org>
> > <chromium-html5%252Bunsubscr...@chromium.org<chromium-html5%25252Bunsubscr...@chromium.org>

Daniel Kantor

unread,
Sep 28, 2010, 12:14:34 PM9/28/10
to html5css3, Chromium HTML5
It sounds like it worked but I am curious how. I thought anything using the window object in workers was off limits. 

Dan

To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

html5css3

unread,
Sep 28, 2010, 8:56:36 PM9/28/10
to Chromium HTML5
I have gone a little further with this and have run into a problem.
I have written a test worker that creates a sync db then creates a
test table then insert a test row (id) then selects each line from the
database and posts it back to the alert box.

The idea was to have each postMessage() commented out and then
uncomment for each postMessage() and run through the code to make sure
each section was functioning correctly.

When I build the db and have the postMessage('Web Worker DB Built')
uncommented it shows the alert box ok.

I then uncomment the next postMessage('Table Created') and get no
alert box.

Console shows me an error -> Uncaught #<an SQLexception>

Is this because the sync db is not accessible, or not really built?
Jeremy has mentioned in another post that the reason for the DB not
showing in Storage is a bug and not intentional and that it should
actually show there.

Is this something that is still buggy and not working, or am I doing
something wrong in the code?

Html Code:
<html>
<head>
<script>
worker = new Worker('worker.js');
worker.onmessage = function(event) { alert(event.data);}
</script>
</head>
<body>
Foo
</body>
</html>

Worker.js Code:
db = openDatabaseSync("WorkerFoo", "", "", 1);
//if(db) postMessage('Web Worker DB Built');

var query='create table test (id int(10))';
db.transaction( function(tx){ tx.executeSql(query, [], null,null); });
if(db) postMessage('Table Created');

var query='insert into test (id) values (1)';
db.transaction( function(tx){ tx.executeSql(query, [], null,null); });
//if(db) postMessage('Data Inserted');

var query='select * from test';
db.transaction( function(tx){ tx.executeSql(query, [],
function(tx,result){
if(result.rows.length>0){
for(var l=0; l<result.rows.length; l++){
//postMessage('Result: '+result.rows.item(l)[id]);
}}},null); });

Thanks
> > > > <chromium-html5%252Bunsubscr...@chromium.org<chromium-html5%25252Bunsubscr...@chromium.org>
> > <chromium-html5%25252Bunsubscr...@chromium.org<chromium-html5%2525252Bunsubscr...@chromium.org>

Dumitru Daniliuc

unread,
Sep 28, 2010, 9:07:05 PM9/28/10
to html5css3, Chromium HTML5
if you run your code at least twice, then you'll always get an error, because table 'test' already exists. change your query to: 'create table if not exists test (id int(10))' (or do a 'drop table if exists test' first). also, try wrapping your code into a try-catch block, and check the type of error and the error code:

try {
  ...
} catch (err) {
  postMessage("Exception: " + err + "; code = " + err.code);
}

i get you're getting an error code of 2 (DATABASE_ERR): http://dev.w3.org/html5/webdatabase/#errors-and-exceptions.

dumi


To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Dumitru Daniliuc

unread,
Sep 28, 2010, 9:13:56 PM9/28/10
to html5css3, Chromium HTML5
also, executeSql() doesn't have success/error callbacks in the sync API, so instead of:


db.transaction( function(tx){ tx.executeSql(query, [],
function(tx,result){
if(result.rows.length>0){
for(var l=0; l<result.rows.length; l++){
//postMessage('Result: '+result.rows.item(l)[id]);
}}},null); });

your code needs to look more like this:

db.transaction(function(tx) {
  result = tx.executeSql(query);   // the 'values' parameter is optional, and can be omitted if it's empty
  if (result.rows.length > 0) {
    // do stuff
  }
});

dumi

Dumitru Daniliuc

unread,
Sep 28, 2010, 9:25:21 PM9/28/10
to Rick Waldron, html5css3, Chromium HTML5
you're using openDatabase() instead of openDatabaseSync() in worker.js, so you're using the async API.

On Tue, Sep 28, 2010 at 6:20 PM, Rick Waldron <waldro...@gmail.com> wrote:
Did you test those suggestions? The first one is true where the table already exists, but the second will not fix the problem, I have a working example gist: 

Rick Waldron

unread,
Sep 28, 2010, 9:32:43 PM9/28/10
to Dumitru Daniliuc, html5css3, Chromium HTML5
Got it - there was virtually no documentation available for the sync api and to have the sync api differ from the regular api (no success, error callbacks) is frustrating.

Rick Waldron

unread,
Sep 28, 2010, 9:20:58 PM9/28/10
to Dumitru Daniliuc, html5css3, Chromium HTML5
Did you test those suggestions? The first one is true where the table already exists, but the second will not fix the problem, I have a working example gist: 



html5css3

unread,
Sep 29, 2010, 1:53:04 AM9/29/10
to Chromium HTML5
All is working good inside the webworker.
I can create the db, create tables, insert data then show the data
using select then posting the looped results back to the html page

Is it only possible to access the database created in the worker from
that worker?

I have used the same code out of the web worker in a js function on
the html page to select and show the information.
Using this code to access db (the database created in web worker) it
comes up as 'db is not defined'

Is there a way to access the database created in the web worker from a
js function in the html page, or must every request to the database be
made from the html page via postMessage(), then web worker accesses
database, gets results and postMessage()s the results back to be html
page??

Here is code for example I am using:
HTML:
<html>
<head>
<script>
dbconf=new Worker('wwdbconftest.js');
dbconf.onmessage=function(event){
//alert(event.data);
document.getElementById('display').innerHTML+=event.data+'<br>';
}

function showDBContent(){
var query='select * from locations';
db.transaction(function(tx){
result=tx.executeSql(query);
if(result.rows.length>0){
for(var l=0; l<result.rows.length; l++){
document.getElementById('display').innerHTML+='Result:
'+result.rows.item(l)['id']+'<br>';
}}});
}
</script>
</head>
<body>
Web Worker DB Conf Test Page<br>
<button onclick="dbconf.postMessage('cbos_npg');">Run dbconf Worker</
button><br><br>
<div id="display">Show Message Responses Here<br></div>
<button onclick="showDBContent();">Show DB Content</button><br>
</body>
</html>

wwwdbconftest.js CODE:
onmessage = function(e) {
var data = e.data;

db = openDatabaseSync("WorkerFoo", "", "", 1);
if(db) postMessage('Web Worker DB Built');

//var query='drop table if exists test';
//db.transaction( function(tx){ tx.executeSql(query, [],
null,null); });
var query='create table if not exists test (id int(10))';
db.transaction( function(tx){ tx.executeSql(query, [], null,null); });
postMessage('Table Created');

var query='insert into test (id) values (1)';
db.transaction( function(tx){ tx.executeSql(query, [], null,null); });
postMessage('Data Inserted');

var query='select * from test';
db.transaction(function(tx){
result=tx.executeSql(query);
if(result.rows.length>0){
for(var l=0; l<result.rows.length; l++){
postMessage('Result: '+result.rows.item(l)['id']);
}}});

}

Thanks

html5css3

unread,
Sep 29, 2010, 1:56:47 AM9/29/10
to Chromium HTML5
BTW in example I am loading page, clicking Run dbconf worker button to
setup database, and show results.
After this clicking Show DB Content comes up db is not defined, as it
cannot find the database built by web worker.

Thanks

Dumitru Daniliuc

unread,
Sep 29, 2010, 2:02:29 AM9/29/10
to html5css3, Chromium HTML5
you should have access to any database in the same origin from the page and all workers. 'db is not defined' is probably an error that tells you that the variable 'db' was not defined. to use the same DB in a worker and the page, you have to open it in both locations, you can't just "port" a variable from the worker to the page.

dumi



Thanks

Reply all
Reply to author
Forward
0 new messages