Keep the data updated in React - json

I could not find something specific about what I'm trying to understand.
I want to know what is the best pratice to keep the data always updated. For example, using React, you will fetch the data of something using an API, then you will work with the state to keep the data updated for the user on the screen. But let's think that it is a software in which are other people working in the same "database". How may I keep this data updated from external changes?
I know it is possible to use things like a React Lifecycle Method to updated or even setTimeOut to request a new json. But there is other way to do something similar to Firebase Realtime database?
Regards.

I've used sockets.io to broadcast updates to connected React clients. Server side I have a 'job' tied into a setTimeout function. Every time the job runs, it broadcasts the results to the client. It should be straightforward to detect a data change and then fire that to the clients.

Related

Store data to be accessed on multiple devices without a server

Is it possible to create a client-side only app, with no server backend, that stores data in a way that one user can see things stored by another user on the app?
To give some context, I am trying to create an cross platfor phone application, preferably using html, that will allow users to log their hours in a punch in, punch out style and then have these hours become viewable by a supervisor, however I will not have any server power to store any data.
I'm sure this is possible, perhaps using something like google spreedsheets or something similar to store this data, however I am at a loss how I would do this. Any help would be appreciated.
The short answer is "No."
However you can use a service such as Firebase to host your data for you.

is angularjs working with database or json?

I am developing web application. I am getting data in json or database. I can use this data in angularjs at one time (i think so). So if any data changed in json or database then angularjs should work .Is this how it normally works? Is it possible?
thanks in advance.
Yes and no. When we say data binding in Angular JS, we are referring the data in memory and manipulations we do to the data. For instance when we type in text field, we update a javascript object, and then display it in another form on the browser.
When dealing with external data, e.g. json or database, we will need to fetch that data from the server. Browser on the client side won't know that json has been changed in the server, it needs to send a request to the server to fetch new data. After the data is loaded into memory, then we can do the same manipulation and display it.
The remaining question is when to trigger the data refresh. Well this is not an easy question for web application if you are using restful API. It can be reactive like when user do specific action, or refresh at fixed interval, depends on your requirement. I heard that socket programming is good for this kind of thing but I'm not expert in it so I'll leave it to others.
Angular apps usually manage their data using RESTful API endpoints. This means, that your Angular app communicates (usually via JSON) with a backend application running on a server, which handles all database interaction.
In practice this means that to get for example all blog articles, in your Angular app you would do a $http GET request to api.yoursite.com/articles. Then your backend application does database query and returns a JSON with all the articles.
Does this answer your question? Because it wasn't clear what exactly you were asking.

how to call a java action when changes in databse

hii i am working on spring and hibernate, i have a situation when i want to call a method when changes is done in data base means like notification whenever a new notification is come then my page automatically show the no of notification, i have done this work using timer but its not good it because it call repeatedly and load on server is increased unusually so please tell me is there any way to listen the data base and call the method only when a new entry ios done or any change is made on data base
You have two options:
Trigger from database to java program using sys_exec():
see https://github.com/mysqludf/lib_mysqludf_sys
Use an hibernate entity listener. This only work if hibernate has excusive access to database.
see http://docs.jboss.org/hibernate/entitymanager/3.5/reference/en/html/listeners.html
If I've understood your question correctly, you have a web interface which should show a notification, if there's a new DB entry?
Then you've first got to choose one of Jose Luis Martin's suggestions, in order to have the notification on the server side. And then you have to forward this notification to the client. For this there are a few possibilities:
(What you already did): Use polling (sending a request from client to server every x seconds, asking for new entries): http://en.wikipedia.org/wiki/Polling_(computer_science)
Let the server push the data to the client. This is the more "modern" solution: http://en.wikipedia.org/wiki/Push_technology
I'd suggest using the second approach in combination with some framework like Atmosphere: https://github.com/Atmosphere/atmosphere
This framework supports several different ways of communication, with fallbacks etc.
EDIT:
If you really just want the information inside a server method, and the information hasn't to be 100% precise, you could also use a timer on the server to count the new items every 30 seconds and kinda cache the result for the client requests.

UI and Local Storage binding together

Can someone tell me if we can bind localStorage objects to the ui using Knockout.js or some other javascript framework?
What I want is - as the user loads up the page he gets the latest version of data from the local storage (Using some framework) and then I keep polling my service to see if there is any change in the data. If there is change I will update the local storage with the fresh data and make the ui update automatically (Using some framework).
This complete flow is required to be done with minimum amount of code.
This might be too early to post since I have not researched much my self about how to go about it. Any help or redesign in terms of architecture is appreciated.
I would suggest writing some code that checks if there is new data from your ajax service. If so, grab it, store it in a model which is in your viewmodel already bound to your UI. Also, save that model to localStorage.
If the data is not new, grab it from localStorage, put it in your model (that is in your viewmodel), and you are done.

How can I show realtime data in a browser?

I want to setup a website (intranet in this particular case) that shows realtime updating data. I have the server and the realtime data, it's the software I know less about. I am no stranger to programming, but I am less familiar with web technologies.
Which alternatives do I have? I would prefer open source, and preferably something nimble and transparent as well.
EDIT:
With realtime data I mean a data that refreshes quicker than my monitor does.
I would prefer the data to update 'straight through' and not keep any specific refresh rate on the browser side. The data is to be shown in a regular tabular format, I don't need any fancy graphics. Please note at this stage I am not using any particular scripting framework. That is the purpose of this question, to figure out which one I should use.
I don't know what scripting language and data source your using but this will give you a direction.
Display data updates in real-time with AJAX
On the presumption that the data is retrieved using AJAX, you're after a "polling consumer pattern". In a nutshell, you make a request for your data and it will be blocked by the server until new data is available (or your request times out). When you receive your data, you poll for it again. In the event that you get an error (timeout, server failure etc.) then you might want to implement some back-off policy before trying again.
'hope that this helps.