Sails server side views and socket for client updates (in angular) - angularjs

Struggling to get my head around this functionality.
I use a sails server view to host a simple find for a given model in the DB.
When browsing to: url/model I get the html view that populates the data.
So far so good.
My view is handled by angular and have databinding between the visible data and what came from the server (ejs).
Now, I want the data to change dynamically with sockets on the client view.
Reading the code and the docs, it seems I need to have the client view, actually get the data to be able to subscribe to it on the server side. (This handled in blueprints, or manually if I want to in a controller method).
The problem is that I will be querying the data twice in the DB.
Once in the server hosted view with the default HTTP handled blueprint, and then
Twice when I actually have to get the data via sockets.
I managed to only do this once, if my client is standalone, by simply querying the data via sockets only.
But how can I do both ? Server hosted views and data, with subscription to sockets for updates, without having to get the data twice ?
Thx.

Related

How to create an online-offline application using servicestack

I'm trying to figure out how to create an offline / online approch to use within a huge application.
Right now, each part of the application has its own model and datalayer, who directly read / write data from / to SQL. My boss is asking me to create a kind of buffer that, in case of connectivity failure, might be used to store data until the connection to SQL return active.
What I'm trying to create is something like this: move all datalayers into a servicestack service. Each "GET" method should query the database and store the result into a cache to be reused once the connection to SQL is not available. Each "POST" and "PUT" method must execute their actions or store the request into a cache if the connection fail. this cache must be cleared once the connection to SQL is restored.
How can I achieve this? Mine is a WPF application running on Windows 10.
Best regards
Enrico
Maintaining caches on the server is not going to help create an offline Application given the client wouldn't have access to the server in order to retrieve those caches. What you'd need instead is to maintain state on the client so in the event that network access is lost the client is loading from its own local caches.
Architecturally this is easiest achieved with a Web App using a Single Page App framework like Vue (+ Vuex) or React (+ Redux or MobX). The ServiceStack TechStacks and Gistlyn Apps are good (well documented) examples of this where they store client state in a Vuex store (for TechStacks created in Vue) or Redux Store (for Gistlyn created in React), or the Old TechStacks (created with AngularJS).
For good examples of this checkout Gistlyn's snapshots feature where the entire client state can be restored from a single serialized JSON object or approach used the Real Time Network Traveler example where an initial client state and delta's can be serialized across the network to enable real-time remote control of multiple connected clients.
They weren't developed with offline in mind, but their architecture naturally leads to being offline capable, courtesy of each page being first loaded from its local store then it fires off a Request to update its local cache which thanks to the reactivity of JS SPA fx's, the page is automatically updated with the latest version of the server.
Messaging APIs
HTTP has synchronous tight coupling which isn't ideal for offline communication, what you want instead is to design your write APIs so they're One Way/Asynchronous so you can implement a message queue on the client which queues up Request DTOs and sends them reliably to the server by resending them (using an exponential backoff) until the succeed without error. Then for cases where the client needs to be notified that their request has been processed they can either be done via Server Events or via the client long-polling the server checking to see if their request has been processed.

How to sync with server data by AngularJS?

Angular has two ways data binding which is cool, so I just wonder if it could be sync in Server-Client binding? For example, usually we would request data by $http
$http.get(apiURL)
.then(function(rsp){
console.log('getRsp', rsp);
});
I hope it could send request automatically once server side (inside database for example) changes.
In tranditionally, we can use timeout, but it is kind old way, and watsting resource. What if we can listen the server change? But how?!
You can achiece this by using socket.io. Both on server and client side. By using timeout all of the clients will repeatedly keep on calling the server even if there is no update. With sockets you can keep a channel open between server and client. The server will only notify the client whenever there is a change in the data.
You can find a lot tutorials for sockets on the internet.

How to refresh the website with Nancy if model data changed?

If my model data is changing how to refresh the site automatically to display the changed data?
Is this possible at the server or do I have to write some client code for this?
Thanks for helping.
Michael
You have to write client side code to do this, the server has no relationship with the client once its sent the response - the connection is closed, the server moves on to other requests.
You need to use Javascript to poll the server and update based on server side changes - you can use a data binding framework such as Knock Out, or a larger framework such as Angular to make this easier.
SignalR may help you here, in that its a system which plugs into both the client and server side, keeps open a connection so you can send data to the client side instantly from the server.

Angular Model From Server

I'm new to Angular and I just can't get my head wrapped around this idea, any help would be greatly appreciated.
A lot of conversations state the Model should come from the server via restful web services. I've been using $http in a factory. This makes sense to me "if" there is data present. If you load a screen and the user or whatever is new then you get a blank JSON value. For complex data (relationships) you get those items with a value but other properties are left off.
So what am I missing here, how can the model come from the server consistently?
It's useful to think of your model as both a server model and a client model. The server model should be your true model or "source of truth", and the client model is a working model or "mimic" that should behave as a local copy of the server model.
For the model to "come from the server consistently", you have to ensure that any changes to the client model get validated by the server side. Meaning that when any change requests to the model -- such as create, remove, update, or delete (crud) -- get sent as requests to the server, and then the resulting changed data model gets returned to the client model so it can be updated.
You could take advantage of standard HTTP status codes as a mechanism to provide results to the client:
for example, your service could return an HTTP code of 204 to indicate that the server successfully processed the request, but is not returning any content.

Laravel: Making a Real Time Application using Angular

I am starting to work with angular and am fascinated by the bi-directional data-binding capabilities and by its $http method, which lets me save changes in to my mysql database, without refreshing the page.
Another thing I am currently fascinated by is the real time capability across multiple clients using firebase. Here all clients are updated in REAL TIME, when the database receives any changes. I'd probably like to use firebase, but I would have to drop Laravel and MySql as a persistence layer entirely, which I would like to keep for the moment, since my application is already working in Laravel, just not in real time.
How would I go about having a Real Time application, which updates every client, without refreshing the view, in Laravel using MySQL and Angular?
If I am not mistaken, Pusher and PubNub, are providing this necessary open connection with the server using websockets, so when the server has something to share, angular will now and render it.
Since I would like to use Laravel and MySQL as a persistence layer, I am not sure, what the best way would be. I am not even sure, if I understood everything correctly, which I wrote above, since I am new to angular and real-time applications.
What would be the next necessary steps, to get some Real-Time capability into a PHP/MySQL application?
The solution for your problem is:
1º - open websocket connection with the websocket-server and subscribe a channel, after this send the data to your serve using ajax
tutorial angular pusher
2º - In server side, you get the data, saves to your database and send a 'PUBLISH' to the respective channel into websocket server
lib useful for this
3º - Through the subscribe gets the data in real time
Pusher.subscribe('channel', 'event', function (item) {
// code
});
I had a similar problem recently and I finally ended up using Redis publish/subscribe Redis. You can store data in the channel and then subscribe to any changes. When something changes you can send it to Pusher which will send it then to the clients.
I also recommend considering Node.js and Socket.io since you can achieve very good performance without third party service, and even if you don't have experience with node you can find very good examples on Socket.IO how to write an application.
For Redis there is a good library for PHP called Predis and there is Redis Node client as well, so you can mix it all together.

Resources