Laravel livewire - any way to get live data from database? - javascript

I have a project for food ordering and deliverying. Basically this is a concept of project:
User order a food in some restaurant
That order of that restaurant is showing specifically to the manager of that restaurant
Manager is getting SMS notification about new order
He needs to refresh his dashboard to see new order
The point is in the last step Manager needs to refresh his dashboard to see new order.
I'm using livewire and Laravel 7 framework, is there any way for the manager to get new orders in realtime?
I know for livewire polling but I don't want to use that because it can cause server problems in large quantities of using it. Is there any other way? Something like mount() function or emit ?

I've never used this feature but it seems you need broadcasting
In many modern web applications, WebSockets are used to implement realtime, live-updating user interfaces. When some data is updated on the server, a message is typically sent over a WebSocket connection to be handled by the client. WebSockets provide a more efficient alternative to continually polling your application's server for data changes that should be reflected in your UI.

Related

Can you use just react, node js and mongoose to create a chat app? Will there be a need for socket.io?

I am creating a simple chat app using react and node js. When using socket to establish a connection between server and client, I was wondering the point of using this package. Since react re-renders the page upon state change, I can fetch messages from my database and change the state, allowing for a presumably seamless chat application. Will there be any problems with such a chat application, where the chats would be displayed by fetching data from the database? Adding a new message would again update the database and the data would be fetched. So, the page would update with the new chat being displayed as it has been re-rendered due to change of state. So what is the need for socket in such an application ?
You could build what you describe without socket.io. Socket.io simply allows the messages to be delivered in real-time using websockets and a few other technologies so you don't have to build long-polling.
Said in a different way, when you fetch data from the database, you'll have react perform an API call and fetch new messages from a node.js API endpoint. This API call will need to be performed on a very short interval to make it feel like messages are showing up in real time.
This is one of many situations in programming where you could totally write something yourself, but there are industrial grade solutions that will help speed up your development.

Angular2- few questions related to data saving in a static web page

Im coding a static page app using Angular, which shows various Instagram and Twitter posts of the company, and shows the details of the members. I have few questions regarding this, and would like any help.
Firstly, I have about 100+ contacts to display on the first page. Should I create a Json by myself and retrieve it from the service, or should I create a backend and save it there ? I do not have any backend as of now.
Other thing, I was able to retrieve Instagram Json with media content using their API, the doubt im facing is, once I have the call done, will the Json change automatically when the user adds/edits their posts? Or will the Json be the same as I first called it with? Any help is appreciated. Thanks.
For your case, as you have fewer data using Firebase is the best approach. If you write a backend and maintaining it would cost you more. You can use Firebase service URL to retire those records. In future, if you want to add more data it would be easy.My suggestion is Firebase.
Should I create a Json by myself and retrieve it from the service, or should I create a backend and save it there ?
Are you revealing credentials or other sensitive information in the client? That would be one reason to have a backend apart from Instagram or Twitter. Do you envision exhausting API rate limits of Instagram or Twitter APIs? That would be another reason; you could cache results in your backend to reduce external API traffic. Do you need to process (reduce? translate?) the data before it gets to the client, or are you satisfied with performing any processing on the client (e.g. is it fast enough)?
TL;DR: It depends a lot on your particular requirements.
If you do want a backend, the recommendation in the answer from #praneeth-reddy to use Firebase is excellent. If you only need processing/transformation but no caching or separate storage, then AWS Lambda may also be worth considering. If you need more control (build vs. buy), you could write your own backend.
...will the Json change automatically when the user adds/edits their posts? Or will the Json be the same as I first called it with?
Angular can help you update content automatically if the client side data (think browser JavaScript memory) changes via its automatic change detection functionality, but you would have to provide your own logic (e.g. in Angular services perhaps leveraging RxJS) to update the client side data based on data from the APIs. You could poll to update periodically, or for better performance listen for changes using an asynchronous event/push mechanism such as websockets or streams.

Pubnub: Background Processes for an Auction App Development

