IndexedDB can make database unreachable (getting blocked), how unblock? - google-chrome

UPDATE
I discovered the issue is that it's blocked. Despite the database always being created and upgraded by the same extension, it does not get closed. So now I'm getting the "onblocked" function called.
How do I "unblock" currently blocked databases? And how do I prevent this in the future? This is an app, so no tabs are using it. And since I can't open those databases to even delete them (this also gets blocked), how do I close them?
(For anyone wondering, to avoid this issue from the start, you HAVE to do the folllowing:)
mydb.onversionchange = function(event) {
mydb.close();
};
Original Post
IndexedDB dies and becomes unopenable if I (accidentally) try to open and upgrade with the wrong version. As far as I can tell, there's no way to ask indexedDB for the latest version of a DB. So if I try to run the following code twice, it destroys the database and it becomes unopenable:
And it never throws an error or calls onerror. It just sits silently
var db = null;
//Note, no version passed in, so the second time I do this, it seems to cause an error
var req = indexedDB.open( "test" );
req.onsuccess = function(event) { console.log( "suc: " + event.target.result.version ); db = event.target.result; };
req.onerror = function(event) { console.log( "err: " + event ); };
req.onupgradeneeded = function(event) { console.log( "upg: " + event.target.result.version ); };
//We're doing in interval since waiting for callback
var intv = setInterval(
function()
{
if ( db === null ) return;
clearInterval( intv );
var req2 = indexedDB.open( "test", db.version + 1 );
req2.onsuccess = function(event) { console.log( "suc: " + event.target.result.version ); };
req2.onerror = function(event) { console.log( "err: " + event ); };
req2.onupgradeneeded = function(event) { console.log( "upg: " + event.target.result.version ); };
},
50
);
All of that code is in my chrome.runtime.onInstalled.addListener. So when I update my app, it calls it again. If I call indexedDB.open( "test" ) without passing in the new version and then again run the setInterval function, it causes everything to become unusable and I'm never able to open "test" again. This would be solved if I could query indexedDB for the version of a database prior to attempting to open it. Does that exist?

Maybe this helps?
function getVersion(callback) {
var r = indexedDB.open('asdf');
r.onblocked = r.onerror = console.error;
r.onsuccess = function(event) {
event.target.result.close();
callback(event.target.result.version);
};
}
getVersion(function(version) {
console.log('The version is: %s', version);
});
Ok, based on the convo, this little util function might set you on the path:
var DATABASE_NAME_CONSTANT = 'whatever';
// Basic indexedDB connection helper
// #param callback the action to perform with the open connection
// #param version the version of the database to open or upgrade to
// #param upgradeNeeded the callback if the db should be upgraded
function connect(callback, version, upgradeNeeded) {
var r = indexedDB.open(DATABASE_NAME_CONSTANT, version);
if(upgradeNeeded) r.onupgradeneeded = updateNeeded;
r.onblocked = r.onerror = console.error;
r.onsuccess = function(event) {
console.log('Connected to %s version %s',
DATABASE_NAME_CONSTANT, version);
callback(event.target.result);
};
}
// Now let us say you needed to connect
// and need to have the version be upgraded
// and need to send in custom upgrades based on some ajax call
function fetch() {
var xhr = new XMLHttpRequest();
// ... setup the request and what not
xhr.onload = function(event) {
// if response is 200 etc
// store the json in some variable
var responseJSON = ...;
console.log('Fetched the json file successfully');
// Let's suppose you send in version and updgradeNeeded
// as properties of your fetched JSON object
var targetVersion = responseJSON.idb.targetVersion;
var upgradeNeeded = responseJSON.idb.upgradeNeeded;
// Now connect and do whatever
connect(function(db) {
// Do stuff with the locally scoped db variable
// For example, grab a prop from the fetched object
db.objectStore('asdf').put(responseJSON.recordToInsert);
// If you feel the need, but should not, close the db
db.close();
console.log('Finished doing idb stuff');
}, targetVersion, upgradeNeeded);
}
}

