How can ReactJS gets notified and update UI on Firebase database updates - reactjs

I need some technical design guidance on how to do this.
I have a webapp that is build on ReactJS and I have a Firebase Database
I would like to update realtime data from Firebase Database updated to the ReactJS UI (filtered to particular user/account)
I know that we can listen to Firebase Database events from Functions using these guidance:
https://firebase.google.com/docs/functions/database-events
Can reactJS subscribe to certain events from function to get these triggers ?
I would like real-time information appearing on the ReactJS page. Can someone advise how would this be designed / architectured ? Thanks

I would like to update realtime data from Firebase Database updated to
the ReactJS UI
Both the two database services offered by Firebase, i.e. Firestore and the Realtime Database, offer the possibility to get realtime updates from the database in your front-end.
For Firestore, you'll find here in the doc the details on how to listen to a Document, a Query or an entire Collection.
For the Realtime Database you'll find here in the doc the details on how to listen to a specific node of the JSON-like data tree.
So, in the Firebase world, setting such real-time listeners is the standard way for having "real-time information appearing on the ReactJS page".
I know that we can listen to Firebase Database events from Functions
using these guidance:
https://firebase.google.com/docs/functions/database-events
This is about triggering a background Cloud Function in the Google Cloud back-end, based on some events occurring in the database (e.g. update, deletion or creation). In this framework, there is no out-of-the-box mechanism to be informed, from your front-end, that such a background Cloud Function was triggered (based on some changes in the database).

Related

how to sync live data from database in flutter

I'm creating a online grocery shopping with flutter so I need to integrate live data update without refresh like Fetch api data automatically syncing how to achieve this feature I have already created the app and now I have to add this feature i'm using getbuilder in flutter is there any way to add realtime sync to getbuilder

Electron - How to persist offline data and sync between different app installation

According to this answer, I want to use an offline first db inside my electron app. I nedd that the users are not able to directly modify the database, but they can only read data using the UI. The data needs to be synced with a master remote client app that will add and modify data. Can anyone suggest me a good database library to do this?I have a pusher account and an heroku one, that can be used to pass the data between the clients, but first I need a way to store them into the app

Mobile Offline Sync

I'm currently working on a React Native application, the server is already implemented and my app should implement offline sync, I'm planning to integrate realm on the mobile device to deal with the offline data and pushing the data to the implemented server when the device is online. How would I go about doing that?
I'm trying also to make some kind of offline sync. A calendar app that works offline.
I'm developing it on ionic 4 using sqlite.
Basically, what I did is: I keep a variable with my last update timestamp.
Part 1
Get activities.
A service is running on the background, getting from the backend activities that their creation timestamp is later than the mobile last update timestamp.
Part 2
Every time the user create an activity I add the timestamp to the activities table and a flag called synced that is true / false.
Another service scans the table for synced === 'false' and does the POST request.
Hope I helped.

We planned to create an e-commence website using react, back end PHP, MYSQL. How to maintain cart session and user session values in reacting JS?

We planned to create an Ecommence website using react, back end PHP, MYSQL. How to maintain cart session and user session values in reacting JS?
I reccomend using jtoker. It provides all aspects of authentication required for a standard web application. You will need to configure your backend a bit to work properly with it, but it leverages fairly high standards in terms of security.
You can read more here
J-Toker Github
From there, I reccomend using redux with react to manage global state, and on application init, use j-toker for check for the existence of a user token, and if it exists load the user information from localstorage into global state.

How to implement an automatic update of a maintenance page in an angular app?

I have an angular app that queries a Mysql table an then show the records in the page for maintenance. I wanted to automatically update the page whenever the mysql table changes.
One way that i can think of is to poll the db at a certain interval but this seems inefficient. Another way is to publish a topic to aws sns everytime there is an update on the table and then my app can subscribe to the topic so it can trigger the api to retrieve the records from the table from my app.
I was thinking if there is a simpler way of implementing this feature.
Polling would work but its not really a modern way of doing this type of operation. Pushing updates to your angular app from your backend is a better experience. You can do this using websockets to push messages when your database is updated. Your implementation will depend on what your backed language is written in. But here are some links I found to get you started:
How to push notifications with angular.js?
https://blog.pusher.com/making-angular-js-realtime-with-pusher/
AngularJS and WebSockets beyond

Resources