Geekly articles weekly

JavaScript Offline Broker

En mi proyecto, necesitaba una funcionalidad que me permitiera no perder los datos ingresados ​​en caso de una falla en la conexión a Internet y se me ocurrió un "Broker" muy simple que me permitiría no perder datos cuando se perdiera la conexión, sino enviarlos cuando la conexión se restablezca nuevamente. Quizás "Broker" no sea un buen nombre para él, pero no juzgues estrictamente. Quiero compartir, tal vez alguien sea útil.

Sobre el proyecto


Mi proyecto está diseñado para contabilizar los gastos e ingresos o como una versión simple de la contabilidad del hogar. Fue creado como una aplicación web progresiva, por lo que es conveniente usarlo en dispositivos móviles, así como para abrir las capacidades de notificaciones Push, acceso a la cámara para leer códigos de barras y similares. Hay una aplicación móvil similar llamada ZenMoney, pero quería algo propio y a mi manera.

El surgimiento de ideas


Trato de mantener un registro claro de gastos e ingresos, pero como a menudo se me olvida agregar las posiciones necesarias, especialmente con respecto al efectivo, tengo que hacer esto casi de inmediato cuando ocurrió la "transacción". A veces ingresé datos en el transporte público, como el metro, donde a menudo se producen pérdidas de conexión, incluso a pesar de la red Wi-Fi generalizada. Fue una pena que todo se congele y no pase nada, y luego los datos simplemente se perdieron.

La idea surgió del uso de un intermediario de colas como RabbitMQ. Por supuesto, tengo una solución más simple y no tan funcional, pero hay algo similar a sus principios. Pensé que puede guardar todo, por ejemplo, en Cache o LocalStorage como un objeto con una cola de solicitudes "insatisfechas", y cuando aparece una conexión, puede ejecutarlas de manera segura. Por supuesto, no se ejecutan en orden de prioridad, lo que, gracias al procesamiento asíncrono de solicitudes en el lenguaje JS, es aún mejor, dado que solo tiene un "suscriptor". Me encontré con algunas dificultades, tal vez incluso implementar todo esto parezca un poco torcido, pero esta es una solución que funciona. Por supuesto, se puede mejorar, pero por ahora describiré la opción "en bruto" pero funcional existente.

Empezando


¡Lo primero que pensé fue dónde almacenar los datos en ausencia de una conexión? El woker de servicio que me impuso PWA funciona bien con el caché, pero ¿es aconsejable usar el caché? Una pregunta difícil, no voy a entrar en eso. En general, decidí que LocalStorage es mejor para mí. Como LocalStorage almacena valores de tipo clave: valor, el objeto tuvo que agregarse como una cadena Json. En mi proyecto para desarrollo externo, agregué un directorio llamado QueueBroker a la carpeta de la clase

Estructura de archivo
/**----**/
├── app.js
├── bootstrap.js
├── classes
│ └── QueueBroker
│ ├── index.js
│ └── Library
│ ├── Broker.js
│ └── Storage.js
├── components
/**----**/


Mi proyecto se realiza en la pila Laravel + VueJs, por lo que se requiere una cierta dependencia de la estructura del archivo. No sé cómo en tales casos es correcto llamar a sus propios directorios para clases, así que lo hice.

El archivo de índice se creó para simplemente conectar módulos de la Biblioteca anidada. Puede que no sea una solución muy elegante, pero quería hacerlo de modo que si de repente cambio de opinión acerca del uso de LocalStorage, escribiré otra clase para Almacenamiento con los mismos métodos, la pasaré al constructor del agente y usaré el otro almacenamiento sin cambiar nada.

index.js
 const Broker = require('./Library/Broker'); const Storage = require('./Library/Storage'); module.exports.Broker = Broker; module.exports.Storage = Storage;


Este método le permite conectar solo aquellas bibliotecas que necesito en mis scripts, por ejemplo, si necesito ambas:

 import {Storage, Broker} from '../../classes/QueueBroker/index';

Para facilitarme el cambio de la clase de almacenamiento, hice un tipo de constructor para la clase Broker, en el que el objeto Storage podría pasarse como argumento, lo principal es que tiene las funciones necesarias. Sé que en ES6 podría escribir clase y constructor, pero decidí hacerlo a la antigua usanza: prototipo. Escribiré comentarios directamente por código:

Broker.js
 const axios = require('axios'); //  axios /*     .    ,            front-end  */ function Broker(storage, prefix='storageKey') { this.storage = storage; this.prefix = prefix; /*     ,      .   storage   add     json */ if(this.storage.get('broker') === null) { this.broker = {}; this.storage.add('broker', this.broker) } else { //  , Storage    Json            this.broker = this.storage.getObject('broker'); } }; // ,           Broker.prototype.queueCount = function () { return Object.keys(this.broker).length; }; //  ""    Storage,    Broker.prototype.saveToStorage = function (method, url, data) { let key = this.prefix + '_' + (Object.keys(this.broker).length + 1); this.broker[key] = {method, url, data}; //            broker,        this.storage.add('broker', this.broker); }; // ,    ,    Broker.prototype.run = function () { for (let key in this.broker) { this.sendToServer(this.broker[key], key) } } /*    .        ,     method, url  data,        ,    ,    */ Broker.prototype.sendToServer = function (object, brokerKey) { axios({ method: object.method, url: object.url, data: object.data, }) .then(response => { if(response.data.status == 200) { //   ,    delete this.broker[brokerKey]; //  this.storage.add('broker', this.broker); } else { //   ;-) console.log(response.data) } }) .catch(error => { /*           ,       */ }); }; //   export module.exports = Broker;


A continuación, necesita el objeto de almacenamiento en sí, que guardará y recuperará con éxito todo del almacenamiento

Storage.js
 //  debug-   function Storage(debug) { if(debug === true) { this.debugMode = true; } this.storage = window.localStorage; }; // ,     Json      Storage.prototype.addObjectToStorage = function (key, object) { this.storage.setItem(key, JSON.stringify(object)); }; //    (,   ) Storage.prototype.addStringToStorage = function (key, value) { this.storage.setItem(key, value); }; //    Storage.prototype.get = function (key) { return this.storage.getItem(key); }; //    Json ,       Storage.prototype.getObject = function (key) { try { return JSON.parse(this.storage.getItem(key)); } catch (e) { this._debug(e); this._debug(key + ' = ' + this.storage.getItem(key)); return false; } }; /* ,     ,  ,        ,   Json      */ Storage.prototype.add = function (key, value) { try { if(typeof value === 'object') { this.addObjectToStorage(key, value); } else if (typeof value === 'string' || typeof value === 'number') { this.addStringToStorage(key, value); } else { //    this._debug('2 parameter does not belong to a known type') } return this.storage; } catch (e) { //    ,    ,    if (e === QUOTA_EXCEEDED_ERR) { this._debug('LocalStorage is exceeded the free space limit') } else { this._debug(e) } } }; //  Storage.prototype.clear = function () { try { this.storage.clear(); return true; } catch (e) { this._debug(e) return false; } }; //    Storage.prototype.delete = function(key) { try { this.storage.removeItem(key); return true; } catch (e) { this._debug(e) return false; } }; // ,      Storage.prototype._debug = function(error) { if(this.debugMode) { console.error(error); } return null; }; //   module.exports = Storage;


Cuando todo lo anterior esté listo, esto se puede usar a su discreción, lo uso así:

Usar en Guardar
 //   Vue (methods) /*----*/ //      Storage   sendBroker(method, url, data) { let storage = new Storage(true); let broker = new Broker(storage, 'fundsControl'); broker.saveToStorage(method, url, data); }, //     fundsSave() { let url = '/pa/funds'; let method = ''; if(this.fundsFormType === 'create') { method = 'post'; } else if(this.fundsFormType === 'update') { method = 'put'; } else if(this.fundsFormType === 'delete') { method = 'delete'; } this.$store.commit('setPreloader', true); axios({ method: method, url: url, data: this.fundsFormData, }) .then(response=> { if(response.data.status == 200) { this.fundsFormShow = false; this.getFunds(); this.$store.commit('setPreloader', false); } else { this.$store.commit('AlertError', '    '); } }) //        .catch(error => { this.$store.commit('setAlert', { type: 'warning', status: true, message: '   . ,        ,   ' } ); this.fundsFormShow = false; this.$store.commit('setPreloader', false); //   ""  this.sendBroker(method, url, this.fundsFormData); console.error(error); }); },


Usar al reconectar
 //   Vue /*--*/ methods: { /*----*/ /*   ,    ,   ,      ,      */ brokerSendRun() { let storage = new Storage(true); let broker = new Broker(storage, 'fundsControl'); //,   -   if(broker.queueCount() > 0) { // ,    broker.run(); //   ,   this.$store.commit('setAlert', {type: 'info', status: true, message: '      -  , ,      '}); } } } /*---*/ /*     , ,   ,          ,     ,        */ mounted() { this.brokerSendRun(); } /*---*/


PS


Me resulta difícil hablar sobre el código, así que intenté proporcionar el código en los ejemplos lo más detallado posible con comentarios detallados. Si tiene ideas para mejorar esta solución o mejorar este artículo, me complacerá verlas en los comentarios. Tomé ejemplos de mi propio proyecto en Vue, explico esto para dejar en claro por qué mis métodos se llaman así y por qué accedo a ellos a través de esto . No lo hago en este artículo específicamente en Vue, así que no proporciono otro código de componente, lo dejo para que lo comprenda.

Source: https://habr.com/ru/post/es428980/

More articles:


All Articles