I think it is best to provide the version number always. If you don't how are you going to manage upgrades on the db structure? If you don't its a good chance you will get in a situation where same db versions on a client will have an other database structure, and I don't think that is the thing you want. So I would suggest to keep the version number in a variable.
Also when working with indexeddb you will have to provide an upgrade plan from al previous versions to the current. Meaning version 4 has a certain structure, but you will have to be able to get that same structure from scratch as from version 1,2 and 3

Related

Offline Ready using Service worker

I built an offline first app using the appcache a while ago and wanted to convert it to using the service-worker (my clients all use the latest chrome so I don't have any browser compatibility issues).
I'm using sw-precache to generate a service-worker that caches my local assets (specifically, my html/css/fonts and also some js) and it looks like when the service-worker installs, it does successfully add all the assets to cache storage and it does successfully start (install and activate both fire and complete successfully. And I have the self.skipWaiting() at the end of the install event to start the service-worker (which it does successfully as well)).
The issue is that the "fetch" event doesn't seem to ever fire. As such, if I go offline or open a browser (while already offline) and navigate to the site, I get the Chrome offline dinosaur. When I look at the network tab, it looks like the browser is trying to hit a server to retrieve the pages. I'm not sure what I'm doing wrong and I didn't touch the fetch method that was generated by the sw-precache utility...so I'm not sure what I'm missing. Any help would be greatly appreciated. My fetch event is below:
self.addEventListener('fetch', function(event) {
if (event.request.method === 'GET') {
var urlWithoutIgnoredParameters = stripIgnoredUrlParameters(event.request.url,
IgnoreUrlParametersMatching);
var cacheName = AbsoluteUrlToCacheName[urlWithoutIgnoredParameters];
var directoryIndex = 'index.html';
if (!cacheName && directoryIndex) {
urlWithoutIgnoredParameters = addDirectoryIndex(urlWithoutIgnoredParameters, directoryIndex);
cacheName = AbsoluteUrlToCacheName[urlWithoutIgnoredParameters];
}
var navigateFallback = '';
// Ideally, this would check for event.request.mode === 'navigate', but that is not widely
// supported yet:
// https://code.google.com/p/chromium/issues/detail?id=540967
// https://bugzilla.mozilla.org/show_bug.cgi?id=1209081
if (!cacheName && navigateFallback && event.request.headers.has('accept') &&
event.request.headers.get('accept').includes('text/html') &&
/* eslint-disable quotes, comma-spacing */
isPathWhitelisted([], event.request.url)) {
/* eslint-enable quotes, comma-spacing */
var navigateFallbackUrl = new URL(navigateFallback, self.location);
cacheName = AbsoluteUrlToCacheName[navigateFallbackUrl.toString()];
}
if (cacheName) {
event.respondWith(
// Rely on the fact that each cache we manage should only have one entry, and return that.
caches.open(cacheName).then(function(cache) {
return cache.keys().then(function(keys) {
return cache.match(keys[0]).then(function(response) {
if (response) {
return response;
}
// If for some reason the response was deleted from the cache,
// raise and exception and fall back to the fetch() triggered in the catch().
throw Error('The cache ' + cacheName + ' is empty.');
});
});
}).catch(function(e) {
console.warn('Couldn\'t serve response for "%s" from cache: %O', event.request.url, e);
return fetch(event.request);
})
);
}
}
});

Receiving only one byte in Serial Port - Chrome App

The situation
I have a scanner that has been working with a compiled application which I don't have the source. It still works and can be tested to make sure the scanner is working. I need to convert the data entry process to my web based system.
So I'm building a chrome app that read serial port information incoming from the com port. I first tried setting it up with a com port emulator and a virtual null modem. This allowed me to test the connection and the receive data. I can't find why I am receiving only 1 byte.
The problem
When I connected to the actual scanner, I am able to connect without any issue, but when I receive the dataArray it's only one byte long. After reveiving the first data, I'm unable to receive any other data until I restart the connection.
The Code
var connectionId = -1;
var e_dtr, e_rts, e_dcd, e_cts, e_ri, e_dsr;
var dtr, rts;
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.serial.getDevices(function(objs,arg2){
chrome.serial.connect(objs[0].path, {ctsFlowControl:true}, onConnect)
});
});
chrome.serial.onReceive.addListener(function(info){
chrome.serial.getInfo(info.connectionId, output);
var uint8View = new Uint8Array(info.data);
var value = String.fromCharCode.apply(null, uint8View);
console.log(value);
});
chrome.serial.onReceiveError.addListener(function(info){
var uint8View = new Uint8Array(info.data);
var value = String.fromCharCode.apply(null, uint8View);
console.log(value);
});
function readSignals() {
chrome.serial.getControlSignals(connectionId,onGetControlSignals);
}
function onSetControlSignals(result) {
console.log("onSetControlSignals: " + result);
};
function changeSignals() {
chrome.serial.setControlSignals(connectionId, { dtr: dtr, rts: rts }, onSetControlSignals);
}
function onGetControlSignals(signals) {
console.log(signals);
}
function onConnect(connectionInfo) {
console.log(connectionInfo);
if (!connectionInfo) {
console.log('Could not open');
return;
}
connectionId = connectionInfo.connectionId;
console.log('Connected');
dtr = false;
rts = false;
changeSignals();
setInterval(readSignals, 1000);
};

multiple websockets connections on the same client - server cannot handle

Let me clarify, this is kind of complicated.
I'm implementing a form to insert data in the database.
I have two websockets connections in the same client side, connecting on the same nodejs server.
One connection is triggered after the user inserts a name on the "name" textfield of the form. Sends the data to the server, server checks the database if the name already exists and responces back "This already exists. Mayde you are inserting something that is already there".
The other connection is triggered if all the fields of the form are not blank and sends the data to server to insert them in the database.
I thought it was a good idea to distinguish on server-side ,the different connections using arrays. If the first element of the array is "name" call the checkName function, or if it is "insert" , call the insertInDB function.
I created two small testing files. They do not work. Connections are open and the client sends the data. I get no errors inte server nor the client side. But server never responces. I dont get the expected numbers, back in the client side. I dont think this is the right anyway. This is complecated, I hope the code helps you.
Is it possible, what I am trying to do? Any hints or alternatives?
Thanks
the code....
server-side
function WebSocketTest1(){
var a=1;
var b=2;
var c = [a,b];
var so = new WebSocket("ws://localhost:1337");
so.onerror=function (evt)
{message.textContent = evt;}
so.onopen = function(){
message.textContent = "opened";
so.send(c);
message.textContent = "sended";
}
so.onmessage = function (evt) {
var received_msg = evt.data;
document.getElementById("message").innerHTML=received_msg;
}
}
function WebSocketTest2(){
var d=3;
var e=4;
var f = [d,e];
var sa = new WebSocket("ws://localhost:1337");
sa.onerror=function (evt)
{message2.textContent = evt;}
sa.onopen = function(){
message2.textContent = "opened";
sa.send(f);
message2.textContent = "sended";
}
sa.onmessage = function (evt) {
var received_msg = evt.data;
document.getElementById("message2").innerHTML=received_msg;
}
}
</script>
</head>
<input type="button" value="one" onClick="WebSocketTest1()"><br/>
<input type="button" value="two" onClick="WebSocketTest2()"><br/>
<body>
<div id="message"></div>
mesage2</br>
<div id="message2"></div>
</body>
</html>
on the server side I am listing the sessions, to communicate only with a specific session, code found here
and the server side (snippets)
var connections = {};
var connectionIDCounter = 0;
var connection = request.accept(null, request.origin);
// Store a reference to the connection using an incrementing ID
connection.id = connectionIDCounter ++;
connections[connection.id] = connection;
console.log((new Date()) + ' Connection accepted.');
connection.on('message', function(message) {
var ja=message;
if(ja[0]==1)
{ja[1]=7;}
else if(ja[0]==3)
{ja[1]=8;}
});
connection.on('close', function(reasonCode, description) {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
delete connections[connection.id];
});
});
// Send a message to a connection by its connectionID
function sendToConnectionId(connectionID, data) {
var connection = connections[connectionID];
if (connection && connection.connected) {
connection.send(ja[1]);
}
I wonder why you need 2 connections.
Open one connection and send the payload as JSON.
e.g.
var ws = new WebSocket("ws://localhost:1336");
ws.send(JSON.stringify({ command: "checkname", params: "xxxx"; });
ws.send(JSON.stringify({ command: "submit", params: { ... });
At the server side, you just have to parse the payload and determine which command is executed.
I am just wondering why you need websocket. It seems that you need to validate user presence in the application. If user is not present then you need to insert in the database else throw error.
you can go through jquery post and jquery form validation
http://api.jquery.com/jQuery.post/

How to uniquely identify a socket with Node.js

TLDR; How to identify sockets in event based programming model.
I am just starting up with node.js , in the past i have done most of my coding
part in C++ and PHP sockets() so node.js is something extremely new to me.
In c++ to identify a socket we could have done something like writing a main socket say server to listen for new connections and changes, and then handling those connections accordingly.
If you are looking for actual sockets and not socket.io, they do exist.
But as stated, Node.js and Javascript use an event-based programming model, so you create a (TCP) socket, listen on an IP:port (similar to bind), then accept connection events which pass a Javascript object representing the connection.
From this you can get the FD or another identifier, but this object is also a long-lived object that you can store an identifier on if you wish (this is what socket.io does).
var server = net.createServer();
server.on('connection', function(conn) {
conn.id = Math.floor(Math.random() * 1000);
conn.on('data', function(data) {
conn.write('ID: '+conn.id);
});
});
server.listen(3000);
Timothy's approach is good, the only thing to mention - Math.random() may cause id's duplication. So the chance it will generate the same random number is really tiny, but it could happen. So I'd recommend you to use dylang's module - shortid:
var shortid = require('shortid');
var server = net.createServer();
server.on('connection', function(conn) {
conn.id = shortid.generate();
conn.on('data', function(data) {
conn.write('ID: '+conn.id);
});
});
server.listen(3000);
So in that case you can be sure that no id duplications will occur.
in typescript:
import { v4 as uuidv4 } from 'uuid';
import net from 'net';
class Socket extends net.Socket {
id?: string;
}
const server = net.createServer();
server.on('connection', (conn) => {
conn.id = uuidv4();
conn.on('data', (data) => {
console.log(conn.id);
});
});
server.listen(3000);
you need to add id first;
In c++ to identify a socket we could have done something like writing
a main socket say server to listen for new connections and then
handling those connections accordingly.but so far i havent found
anything like that in node.js . (the berkeley socket model) Does it
even exist in node.js .. if not i am going back to my C++ :$
You should go back, because JavaScript is a prototype-based, object-oriented scripting language that is dynamic, weakly typed and has first-class functions. They are both completely different languages and you will have to have a different mindset to write clean JavaScript code.
https://github.com/LearnBoost/Socket.IO/wiki/Migrating-0.6-to-0.7
Session ID
If you made use of the sessionId property of socket in v0.6, this is now simply .id.
// v0.6.x
var sid = socket.sessionId;
// v0.7.x
var sid = socket.id;
if you found this question by looking for socket.io unique ids that you can use to differentiate between sockets on the client-side (just like i did), then here is a very simple answer:
var id = 0; //initial id value
io.sockets.on('connection', function(socket) {
var my_id = id; //my_id = value for this exact socket connection
id++; //increment global id for further connnections
socket.broadcast.emit("user_connected", "user with id " + my_id + "connected");
}
on every new connection the id is incremented on the serverside. this guarantees a unique id.
I use this method for finding out where a broadcast came from on the clientside and saving data from concurrent sockets.
for example:
server-side
var my_coords = {x : 2, y : -5};
socket.broadcast.emit("user_position", {id: my_id, coord: my_coords});
client-side
user = {};
socketio.on("user_position", function(data) {
if(typeof user[data.id] === "undefined")
user[data.id] = {};
user[data.id]["x"] = data.coord.x;
user[data.id]["y"] = data.coord.y;
});
How to identify a client based on its socket id. Useful for private messaging and other stuff.
Using socket.io v1.4.5
client side:
var socketclientid = "john"; //should be the unique login id
var iosocket = io.connect("http://localhost:5000", {query: "name=john"});
var socketmsg = JSON.stringify({
type: "private messaging",
to: "doe",
message: "whats up!"
});
iosocket.send(socketmsg);
server side:
io.on('connection', function(socket){
var sessionid = socket.id;
var name = socket.handshake.query['name'];
//store both data in json object and put in array or something
socket.on('message', function(msg){
var thesessionid = socket.id;
var name = ???? //do lookup in the user array using the sessionid
console.log("Message receive from: " + name);
var msgobject = JSON.parse(msg);
var msgtype = msgobject.type;
var msgto = msgobject.to;
var themessage = msgobject.message;
//do something with the msg
//john want to send private msg to doe
var doesocketid = ???? //use socket id lookup for msgto in the array
//doe must be online
//send to doe only
if (msgtype == "private messaging")
socket.to(doesocketid).emit('message', 'themessage');
});
mmmm, i don't really get what you're looking for but socket-programming with node.js (and socket.io) is really straight forward. take a look at some examples on the socket.io homepage:
// note, io.listen() will create a http server for you
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
io.sockets.emit('this', { will: 'be received by everyone connected'});
socket.on('private message', function (from, msg) {
console.log('I received a private message by ', from, ' saying ', msg);
});
socket.on('disconnect', function () {
sockets.emit('user disconnected');
});
});
on connecting to the server, every socket get an unique id with which you can identify it later on.
hope this helps!?
cheers

Geolocation feedback while accepting the request

the geolocation implementation is quite good and got few steps to observe but only on thing is missing, i guess.
Im not able to see if the user accepted the request or not ( before i get the position object ), i dunno if the user just ignores my request ( during my timeout ) or if the request just get lost ( and the failure callback doesnt get called for no reason ).
It would be useful to set a timestamp when the user accepts the request, i couldnt find anything which gives me that kind of response.
Based on my new understanding of what you are after, you want something like this.
(Tested: in Opera - works, Firefox 3.6 & Chrome 8 - not so much (I need more time to debug))
Scenario:
Page attempts to get location... but user ignores the prompt completely thus there is no (accept or deny) and since the request for the location is never sent, there is no timeout either!
Based on this you may want to add your own logic to handle this scenario. For the sake of this example, I'm going to prototype my own "wrapper" method. (for the picky - I'm not condoning using globals etc. I was just trying to get something to work)
navigator.geolocation.requestCurrentPosition = function(successCB, errorCB, timeoutCB, timeoutThreshold, options){
var successHandler = successCB;
var errorHandler = errorCB;
window.geolocationTimeoutHandler = function(){
timeoutCB();
}
if(typeof(geolocationRequestTimeoutHandler) != 'undefined'){
clearTimeout(window['geolocationRequestTimeoutHandler']);//clear any previous timers
}
var timeout = timeoutThreshold || 30000;//30 seconds
window['geolocationRequestTimeoutHandler'] = setTimeout('geolocationTimeoutHandler()', timeout);//set timeout handler
navigator.geolocation.getCurrentPosition(
function(position){
clearTimeout(window['geolocationRequestTimeoutHandler']);
successHandler(position);
},
function(error){
clearTimeout(window['geolocationRequestTimeoutHandler']);
errorHandler(error);
},
options
);
};
function timeoutCallback(){
alert('Hi there! we are trying to locate you but you have not answered the security question yet.\n\nPlease choose "Share My Location" to enable us to find you.');
}
function successCallback(position){
var msg = '';
msg += 'Success! you are at: ';
msg += '\nLatitude: ' + position.coords.latitude;
msg += '\nLongitude: ' + position.coords.longitude;
msg += '\nAltitude: ' + position.coords.altitude;
msg += '\nAccuracy: ' + position.coords.accuracy;
msg += '\nHeading: ' + position.coords.heading;
msg += '\nSpeed: ' + position.coords.speed;
alert(msg);
}
function errorCallback(error){
if(error.PERMISSION_DENIED){
alert("User denied access!");
} else if(error.POSITION_UNAVAILABLE){
alert("You must be hiding in Area 51!");
} else if(error.TIMEOUT){
alert("hmmm we timed out trying to find where you are hiding!");
}
}
navigator.geolocation.requestCurrentPosition(successCallback, errorCallback, timeoutCallback, 7000, {maximumAge:10000, timeout:0});
The concept is to set up a timer first (defaults to 30 seconds if not set). If the user doesn't do anything before the timer expires, a timeoutCallback is called.
Notes:
Some UI's (e.g. iPhone/iPad/iPod Safari) may make the Allow/Deny prompt modal - thus the user can't really continue until they pick something (I'd suggest to leave these users alone and let the default UI handle things
If the user Allows the request (late), the timeout may still fire before the response comes back - I don't think there is anything you can do about this
Code above is an example only... it needs cleaning up.
It is part of the Geolocation API:
// navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
navigator.geolocation.getCurrentPosition(
function(position){
//do something with position;
}, function(){
//handle condition where position is not available
//more specifically you can check the error code...
//error.code == 1
if(error.PERMISSION_DENIED){
alert("you denied me! ");
}
});
If you specify the errorCallback... then you can track if the user has declined to provide access.
Possible error codes include:
error.PERMISSION_DENIED (numeric value 1)
error.POSITION_UNAVAILABLE (numeric value 2)
error.TIMEOUT (numeric value 3)
Tested it successful in FF 3.5, Opera 10.6, Chrome8, IE6-8..
var succeed = function(obj) {
navigator.geolocation.received = true;
!navigator.geolocation.timedout?alert('GOT YAH'):alert('GOT YAH but user was to slow');
};
var failed = function(obj) {
navigator.geolocation.received = true;
!navigator.geolocation.timedout?alert('just failed'):alert('failed and user was to slow as well, tzz ._.');
};
var timedout = function() {
navigator.geolocation.timedout = true; // could be used for other callbacks to trace if its timed out or not
!navigator.geolocation.received?alert('Request timed out'):null;
}
// Extend geolocation object
if ( navigator.geolocation ) {
navigator.geolocation.retrievePermission = function retrievePermission(succeed,failed,options,timeout) {
this.received = false; // reference for timeout callback
this.timedout = false; // reference for other callbacks
this.getCurrentPosition.apply(this,arguments); // actual request
// Trigger timeout with its function; default timeout offset 5000ms
if ( timeout ) {
setTimeout(timeout.callback,timeout.offset || 5000);
}
}
// New location request with timeout callback
navigator.geolocation.retrievePermission(succeed,failed,{},{
offset: 10000, // miliseconds
callback: timedout
});
// Awesome thingy is not implemented
} else {
alert('geolocation is not supported');
}
With that workaround we know if the request timedout, even when the succeess / failure callback get called afterwards.