Hello I am developing an auction app like tophatter.com. I want to implement an application that has background process in it. I want this process to run forever until I stop it
http://eoction.com thatss our current site. The problem on our site when we refresh the page the auction also restart. We need something like a continuous process like tophatter.com if you refresh the page it will load the updated auction process.
I found this great service called pubnub. I am thinking we need a background process for this? This will process the auction on the pubnub blocks and then when we visit the site we will just need to query on its updated process?
Does pubnub support something like this?
PubNub Web Page Best Practices
When user refreshes your web app page or navigates to another page there are things you need to consider as a web app developer no matter what technologies you may be using. I will address, at a high level, the things you need to do when PubNub is integrated into your web page.
Restore Parameter
Whether the user interrupts your connection to PubNub or it is a network failure, you will want PubNub to reconnect and continue where it left off as much as possible. The PubNub JavaScript SDK has a initialization parameter called restore that when set to true, will reconnect to PubNub and get missed messages after the connection is dropped and reestablished.
var pubnub = new PubNub({
subscribeKey: "mySubscribeKey",
publishKey: "myPublishKey",
ssl: true,
uuid: getUUID();
restore: true
});
Reuse UUID
It is important to reuse the same UUID for each end user as this will allow PubNub to identify that user uniquely when it comes to Presence so that it doesn't produce new join events for the same end user. The PubNub JavaScript SDK actually generates a UUID and stores it in localStrorage and reuses it by default but very likely you have your own UUID that you would like to use for each of your end users.
Last Message Received Timetoken
If the network disruption is brief as is the case with a page refresh or page navigation, then missed messages are retrieved when restore:true is implemented in the init as stated above. But when the user is offline for more than say 5 minutes, you may want to retrieve missed messages on one or more channels. The best way to do this is to keep track of the timetoken of the last received message by storing it in localStorage every time a message is received via subscribe callback. When the user comes back online and it is has been more than 5 minutes since they were last online, call history using this last received message timetoken on each channel that you need to get missed message from.
Subscribe to Channels
Finally, you'll want to make sure that the user is subscribed to the channel they expect to be based on what their state prior to the connection disruption. If it is a page refresh, you likely just want to resubscribe them to the same list of channels. To do this, you just need to keep a list of channels they are currently subscribed to, once again, in localStorage. If the user navigates to a new page and this causes a full page reload (modern web apps should not require this, but...) then you may want to unsubscribe from some channel(s) and subscribe to new channel(s), it just depends on what that page navigation means to your app. Modern web app frameworks do not require full page reload for page navigation since the web app acts more like a desktop app than older web apps. And again, if the the user was offline for quite some time (more than 5 minutes) then it may not make sense to subscribe them to the same channels that they were subscribed to before. Really depends on your use case.
And by the way, Tophatter uses PubNub ;) but all of the above are generic best practice guidelines and recommendations and is not referencing any one app in particular.
EDIT: To address you question specifically, as pointed out in comments below...
You can't implement long-running process in PubNub BLOCKS (not currently, anyways), so you will need a server process for this. When the user refreshes the page, you just need to hit your server for current state. If using PubNub to keep this progress bar updated in realtime, you just subscribe to that channel that is sending the state of that progress bar and update your client. Using the same best practices I provided above are still necessary.

adding a web layer that supports Asynchronous reloading

I am at a loss. recently i have started learning Spring MVC by creating a web application that will post live updated sports scores. the business logic is basically done, but i have no idea how to create the web view. Specifically, Is there anything available that will allow the view to automatically refresh asynchronously from within Spring? If i want to do a refresh of the scores listing anytime new data gets added to the connected database, is that something that can be done with some sort of ajax dependency/ templating engine?
what about Angular.js or some variation of Meteor.js (atmosphere)? As you might tell, I'm pretty confused on how the web layer works..
any direction would be greatly appreciated.
You could use Websockets to broadcast data to connected users as it gets added to the database. With a PubSub pattern you can additionally limit the amount of messages to only the ones your client is interested in eg. filter out scores of non-visible games.
https://spring.io/guides/gs/messaging-stomp-msgsjs/

How to write a web application where updates by one user are immediately visible to all users?

I am trying to write a web application that displays to users a hierchical tree. Users can add,delete, and update the tree but the tree should look the same for all users. My first thought to save the state of the tree (i'm using JSON to represent the data in the tree) in a database but, what happens if there are a million/billion/etc number of people using the application? How do you make sure that all users are physically seeing the same thing if additions/updates/deletes could be going on simultaneously?
Something like signalr would would help:
http://signalr.net/
What can you do with ASP.NET SignalR? SignalR can be used to add any
sort of "real-time" web functionality to your ASP.NET application.
While chat is often used as an example, you can do a whole lot more.
Any time a user refreshes a web page to see new data, or the page
implements Ajax long polling to retrieve new data, is candidate for
using SignalR.
It also enables completely new types of applications, that require
high frequency updates from the server, e.g. real-time gaming.

Categories