Sending live data to a client: Are websockets the best option (Vuex & Socket.io? - socket.io

I'm trying to set up a front end UI for the webApp I've been working on and have a clarification question before proceeding further.
Right now I have multiple sensor units streaming data to the server that is saving it to a database and then set up a crude api, to be expanded on later, to interface with the server and DB.
Now, moving to the front end, I feel like I'm bashing my heading first trying to learn react and now vue. The first feature of the UI I'd like to have is to constantly see the sensor data displayed in a table on the browser.
Should I be calling this data from the server using the API http requests or have it sent using websockets?
After spending a few hours trying to get vue connected to the socket opened on the server I wanted to check if I'm just looking in the wrong direction to begin with?
Thanks!

It would be best to create a websocket connections since your data is continuously changing. You are definitely on the right track.
Just create an vuex action that will commit your data to the store. It does't really matter which websocket tool you use. Most of them work quite the same. There will be most likely a callback function which gets triggered when new data has been sent to the front-end. This is where you would call your vuex action and pass through the data. If you can edit your question with some sample code, I can help you in more detail.
Just to some it up:
1) Open Websocket connection to backend service
2) Create action which would save the data to store via mutations
3) Specify websocket callback function to call action

Related

How to detect and refresh outdated data in React Native app with redux-persist

In a React Native app, usingRedux and Redux-Persist, what is the best way to identify what content needs to be updated?
I have an app that does a few requests at startup.
When I enabled redux-persist I started to avoid a request if it was already done at another time. But I have no idea how best to identify whether or not to make the request again to update the data stored by redux-persist.
I read about the use of ETags andLast-Modified, but this implies implementing this in the API also right?
Any guidance for this functionality implemented in the right way?
Yes, you also need to update your API.
Another solution is to use push notifications to notify that the data changed and perform a new request every time the notification is received. But this also means implementing some code on server side.
You need a way to know that the data changed, for that reason you always need to implement some code in server side.

Best approach for easliy loading data from back end server for iOS application

We are developing a social networking iOS application. The application loads lots of data from back end server. I have following doubts which is still unclear .Please help
What is the best approach for handling these much data from back end server?.
How does social networking mobile applications like facebook loads and update friends data?
Does these kind of application uses a local database to store these data?? If so when is the values in the local database updated?
Is making an synchronous call on a separate thread same as making an asynchronous server call?
Please provide your suggestions.Thanks in advance
Ideally, load data "on demand". Request from the server the data the user is seeing at the moment, or that you think she will see soon. Also, request data in batches (for example, last 50 posts, or post between certain dates).
Considering the answer above, Facebook does something similar. The key is to be smart on the server side. Let the client ask for a feed, for example. The server returns the last 50 posts and a "next page" attribute. The client can store that attribute and when the user scrolls down to the last post, send a request to the server asking for more news and passing the "next page" attribute that the server previously returned. The server of course will return a new "next page" with the new request. In this way, what is returned to the client is decided by the server.
Yes, you should use a local database which acts like a client cache. This is used to present the data that was shown to the user the last time she opened the app, so that you can show something while the request is loading from the server. You should update your database when the server sends a response to your request. This is also valid for friend lists, messages, etc. Don't forget, though, that the server has he most up-to-date information and the client database is mostly a cache to display temporary information.
Not exactly the same but for your use case it will be very similar. Ideally some operating systems provide low level asynchronous network operations, which is much better than handling it on your code with a background thread.

Page Content Refreshed via Web Socket or AJAX

I am working on a project which is built on Springs MVC and Google App Engine with Objectify.
The major functionality of this app is: If someone posts something new to the Datastore then it should be auto published to the browsers to which it is connected without refreshing the page content. Basically it is a news like site. The data sent to browser is REST APIs based JSON Data.
For implementing this functionality I thought of using the following ways:
AJAX : I thought of using AJAX call in every 2-3 minutes to get updated. But this solution doesn't seems to be feasible as there are many datastore read operation due to many AJAX calls from many browsers.
Web Socket : This concept is pretty new to me. I am not aware of this thing. Some pusher.com uses this technology for establishing such connections.
Now I need your suggestions, using which of the two above or I am also open to other solutions.
Google app engine does not support web sockets, however it supports something similiar called the channel api which works on older browsers as well. This may not be feasible depending on how many people you will have connected (channels cost 1c per 100). Channels also have some caveats: https://developers.google.com/appengine/docs/python/channel/overview#Caveats
As for using Ajax - if you cache the response in memcache and flush the key every 3 minutes then you won't be doing any data store reads unless a new instance is fired up or the key expires.

Any way to push Javascript from NodeJS server to client for updates?

In Scala's Liftweb there are some classes which allow for Javascript to be pushed to the browser via comet/ajax after the page has loaded. Some documentation here.
The usage could be for example when someone submits a form to the server, the form would submit via AJAX and then some Javascript can be sent from the server to the client to show some error message. Well this is just for example, there are better ways to do form validation.
Is there any way to push Javascript from the NodeJS server to the client to do updates? Any standard way to do this? Why I want to do this is that its nicer to have all client and server code located in one server file.
Also as a secondary question, can I access the page data from the server side? It would be nice to be able to query a page element from the server side or query some page data from the server side.
You can build this functionality into socket.io, either by predefining functions based on dynamic objects that are sent bi-directionally, or by building a system which will parse and run javascript from both sides. Depending on what you are trying to do it might take a while to get that working for you securely (not just throwing everything in eval());
http://socket.io/
Alternatively there is a library built on node.js that has this functionality built in. I have not personally used it so I can't attest to the reliability or security of the system, but it should be a good place to start.
http://www.nowjs.com/
https://github.com/Flotype/now
Hope this helps!

Is it possible to send info from a webpage to a server without reloading?

I have found very little on this topic. I'm trying to work out a way to synchronize pages cross-web without having to constantly reload pages to get new information, since the rate at which this would be necessary would cause the page to be outrageously slow.
The flow I'm thinking is this:
User A alters info displayed on Page A.
Page A sends info to server.
Page B checks server for new info every 10ms or 100ms.
Page B loads Page A's new info.
I can see AJAX as being sufficiently fast to retrieve info from the server, but have found no way to send data to a server without having to refresh every 10ms, which, even using an iframe to avoid reloading the whole page, seems far too slow to me. Correct me if I'm wrong.
So my question is, is there any way of which I am unaware to do what I am attempting? I have seen methods involving a Java server applet, but that's a bit above my head at the moment. If that's the only way, I'll learn it, but I'd love to avoid that if possible.
There are two possible interpretations of what you wrote, the first which seems to be what you've actually said is that you want to know how to send data with an Ajax request, the second is that you want to know how to push unsolicited data from the server to the client.
Ajax can easily add data to a request it makes - just add query-string parameters, or make a POST request and use XHR's send method
Use comet - i.e. keep open a long-lived connection and send data only when there is something to send.
One of the possible way to implement what you want is to use Comet technology. For example - facebook uses it to interact with their servers.
If you are retrieving info fast using AJAX, then you are also sending info fast with AJAX...
GET requests are still telling the server something. For example, lookup RESTful web-services.
You could use updater of Prototype.

Resources