How to sync my backbone.js app with the changes on server? - ajax

I have an app in backbone.js. The user can add items to the app which are added at the backend server and the collection is refreshed and the user sees the added data. How can I sync the app with any changes in the backend. Suppose if multiple users add the data at the same time each one should see the changes.
There are options like ajax polling where I can refresh the model after a certain time period but I hate to use it.
Can you suggest any event driven method where any change in the backend is reflected immediately in the frontend of my app.

You can add a kind of refresh event on your app, which will refresh every few minutes. Something like evernote desktop application does. In that event you would add collection sync event.
You can also use something like
collection.sync(method, collection, [options])
http://backbonejs.org/#Sync
This doesn't answer your question though, and I'm not sure how you would push changes from server to client.

Related

How to be aware of the creation of a new event in a google calendar? [duplicate]

I am developing a SPA webapp through which I add events to my users google calendar They have given permission for. However this is my first time using Google calendar API, and was unclear about how to retrieve my users existing events , or if they add new events or delete them. IS there an option to set a webhook within google calendar thus when the user makes any changes to the calendar I can receive the change. My current approach was to make multiple get requests but that seems very inefficient. How can I keep my app calendar in sync with all user created events.
You can set up a push notification to be alerted any time anything changes on one of your calendars. I looked into it before a little, if memory serves it doesn't alert you to a lot of particularly useful information (I don't believe it tells you exactly what changed and how). Check out the docs here: https://developers.google.com/google-apps/calendar/v3/push
What I ended up doing was setting up a cronjob and getting all of my calendars' events using the synctoken, which returns only the events that have changed since the last time I polled the API for events. https://developers.google.com/google-apps/calendar/v3/sync
If you are using the SyncToken in your request for data, all you get back is the events that have changed. There is an eventID in the Google records that you can use to connect the change to your event data.

Best practice to solve Livewire UI Not updating until after API call

I am using Laravel Livewire, I currently have a form that captures a user's address information, then it needs to submit that to a 3rd party API (it's for billing information).
The issue that I am facing is that the UI doesnt update / livewire doesnt call render until after the entire method has run - which looks on the frontend like the UI is frozen / system isnt doing anything as the API is slow and takes a few seconds (15 - 20) to give a response.
I want to be able to trigger a browser event to display an alert saying the request is processing / show an alert banner on the page that it is processing before making the API request, process the API request, then display the results.
Currently I have identified the following ways to make this happen:
make the updates on the frontend, fire off an event with the data needed. Laravel event listener handles the API call, and emits a result event that the livewire component listens for, then the livewire component updates the page with the results.
make the updates on the frontend, dispatch a job to run in a queue worker, emit an event that the livewire component listens for, update the page with the results.
emit an event from the livewire component to itself, the livewire component then listens for that event and processes the API request, then updates the frontend with the results.
emit an event from the livewire component to itself to update the UI with processing info, while it still runs the API process in the original method call, and then updates the UI once the API gets a response
My thoughts are, what would be best practice here? All the above solutions require a different amount of work to get running, and solution 1 and 2 looks like complete overkill for such a simple process.
Does this come down to preference? Or is there actually a best practice way to do this in livewire?
And additionally, is there another way / simpler way to do this that I havnt mentioned above?
Your feedback is appreciated.
I would probably create a job and then return a response to the user. Then instigate Livewire polling that can check for the job being complete. If the API takes 15-20 seconds then polling once per second should be fine.
You might want to store the state in the database so that the job and the livewire component can communicate with each other. If you don't need to keep the data, using the cache to communicate between job and component would be a good alternative.

How to add a dynamic results section to Laravel

I made a laravel app which uses an index method that delivers a collection of the client's available appointments (think hairdresser) to the page (as an api), which I then display using vue/vuetify.
The client is saying they would like the appointments on the page to be dynamic/live eg if someone books an appointment, then all other logged in users will see that appointment disappear from the list on their screen.
I have no idea how I would do this, although I have had one idea - I somehow incorporate node/non-blocking on the server, like a chat room, but only for this part of the app.
Or is there a way to do this with laravel/nginx?
Thanks in advance - I don't know what to search for!
I believe you are looking for Broadcasting (Documentation Link). You would need to:
Configure your broadcasting driver (you could give pusher a try for quick setup and tinkering)
Configure your Laravel backend to dispatch a new event whenever a new appointment is made, (e.g. event(new AppointmentCreated($appointment)) where AppointmentCreated implements the ShouldBroadcast interface. You can combine this with Model Events
Update your frontend to receive your broadcast (Check Laravel Echo). Once you receive a broadcast, update the UI to mark this appointment as unavailable i.e, make it disappear

Google Calendar event Created/Updated/Deleted Webhook?

I am developing a SPA webapp through which I add events to my users google calendar They have given permission for. However this is my first time using Google calendar API, and was unclear about how to retrieve my users existing events , or if they add new events or delete them. IS there an option to set a webhook within google calendar thus when the user makes any changes to the calendar I can receive the change. My current approach was to make multiple get requests but that seems very inefficient. How can I keep my app calendar in sync with all user created events.
You can set up a push notification to be alerted any time anything changes on one of your calendars. I looked into it before a little, if memory serves it doesn't alert you to a lot of particularly useful information (I don't believe it tells you exactly what changed and how). Check out the docs here: https://developers.google.com/google-apps/calendar/v3/push
What I ended up doing was setting up a cronjob and getting all of my calendars' events using the synctoken, which returns only the events that have changed since the last time I polled the API for events. https://developers.google.com/google-apps/calendar/v3/sync
If you are using the SyncToken in your request for data, all you get back is the events that have changed. There is an eventID in the Google records that you can use to connect the change to your event data.

Automatically detect changes in a database using Ajax

I want to make an online DB based chat application. My problem is to detect changes in the DB, i.e. whenever a user sends a message to another user it should display to him. One approach is Ajax calls with setinterval but I want an instant solution. I do not want to keep the server busy with such Ajax calls.

Resources