How to build real time streaming application - reactjs

I am going to build application that shows real time data with React.
And I decided to use Pusher for real time data management.
I also trying to use open third party apis for getting data.
For example openweathermap for weather data.
My trouble is how can I know if the data from third party api is changed and let the Pusher know data is changed.
In one word, how can I make Pusher to connect third party apis?
Really want your help.
Thank you.

Maybe there is a system for it in Pusher but I don't know.
If it is possible for you, you can create a cron service that checks your 3rd API continually. But it has to be on a live service to run continually. If it detects any changes in the data, it can emit your client app by using Pusher, Socketio, etc.
Maybe the 3rd API provides this feature to you.

Related

Script Hosting (API to Database)

I am currently creating a react native + expo application upon which essentially each page makes an API call, which is a lot of API calls. I have this app also connected to firebase for different information. The things is, each of these pages don't update more than once or twice a day for the most part, so I really don't want the End User to be calling the API that much either.
My question is, is there a way to write and host a script that will continuously run that knows to call this API once every hour (or so) and then rewrite to the firebase db from which I can then only need to pull from the database as compared to having each user individually making dozens of API calls.
Please let me know! I have spent days on google and am no closer than I was before. I'm also willing to change my set up from firebase if it is not possible to accomplish that way. Thanks!
You can use a Cloud Functions scheduled trigger to run code periodically that can make changes to your database.

React, API keys and intermediary services

I am kind of new to React, so this might be just lack of experience, but I don't seem to find any answer to my question:
I have a react app, where I need to subscribe to a push notification channel. Messages are delivered through PubNub, and in order to connect I need to supply a subscribe and a publish key to the message server. Now, I know it is not a good practice to store secrets in a react app, and they should be handled through backend services, but do I really need to create a service just to subscribe to the channel and forward the messages to my frontend app? Is this not an overkill?
The messages I am receiving are just time ticks (I need a trusted source of time), but I still don't want my API keys to leak out...
Is there any reasonably ok way for me to avoid standing up an intermediate service?
It is perfectly normal to have your PubNub publish and subscribe keys in client side code. If it is necessary to restrict who has the power to publish and subscribe (read/write) using those keys, the developer can enable PubNub Access Manager (PAM) in the admin panel. There are PAM guides to get you started on controlling access.
Another point to consider is that your JavaScript PubNub connection can also be used as a trusted source of time. The JS SDK time call will get a 17 place precision unix timestamp from a PubNub node:
const pubnub = new PubNub({
publishKey: 'your_free_pubnub_publish_key',
subscribeKey: 'your_free_pubnub_subscribe_key'
});
let pojoDateObject;
pubnub.time().then((timetokenObject) => {
pojoDateObject = new Date(+String(timetokenObject.timetoken).substring(0,13));
});

For fetching data from server for React frontend should I use websockets or api calls?

I am very new to frontend. I do not exactly know how react frontends work. Assuming I have a frontend written in React that needs to refresh data on the page say every ten seconds, can I achieve that by making api calls to a server every ten seconds or open a websocket with it and make the server push data? These are not notifications! They are just statistical data that needs to be updated on the page in realtime. Please tell me whats a good way to achieve this.
Websockets are interesting when you want data to be pushed from your server to your client, i.e. when the client doesn't know when new data will be available. In your case, it seems that simple API calls will be enough.

RxJS with .NET web api data streaming

Background: I have a background with Angular and .NET and am learning RxJS right now. I have successfully put together a notification module that leverages SignalR and RxJS to handle system notifications to a user and I LOVE how easy it is to work with.
Question: I currently have a web api call that queries multiple sources in individual Task calls and then merges them into one dataset to be sent back to the client. This call doesn't take too long right now because of few sources and the sources themselves have sample data in them. But I imagine that once I start tying real data in, that this call could take a really long time. I'd like to find a way to configure my web api so that I could pass back an open stream of data that would be monitored by RxJS to display data as it comes in. Is there a way to do this?

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