Synchronizing Database with Javascript

I've been developing a real-time JavaScript Application that necessitates immediate synchronization between the database and JavaScript.

Currently, whenever there are changes in JavaScript, an ajax call is made to the API to update the DOM accordingly. The server's API processes the request and sends out a push notification via PubNub to other active JavaScript users with details of the change. To ensure data integrity, each push includes a sequential changeID so that JavaScript can fully resynchronize if needed. Below is an example of such a push:

{
    "changeID":"2857693",
    "type":"update",
    "table":"users",
    "where":{ 
        "id":"32"
    },
    "set":{
        "first_name":"Johnny",
        "last_name":"Applesead"
    }
}

Upon receiving this push, JavaScript updates the local storage and reflects the changes on the DOM based on the affected table. The challenge lies not in updating the DOM but rather efficiently and seamlessly syncing the database with JavaScript.

Reflecting on this process, it seems overly complex for what should be a straightforward task. Is there a simpler way to synchronize multiple JavaScript Clients with a MySQL Database flawlessly? I'm open to suggestions on improving this synchronization process.

Answer №1

Providing an update a couple of months down the line - I ultimately decided to continue using this approach and it has proven to be quite effective.

Answer №2

Although this question may be considered old, I have dedicated a significant amount of time to tackling the same issue within a different context. Specifically, I am in the process of developing a Phonegap App that must operate offline and synchronize data at a later stage.

Through my exploration, I discovered that what I truly require is a form of version control between the browser and server. As a solution, I implemented a system that stores data in sets and keys within these sets, with individual versions for each component. In cases of conflicts, there is a callback available for conflict resolution.

I have recently uploaded this project on GitHub, accessible at the following URL: https://github.com/forbesmyester/SyncIt

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to dynamically link an Angular Material table with information pulled from the backend server

I am attempting to connect a mat-table with data from the backend API following this Angular Material Table Dynamic Columns without model. Below is the relevant content from the .ts file: technologyList = []; listTechnology = function () { ...

I am facing difficulty in incorporating an IP address or URL within an IFRAME in my Cordova Android application

This page does not allow any iframes to load except for the YouTube video URL. When attempting to use any other iframe URL, the following error code is displayed: Error : net::ERR_BLOCKED_BY_RESPONSE In the example below, any URL or IP address fails to l ...

What could be causing the redirection to my php file in this particular contact form?

I have a contact form on my website that uses AJAX for submission. Everything seems to be working fine, but when the user clicks on the Submit button, they are redirected to the PHP file instead of staying on the page to see success or error messages. I wa ...

Managing individual HTTP responses within Angular 6

I currently have 15 HTTP requests being sent to the API individually. Instead of waiting for all requests to finish processing (especially one that can take a few minutes), I want to handle responses as they come in. On the service side: findOneByOne ...

How can I prevent my Vue.js application from losing focus when navigating to different components?

I am encountering an issue with my Vue.js app where the focus is lost when changing routes. Initially, when the site loads, the first element of the header component is correctly in focus as desired. However, when navigating to a different link on the site ...

The act of employing `Function.prototype.run` within an Angular TypeScript class is deemed as illegitimate

Is there a way to globally define a new function called run within my Angular component as shown below? Function.prototype.run = function (delay: number) { // some content; }; However, the compiler shows an error that the Property 'run' does n ...

Using PHP's "variable wrapper" feature to create an array for executing SQL queries across numerous databases

I am faced with the task of analyzing and evaluating data from 50 databases, all of which have the same design and structure. To handle this, I need to create SQL queries for benchmarking purposes. Thankfully, I have a SuperAdmin account that allows me to ...

Persistent navigation once fullscreen banner is completed

I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code. HTML: <div id="hero" ...

The program encountered a critical issue: Trying to call a function that does not exist, mysqli

My database query is causing an issue, resulting in the error message below: Fatal error: Call to undefined function mysqli_master_query() in /home/**/**/**/edit/add.php on line 4 Take a look at my PHP code snippet: <?php $db = mysqli_connect("lo ...

When attempting to access front-end SPA links through the browser, the back-end triggers an error due to not being

My front-end single-page-application is built using JS (ReactJS), and the back-end is running on Phoenix (Elixir). Everything functions smoothly within the application, but I encounter a route error from Phoenix when attempting to access a page in the SPA ...

Display a progress bar on the index page of the grid view

Seeking assistance in displaying a progress bar on the grid view page index. Currently, I have successfully implemented a progress bar on button click and would like to replicate this functionality when the user switches from 1 to 2. Here is the modal pop- ...

Execute JavaScript function only if it is the final invocation

I'm currently experiencing an issue with a Javascript function that updates a bootstrap spinner. The function works well in general, but the problem arises when I click multiple times. I utilize ajax to update the quantity of selected products in the ...

Can we split the PHP Photo Gallery into a second page after displaying 12 images?

I recently developed a simple PHP photo gallery for my website that pulls data from a MySQL database. By using a while loop, I am able to display three images (from ID 1 to 3) in a single row, continuing this pattern until a total of 12 images are shown. ...

New techniques in VueJS 3: managing value changes without using watchers

I am currently working on coding a table with pagination components and I have implemented multiple v-models along with the use of watch on these variables to fetch data. Whenever the perPage value is updated, I need to reset the page value to 1. However, ...

What is the best way to bring a JavaScript library into a TypeScript project if the library includes a declaration file?

I have been attempting to utilize the type definitions from the callbag library. Unlike other libraries, callbag declares its type definition file within its package.json and is not included in DefinitelyTyped. However, when I try to import the library, I ...

I'm running into an issue where pool.query is failing to work properly in conjunction

I am a beginner with node.js and I'm attempting to retrieve data from mysql using this library. My setup involves the express framework. Here is the code snippet from my router/index.js file: router.get('/', async function(req, res, next) { ...

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

Ways to style a div element in CSS to achieve a unique shape

Hello there! I'm looking to achieve a tilted background div effect. Anyone have any tips or ideas on how I can do this? I'm new to web development and would appreciate the guidance. https://i.stack.imgur.com/wyj1X.png ...

Receiving a score of 0 in the Group By Month analysis

My table is structured as follows: id | bileti_id | status | user_id | point | date I am looking to retrieve the number of bileti_id where the status is 1, grouped by months. If there are zeros in some months, I want them to be included as well, not just ...

Finding the Middle Point of a Circle Using CEP/JavaScript

Using a specific set of calculations, I am able to create a circle in this manner: var yMinCir = height - 1515.80/2.667+8.5; var yMaxCir = height - 1545.80/2.667+8.5; var myCircle = page.ovals.add({geometricBounds:[yMinCir, 1312.63/2.667+8.5, yMaxCir, 1342 ...