Parse LiveQuery Subscription always receive the old version - parse-platform

Question

I have a collection of beacons that I want to show on a map. I want their positions to be synchronized between all instances of the application.
That is, when I move a beacons to another position I want this change to be reflected in the other instances of the application.
This using the Parse javascript SDK in its version 1.11.0.
I have defined the following Parse model, which represents each object in the collection saved on the server:
var Baliza = Parse.Object.extend("Balizas");
Baliza.prototype.show = function(){
var self = this;
var start= '<div class="row" style="width: 350px;">\n' +
' <div class="control-group" id="fields">\n' +
' <label class="control-label" style="text-align: center;" for="field1">Introducir Mac Asociadas a Ese Punto</label>\n' +
' <div class="controls">\n' +
' <form id="form" role="form" autocomplete="off">';
var tmp = '';
tmp = tmp + '<div class="entry input-group col-xs-12">\n' +
' <input class="form-control" name="fields[]" type="text" value="'+self.get("mac")[0]+'">\n' +
' <span class="input-group-btn">\n' +
' <button baliza-id='+self.id+' class="btn btn-success btn-add" type="button">\n' +
' <span class="glyphicon glyphicon-plus"></span>\n' +
' </button>\n' +
' </span>\n' +
' </div>';
if (self.get("mac").length>1){
for (var i=1; i<self.get("mac").length; i++) {
tmp = tmp + '<div class="entry input-group col-xs-12">\n' +
' <input class="form-control" name="fields[]" type="text" value="'+self.get("mac")[i]+'">\n' +
' <span class="input-group-btn">\n' +
' <button baliza-id='+self.id+' class="btn btn-remove col-xs-12" type="button">\n' +
' <span class="glyphicon glyphicon-minus"></span>\n' +
' </button>\n' +
' </span>\n' +
' </div>';
}
}
var end = '</form>\n' +
' <br>\n' +
' <button type="button" baliza-id='+self.id+' class="btn btn-block btn-info btn-sm ">Salvar</button>\n' +
' <button type="button" baliza-id='+self.id+' class="btn btn-block btn-danger btn-sm ">Eliminar</button>\n' +
' </div>\n' +
' </div>\n' +
'</div>';
//console.log('impirmiendo marker');
//console.log(this.marker);
console.log("Localización -> ", self.get("localizacion"));
if(self.marker != null) {
self.marker.setLatLng(new L.LatLng(self.get("localizacion").latitude, self.get("localizacion").longitude),{draggable:'true'});
} else {
self.marker = new L.marker([ self.get("localizacion").latitude, self.get("localizacion").longitude], {
icon: L.AwesomeMarkers.icon({icon: 'certificate', prefix: 'glyphicon', markerColor: 'blue'}),
draggable: 'true'
}).bindPopup("", {maxWidth: 560});
self.marker.on('dragend', function(event){
var position = event.target.getLatLng();
console.log("Notify new Location -> ", position.lat, position.lng);
//Enviamos El Dato a Parse
this.set("localizacion", new Parse.GeoPoint(position.lat, position.lng));
this.save(null, {
success: function (balizaSaved) {
console.log("Baliza Guardad con éxito: ", balizaSaved);
},
error: function (baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}.bind(this));
map.addLayer(self.marker);
}
self.marker.getPopup().setContent(start+tmp+end);
};
The code responsible for notifying the change of position in the map is the following:
self.marker.on('dragend', function(event){
var position = event.target.getLatLng();
console.log("Notify new Location -> ", position.lat, position.lng);
//Enviamos El Dato a Parse
this.set("localizacion", new Parse.GeoPoint(position.lat, position.lng));
this.save(null, {
success: function (balizaSaved) {
console.log("Baliza Guardad con éxito: ", balizaSaved);
},
error: function (baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}.bind(this));
The subscription was created as follows,
var query = new Parse.Query(Baliza);
var subscription = query.subscribe();
var mapaBalizasParse = new Map();
// After specifying the Monster subclass...
//Parse.Object.registerSubclass('Balizas',Baliza);
subscription.on('create', function (balizaCreated) {
console.log("New baliza created -> ", balizaCreated.toJSON());
var baliza = new Baliza(balizaCreated.toJSON());
baliza.show();
mapaBalizasParse.set(baliza.id, baliza);
});
subscription.on('update', function (balizaSaved) {
console.log('BALIZA ACTUALIZADA -> ', balizaSaved.toJSON());
var baliza = mapaBalizasParse.get(balizaSaved.id);
baliza.set("mac", balizaSaved.get("mac"));
baliza.set("localizacion", balizaSaved.get("localizacion"));
baliza.show();
});
subscription.on('delete', function (baliza) {
//console.log(mapaBalizasParse.get(baliza.id));
map.removeLayer(mapaBalizasParse.get(baliza.id).marker);
mapaBalizasParse.delete(baliza.id);
});
subscription.on('leave', function (balizaLeave) {
console.log('Leave called -> ', balizaLeave.id, balizaLeave.get("localizacion"));
});
subscription.on('enter', function (balizaCalled) {
console.log('Enter called -> ', balizaCalled.id, balizaCalled.get("localizacion"));
});
Each time I click on a position on the map I create a Beacons as follows:
function onMapClick(e) {
var baliza = new Baliza();
baliza.set("localizacion",new Parse.GeoPoint(e.latlng.lat, e.latlng.lng));
baliza.set("mac",["11:22:33:44:55:10"]);
baliza.set("editando",true);
baliza.save(null, {
success: function(baliza) {
//Añadimos La Baliza Al Mapa Interno
//mapaBalizasParse.set(baliza.id,baliza);
//baliza.show();
},
error: function(baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}
The list of currently registered "beacons" is shown as follows:
query.find({
success: function(results) {
console.log("Total Balizas -> " + results.length);
for (var i = 0; i < results.length; i++) {
var currentBaliza = results[i];
console.log("Baliza " + i + " -> ", currentBaliza);
currentBaliza.show();
mapaBalizasParse.set(currentBaliza.id, currentBaliza);
}
},
error: function(error) {
console.log("Error: " + error.code + " " + error.message);
}
});
The problem is if for example I move the beacon from position ( latitude: 40.961229844235234, longitude: -5.669621229171753 ) to another point in the map (latitude: 40.9604196476232, longitude: -5.6707102060318)
The other instances of the application receive in the update event the old version of the object, its location field has not changed ( latitude: 40.961229844235234, longitude: -5.669621229171753 )
Someone can tell me what I'm doing wrong in the code.
Thanks in advance.

Answer 1

I have been doing some test with minimal configuration and this is that I saw:
In the callback for loading all beacons in the map set you use this code:
var beacon = new Baliza({id: baliza.id, localizacion:
baliza.get("localizacion") , mac: baliza.get("mac"), editando:
baliza.get("editando")});
but when you add a new beacon created in the callback of 'create' event, you use this one:
var beacon = new Baliza();
beacon.id = baliza.id;
beacon.localizacion = baliza.get("localizacion");
beacon.mac = baliza.get("mac");
beacon.editando = baliza.get("editando");
In my tests, if you use the first code the beacons updates normally, but if you use the second one, a old version of the beacon is logged in javascript console.
It seems that something special happens in the empty constructor that you are not including in the overloaded constructor.
I hope that it helps you. :)
Here my complete code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple test parse JS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<input type="text" id="txtIndex" class="textbox" value="1">
<button type="button" class="btn-add">Add beacon</button>
<button type="button" class="btn-modify">Modify beacon</button>
<button type="button" class="btn-remove">Remove beacon</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://unpkg.com/parse#1.11.0/dist/parse.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Own JS-->
<script src="./js/demo_parse.js"></script>
</body>
</html>
JS
var mapBeacons = new Map();
var query;
var subscription;
var Baliza;
function loadAllBeacons(){
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
//Vamos Creando Los Objetos Que Recibimos
var beacon = new Baliza();
beacon.id = results[i].id;
beacon.localizacion = results[i].get("localizacion");
beacon.mac = results[i].get("mac");
mapBeacons.set(beacon.id,beacon);
}
},
error: function(error) {
console.log("Error: " + error.code + " " + error.message);
}
});
}
function modifyBeacon(){
var key = $("#txtIndex").val();
var baliza = mapBeacons.get(key);
var my_chance = new Chance();
var randomLocation = new Parse.GeoPoint(my_chance.latitude(), my_chance.longitude())
baliza.set("localizacion",randomLocation);
baliza.save(null, {
success: function(baliza) {
// Execute any logic that should take place after the object is saved.
mapBeacons.set(baliza.id,baliza);
},
error: function(baliza, error) {
// Execute any logic that should take place if the save fails.
// error is a Parse.Error with an error code and message.
alert('Failed to remove new object, with error code: ' + error.message);
}
});
}
function removeBeacon(){
var key = $("#txtIndex").val();
var baliza = mapBeacons.get(key);
baliza.destroy({
success: function(myObject) {
// The object was deleted from the Parse Cloud.
//map.removeLayer(baliza.marker);
//mapaBalizasParse.delete($(this).attr('id'));
console.log("Beacon removed sucessfully");
console.log(myObject);
},
error: function(myObject, error) {
// The delete failed.
// error is a Parse.Error with an error code and message.
}
});
}
function addNewBeacon(){
var baliza = new Baliza();
var my_chance = new Chance();
var randomLocation = new Parse.GeoPoint(my_chance.latitude(), my_chance.longitude())
baliza.set("localizacion",randomLocation);
baliza.set("mac",["11:22:33:44:55:10"]);
baliza.set("editando",true);
baliza.save(null, {
success: function(baliza) {
console.log("OnSave Beacon saved sucessfully");
console.log(baliza);
},
error: function(baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}
$(function() {
console.log( "ready!" );
//Init parse
Parse.initialize("6xuPkPgqEfCdzXwaxAfUuKbTAglJL5ALa1mmY8de");
Parse.serverURL = 'http://encelocalizacion.com:1337/parse';
//Objeto Ppara interacturar con el Objeto Baliza de Parser
Baliza = Parse.Object.extend("Balizas", {
/**
* Instance properties go in an initialize method
*/
id: '',
localizacion: '',
mac:'',
marker:'',
popup:'',
initialize: function (attr, options) {
}
});
query = new Parse.Query(Baliza);
subscription = query.subscribe();
// Subscription for create
subscription.on('create', function (baliza) {
// TODO CHANGE THIS
var beacon = new Baliza({id: baliza.id, localizacion: baliza.get("localizacion") , mac: baliza.get("mac"), editando: baliza.get("editando")});
/*
var beacon = new Baliza();
beacon.id = baliza.id;
beacon.localizacion = baliza.get("localizacion");
beacon.mac = baliza.get("mac");
beacon.editando = baliza.get("editando");
*/
mapBeacons.set(beacon.id,beacon);
console.log("New beacon added to BBDD")
console.log(mapBeacons)
});
// Subscription for update
subscription.on('update', function (kk) {
console.log('Updated beacon:' + kk.get("localizacion").latitude + " " + kk.get("localizacion").longitude + " " + kk.get("mac")+ " " + kk.get("id"));
});
// Subscription for delete
subscription.on('delete', function (kk) {
mapBeacons.delete(kk.id);
console.log('Deleted beacon:' + kk.get("localizacion").latitude + " " + kk.get("localizacion").longitude + " " + kk.get("mac"));
console.log(mapBeacons)
});
loadAllBeacons();
$(document).on('click', '.btn-add', function(e) {
addNewBeacon();
}).on('click', '.btn-remove', function(e) {
removeBeacon();
return false;
}).on('click', '.btn-modify', function(e) {
modifyBeacon();
});
});