Check this snippet:
function connect() {
var request = window.indexedDB.open('test', 1);
request.onerror = function(event) {
console.log('error');
};
request.onupgradeneeded = function (event) {
console.log('upgrade needed');
};
request.onsuccess = function(event) {
console.log('success');
};
}
connect();
When I put breakpoints on callbacks assignment lines (4, 8, 12) and run it in chrome debugger, the code inside callbacks will never fire. Contrary, this code will work correctly:
function connect2() {
var IDB = {
open: function() {
var req = {};
setTimeout(() => {
req.onsuccess();
}, 0)
return req;
}
}
var request = IDB.open();
request.onsuccess = function(event) {
console.log('onsuccess2');
};
}
connect2();
Do I understand correctly, that the case with IndexedDB.open and debugger breaks js event loop? What can be the reason for this?
It's working for me! onsuccess and onupgradeneeded are called!
See fiddle:
function connect() {
var request = window.indexedDB.open('test', 1);
request.onerror = function(event) {
console.log('error');
};
request.onupgradeneeded = function (event) {
console.log('upgrade needed');
};
request.onsuccess = function(event) {
console.log('success');
};
}
connect();
If you want to use more modular:
var APP = APP || {};
APP.Database = (function(){
return {
request : null,
init : function()
{
this.connect();
this.request.onerror = this.logError;
this.request.onupgradeneeded = this.onUpgradedNeeded;
this.request.onsuccess = this.onSuccessCallback;
},
connect : function()
{
this.request = window.indexedDB.open('test', 1);
},
onSuccessCallback : function(evt)
{
console.log('Successfully conneted!');
},
logError : function(evt)
{
console.log('error');
},
onUpgradedNeeded : function(evt)
{
console.log('upgrade needed');
}
};
})();
APP.Database.init();
Related
In my application, I'm trying to use sendBeacon to send data to my remote server. One of the data that I need is how many clicks its been on the page and I'm doing it as follows:
var clickNumber = 0;
document.addEventListener("mouseup", function () {clickNumber++;});
var SendToRemote = window.SendToRemote || [];
SendToRemote.init({
clicks: clickNumber
});
My sendBeacon
navigator.sendBeacon = (url, data) =>
window.fetch(url, { method: 'POST', body: {data: data}, credentials: 'include' });
My only issue now is that the clickNumber is always 0 (which is the default value) and even that mouseup does increment clickNumber, but when sending it sends 0.
How am I able to update the clickNumber so when sendBeacon is triggered, it gets the incremented/updated clickNumber instead of 0.
This is my SendToRemote.init which works fine: (PS: I have removed parts of the codes as it would be over 1000 lines, but kept whats needed):
if (!SendToRemote) {
var SendToRemote = (function(){
var defaults = {
endpoints: {
unload: "https://remote.com"
},
processData: function(results){},
},
results = {
click: 0,
// more stuff here
},
support = !!document.querySelector && !!document.addEventListener,
settings;
var actions = {
sendData: function () {
results.hmn = parseInt(actions.hmnDetection(
results.times.tt, results.times.tp, results.click, results.mouse, results.touch, results.scroll, results.tab
));
let url = settings.endpoints.unload,
data = JSON.stringify(results);
navigator.sendBeacon(url, data);
},
// more functions here
}
function init(options) {
document.addEventListener('DOMContentLoaded', (event) => {
// More stuff here
// Event Listener to porcess
if(modifiable.processOnAction){
let node = document.querySelector(modifiable.selector);
if(!!!node) throw new Error('Selector was not found.');
actions._e(node, modifiable.event, `init-${modifiable.selector}-processOnAction`, function() {
let nodeInput = document.getElementsByName(modifiable.element)[0];
if(!!!nodeInput) throw new Error('nodeInput was not found.');
nodeInput.value = JSON.stringify(results);
hasProcessed = true;
})
}
addEventListener('unload', (event) => {
if (!navigator.sendBeacon) {
navigator.sendBeacon = (url, data) =>
window.fetch(url, { method: 'POST', body: {data: data}, credentials: 'include' });
}
if (!hasProcessed) {
actions.sendData();
hasProcessed = true;
}
return;
});
});
}
function processResults(){
if(settings.hasOwnProperty('processData')){
if (!modifiable.processOnAction){
return settings.processData.call(undefined, results);
}
return results;
}
return false;
}
// Module pattern, only expose necessary methods
return {
init: init,
processResults: processResults,
};
})();
}
Thanks in advance!
I have this script that I use to import some data from an API, and into my database. Since this process is very time consuming, it often times out because on some of the items processed there is a lot of data to process..
I came with this solution a while ago, using promises, to first do the request to the API, then after it finishes I would prepare the data and put it into a temporary csv file, then I would fire another request to split that file into multiple smaller files, then... you get the idea... it was working, but I need to add to it some extra requests, I just can't make it work... I probably just need to simplify my logic.
Anyone can help me improve this code to make it easier to add those extra requests and keep it sending one request after the other?
This is the (over simplified) script in question:
window.importTrialsScripts = {};
window.addEventListener('DOMContentLoaded', function() {
importTrialsScripts.app.initialize();
});
(function(importTrialsScripts, document, $) {
importTrialsScripts = importTrialsScripts || {};
const app = {
ajaxurl: 'myajaxurl',
initialize: function() {
this.submitHandler();
},
submitHandler: function() {
const self = this;
document.querySelector('#start-import').addEventListener('click', function() {
self.pullTrialsFromApi();
});
},
pullTrialsFromApi: function() {
let data = new FormData();
data.append('action', 'pull_trials_from_api');
[123, 456, 789].forEach(function(str) {
data.append('ids[]', str);
});
this.startPullingTrials(data);
},
startPullingTrials: function(data) {
const self = this;
let promise = new Promise(function(resolve, reject) {
self.sendAjaxRequest(data, function() {
if (this.status === 200) {
const response = JSON.parse(this.response);
if (! response.success) {
alert('The API could not be reached. Please try again.');
console.error('Error!!', response);
return;
}
resolve(response.data);
}
else {
console.error('there was an error in the request', this);
reject(this);
}
});
});
promise.then(function(chunks) {
const processingChunks = Object.values(chunks).map(function(chunk) {
return self.processChunk(chunk);
});
Promise.all(processingChunks).then(function (processedTrials) {
console.log('finished', processedTrials);
});
}, function(err) {
console.error('promise rejected', err);
});
},
processChunk: function(chunkTrials) {
const self = this;
let data = new FormData();
data.append('action', 'process_trials_chunk');
Object.values(chunkTrials).forEach(function(chunk) {
data.append('chunk[]', JSON.stringify(chunk));
});
return new Promise(function(resolve, reject) {
self.sendAjaxRequest(data, function() {
if (this.status === 200) {
const response = JSON.parse(this.response);
if (! response.success) {
console.error('Error!!', response.data);
return;
}
resolve(response.data);
}
else {
console.log('there was an error in the request', this);
reject(this);
}
});
});
},
splitToMultipleFiles: function() {
const self = this;
const data = new FormData();
data.append('action', 'split_location_files');
return new Promise(function(resolve, reject) {
self.sendAjaxRequest(data, function() {
if (this.status === 200) {
const response = JSON.parse(this.response);
if ( ! response.success ) {
console.error('Error!!', response.data);
return;
}
resolve(response.data.files);
}
else {
console.log('there was an error in the request', this);
reject(this);
}
});
});
},
processLocation: function(file) {
const self = this;
let data = new FormData();
data.append('action', 'process_location_data');
data.append('file', file);
return new Promise(function(resolve, reject) {
self.sendAjaxRequest(data, function() {
if ( this.status === 200 ) {
const response = JSON.parse(this.response);
if (! response.success) {
console.error('Error!!', response.data);
return;
}
resolve(response.data);
}
else {
console.log('there was an error in the request', this);
reject(this);
}
});
});
},
sendAjaxRequest: function(data, callback) {
const self = this;
let xhr = new XMLHttpRequest();
xhr.open('POST', ajaxurl);
xhr.onload = callback;
xhr.addEventListener('timeout', function(e) {
console.error('the request has timed out', e);
});
xhr.addEventListener('error', function(e) {
console.error('the request returned an error', e);
});
xhr.addEventListener('abort', function(e) {
console.error('the request was aborted', e);
});
xhr.send(data);
},
};
$.extend(importTrialsScripts, {
app: app
});
}).apply(this, [window.importTrialsScripts, document, jQuery]);
I am trying to stub several ajax calls, but I want to have both beforeSend and success executed, is this possible?
I want something like this:
var stub = sinon.stub(jQuery, "ajax");
stub.onCall(0).yieldsTo("beforeSend").yieldsTo("success", {some: 'data'});
stub.onCall(1).yieldsTo("beforeSend").yieldsTo("success", {other: 'stuff'});
But this skips the 'beforeSend' method.
I know it would be easier to allow ajax to do it's stuff and use sinon's fakeServer, but I can't as I'm testing in Node with a fake browser and it just doesn't work
You could use yieldTo after the call:
var stub = sinon.stub();
stub({
foo: function() {
console.log('foo');
},
bar: function() {
console.log('bar');
}
});
stub.yieldTo('foo');
stub.yieldTo('bar');
I was able to work around this by adding some additional code:
var responses = {};
var executionComplete;
beforeEach(function () {
executionComplete = $.Deferred();
sinon.stub($, "ajax", function (options) {
if (options.beforeSend) {
options.beforeSend();
}
completeAjaxCall(options);
});
});
afterEach(function () {
$.ajax.restore();
});
var completeAjaxCall = function (options) {
var response = findResponse(options.url, options.type);
setTimeout(function () {
if (response.code < 400) {
if (options.dataFilter && response.data) {
response.data = options.dataFilter(JSON.stringify(response.data));
}
if (options.success) {
options.success(response.data);
}
} else {
if (options.error) {
options.error(response.data);
}
}
if (options.complete) {
options.complete();
}
if (response.completeExecution) {
executionComplete.resolve();
}
}, response.serverResponseTime);
};
var findResponse = function (url, type) {
var response = responses[url];
expect(response, url + ' should have a response').to.exist;
expect(response.type).to.equal(type);
delete responses[url];
if (Object.keys(responses).length === 0) {
response.completeExecution = true;
}
return response;
};
var givenResponse = function (response) {
responses[response.url] = response;
};
Then in my test I can use it like this:
it('should do some stuff', function (done) {
//given
givenResponse({serverResponseTime: 4, code: 200, url: '/saveStuff', type: 'POST'});
givenResponse({serverResponseTime: 1, code: 200, url: '/getStuff', type: 'GET'});
//when
$('button').click();
//then
executionComplete.then(function () {
expect(something).to.be.true;
done();
});
});
Update
Now the method socket.disconnect(close) has been included in angular-socket-io. It has a Boolean parameter 'close', if true, closes also the underlying connection.
I am using btford/angular-socket-io
What is the correct approach to disconnect the client?
I am trying to implement the following scenario
user login --> connect to socket
user logout --> disconnect from socket
repeat (1) (2)
I succeeded to implement the connect (1) but I am having trouble with the disconnect (2)
This is what I tried: in my Authentication service I have the following
factory('AuthenticationService', function(socketFactory) {
var mySocket;
var service = {
//...
login: function(credentials) {
var login = $http.post('/login', credentials);
return login.then(function(response) {
service.currentUser = response.data.user;
if ( service.isAuthenticated() ) {
// **connect to socket on login**
mySocket = socketFactory({ioSocket: io.connect('http://localhost')});
}
return service.isAuthenticated();
});
},
logout: function(redirectTo) {
var logout = $http.get('/logout');
logout.success(function() {
service.currentUser = null;
mySocket.disconnect(); // **disconnect on logout (not working)**
redirect(redirectTo);
});
return logout;
},
//...
};
return service;
})
mySocket.disconnect();
gives the following error
TypeError: Object # has no method 'disconnect'
mySocket.disconnect() works if instead of
mySocket = socketFactory({ioSocket: io.connect('http://localhost')});
I use
mySocket = io.connect('http://localhost');
your code looks correct. I think the problem is variable hoisting, mySocket is hoisting.
read here
My understanding is that btford/angular-socket-io wraps the socket instance in the socketFactory
but does not expose a disconnet() method
therefore it cannot be used to disconnect the socket from the client side.
The solution is very simple in fact :
Go edit the "socket.js" file from the Btford angular-socket module and you'll see :
var wrappedSocket = {
on: addListener,
addListener: addListener,
emit: function (eventName, data, callback) {
return socket.emit(eventName, data, asyncAngularify(socket, callback));
},
removeListener: function () {
return socket.removeListener.apply(socket, arguments);
},
// when socket.on('someEvent', fn (data) { ... }),
// call scope.$broadcast('someEvent', data)
forward: function (events, scope) {
if (events instanceof Array === false) {
events = [events];
}
if (!scope) {
scope = defaultScope;
}
events.forEach(function (eventName) {
var prefixedEvent = prefix + eventName;
var forwardBroadcast = asyncAngularify(socket, function (data) {
scope.$broadcast(prefixedEvent, data);
});
scope.$on('$destroy', function () {
socket.removeListener(eventName, forwardBroadcast);
});
socket.on(eventName, forwardBroadcast);
});
}
};
And then you just add this next to the others functions :
disconnect: function(){
return socket.disconnect();
},
And voilà, there you go :)
You should have something like that :
var wrappedSocket = {
on: addListener,
addListener: addListener,
emit: function (eventName, data, callback) {
return socket.emit(eventName, data, asyncAngularify(socket, callback));
},
disconnect: function(){
return socket.disconnect();
},
removeListener: function () {
return socket.removeListener.apply(socket, arguments);
},
// when socket.on('someEvent', fn (data) { ... }),
// call scope.$broadcast('someEvent', data)
forward: function (events, scope) {
if (events instanceof Array === false) {
events = [events];
}
if (!scope) {
scope = defaultScope;
}
events.forEach(function (eventName) {
var prefixedEvent = prefix + eventName;
var forwardBroadcast = asyncAngularify(socket, function (data) {
scope.$broadcast(prefixedEvent, data);
});
scope.$on('$destroy', function () {
socket.removeListener(eventName, forwardBroadcast);
});
socket.on(eventName, forwardBroadcast);
});
}
};
Just call the RsocketClient.close() method .
If a message comes in for server01, both server01 and server02's message events will be triggered. I thought the line
Socket.prototype = new events.EventEmitter;
would result in completly seperate event instances
Thanks for any help!
var events = require('events');
var uuid = require('uuid');
// Server class
function Socket (host) {
var self = this;
self.options = {
"serverHost": host,
"serverName": "server",
"clientName": uuid.v4()
};
self.socket = new require('zmq').socket('router');
self.socket.identity = self.options.clientName;
self.socket.connect('tcp://' + self.options.serverHost);
self.socket.on('message', function (sender, data) {
console.log('Sender: %s', self.options.clientName);
console.log('Data: %s', data.toString());
self.emit('message', sender, data);
});
setInterval(function () {
self.socket.send([self.options.serverName, uuid.v4()]);
}, 5000);
self.send = function (obj, callback) {
var status = true;
if(obj !== 'object') {
status = false;
} else {
self.socket.send([self.options.serverName, obj]);
}
if(callback === 'function') {
callback(status);
} else {
return status;
};
};
};
Socket.prototype = new events.EventEmitter;
// Userland
var server01 = new Socket('127.0.0.1:3000');
server01.on('message', function (sender, data) {
console.log('Server01: %s', data.toString());
});
var server02 = new Socket('127.0.0.1:3000');
server02.on('message', function (sender, data) {
console.log('Server02: %s', data.toString());
});
Here is an example of the output from this script
Sender: 14d36a66-a4e7-484a-9ce0-3f0d368a6986
Data: 03e6bb47-6af0-4700-9b95-7bbc310477f6
Server01: 03e6bb47-6af0-4700-9b95-7bbc310477f6
Server02: 03e6bb47-6af0-4700-9b95-7bbc310477f6
Sender: 59ec292e-abd2-4c9f-ac3e-2bf92c656fde
Data: d66cd320-c3f2-4842-b66b-1d89f656d32f
Server01: d66cd320-c3f2-4842-b66b-1d89f656d32f
Server02: d66cd320-c3f2-4842-b66b-1d89f656d32f
The problem is the way you manage inheritance. Correct JavaScript code for inheritance is:
Socket.prototype = Object.create(EventEmitter.prototype);