💂🏼 ✌🏿 🌍 Broker JavaScript Offline 🎖️ ♍️ ⛷️

Dalam proyek saya, saya membutuhkan fungsionalitas yang memungkinkan saya untuk tidak kehilangan data yang dimasukkan jika terjadi gangguan koneksi Internet dan saya menghasilkan "Pialang" yang sangat sederhana yang memungkinkan saya untuk tidak kehilangan data saat koneksi terputus, tetapi mengirimkannya saat koneksi dipulihkan kembali. Mungkin "Pialang" bukan nama yang baik baginya, tetapi jangan menilai dengan ketat. Saya ingin berbagi, mungkin seseorang akan berguna.

Tentang proyek

Proyek saya dirancang untuk memperhitungkan pengeluaran dan pendapatan atau sebagai versi sederhana dari akuntansi rumah. Itu dibuat sebagai aplikasi web progresif, sehingga nyaman untuk menggunakannya pada perangkat seluler, serta untuk membuka kemampuan pemberitahuan Push, akses ke kamera untuk membaca barcode, dan sejenisnya. Ada aplikasi seluler serupa yang disebut ZenMoney, tetapi saya menginginkan sesuatu dengan cara saya sendiri.

Munculnya ide

Saya mencoba untuk mencatat dengan jelas pengeluaran dan pendapatan, tetapi karena sering lupa menambahkan posisi yang diperlukan, terutama yang berhubungan dengan uang tunai, saya harus segera melakukan ini ketika "transaksi" terjadi. Kadang-kadang saya memasukkan data dalam transportasi umum, seperti kereta bawah tanah, di mana kehilangan koneksi sering terjadi, bahkan meskipun jaringan Wi-Fi tersebar luas. Sayang sekali semuanya membeku dan tidak ada yang terjadi, dan kemudian data hilang begitu saja.

Idenya datang dari menggunakan broker antrian seperti RabbitMQ. Tentu saja, saya punya solusi yang lebih sederhana dan tidak terlalu fungsional, tetapi ada sesuatu yang mirip dengan prinsip-prinsipnya. Saya pikir Anda dapat menyimpan semuanya, misalnya, di Cache atau LocalStorage sebagai objek dengan antrian permintaan "tidak puas", dan ketika koneksi muncul, Anda dapat menjalankannya dengan aman. Tentu saja, mereka tidak dieksekusi dalam urutan prioritas, yang, berkat pemrosesan permintaan yang tidak sinkron dalam bahasa JS, bahkan lebih baik, mengingat Anda hanya memiliki satu "pelanggan". Saya mengalami beberapa kesulitan, mungkin bahkan implementasi ini semua akan tampak sedikit bengkok, tetapi ini adalah solusi yang berhasil. Tentu saja, ini dapat ditingkatkan, tetapi untuk saat ini saya akan menjelaskan opsi "mentah" yang ada tetapi berfungsi.

Memulai

Hal pertama yang saya pikirkan adalah di mana menyimpan data tanpa adanya koneksi ?! Layanan yang dikenakan pada saya oleh PWA berfungsi baik dengan cache, tetapi apakah bijaksana untuk menggunakan cache ?! Pertanyaan yang sulit, saya tidak akan membahasnya. Secara umum, saya memutuskan bahwa LocalStorage lebih baik bagi saya. Karena LocalStorage menyimpan nilai key type: value, objek harus ditambahkan sebagai string Json. Dalam proyek saya untuk pengembangan eksternal, saya menambahkan direktori yang disebut QueueBroker ke folder kelas

Struktur file

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

Proyek saya dibuat di tumpukan Laravel + VueJs, jadi diperlukan ketergantungan tertentu dari struktur file. Saya tidak tahu bagaimana dalam kasus seperti itu adalah benar untuk memanggil direktori Anda sendiri untuk kelas, jadi saya melakukannya.

File indeks dibuat untuk cukup menyambungkan modul dari Perpustakaan bersarang. Ini mungkin bukan solusi yang sangat elegan, tetapi saya ingin membuatnya sehingga jika saya tiba-tiba berubah pikiran tentang penggunaan LocalStorage, saya akan menulis kelas lain untuk Penyimpanan dengan metode yang sama, meneruskannya ke konstruktor pialang, dan menggunakan penyimpanan lain tanpa mengubah apa pun.

index.js

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

Metode ini memungkinkan Anda untuk menghubungkan hanya perpustakaan yang saya butuhkan di skrip saya, misalnya, jika saya membutuhkan keduanya:

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

Untuk membuatnya mudah bagi saya untuk mengubah kelas penyimpanan, saya membuat semacam konstruktor untuk kelas Broker, di mana objek Penyimpanan dapat diteruskan sebagai argumen, hal utama adalah bahwa ia memiliki fungsi yang diperlukan. Saya tahu bahwa pada ES6 saya bisa menulis kelas dan konstruktor, tetapi memutuskan untuk melakukannya dengan cara lama - prototipe. Saya akan menulis komentar langsung dengan kode:

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;

Selanjutnya, Anda memerlukan objek Storage itu sendiri, yang akan berhasil menyimpan dan mengambil semuanya dari penyimpanan

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;

Ketika semua hal di atas akan siap, ini dapat digunakan atas kebijaksanaan Anda, saya menggunakannya seperti ini:

Gunakan di Simpan

 //   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); }); },

Gunakan saat menghubungkan kembali

 //   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

Sulit bagi saya untuk berbicara tentang kode, jadi saya mencoba memberikan kode dalam contoh sedetail mungkin dengan komentar terperinci. Jika Anda memiliki ide untuk meningkatkan solusi ini atau memperbaiki artikel ini, saya akan senang melihatnya di komentar. Saya mengambil contoh dari proyek saya sendiri di Vue, saya menjelaskan ini untuk memperjelas mengapa metode saya disebut dan mengapa saya mengaksesnya melalui ini . Saya tidak melakukannya dalam artikel ini khusus pada Vue, jadi saya tidak memberikan kode komponen lain, saya meninggalkannya untuk memahami.

Broker JavaScript Offline

Tentang proyek

Munculnya ide

Memulai

PS

More articles: