How to handle offline messages in React-Native using NodeJS and SocketIO - javascript

I am currently using SocketIO and NodeJS to handle messages. However the problem is that when the user becomes offline there's no way that the other user will receive the message.
The solution I came up with was to store the message in the database.
But a new problem arise, when fetching the message and push notification.
If I do fetch for "n" minutes in the server when the app is in background/inactive. There will be a lot of request in the server, and I personally think that it is inefficient. and also it drains the battery.
What is the proper way how to handle fetching the messages from database or pushing notification in app without making too much request in "n" minutes and draining too much power?

You need to save the last sync time in the App. And whenever app comes from background/Inactive state. You need to call an API with this time. This API will give you all the messages and the Push notification which has comes after the last sync time. In this way, With one API call, you will be able to get all the messages and push notifications. I had used this approach to syncing my data in one of my app.

My suggestion is to implement a system of background jobs in the API, checking when there is a new notification to be launched, or with the notification already ready waiting to be launched in the queue. You can search for queue manager like Bull, Bee-Queue.
To launch push notification in the closed/inactive app, you can use a service like OneSignal or Firebase.
I implemented this a few weeks ago and did it this way.
API = Node.js, Bull Queue
App = React Native, OneSignal

Going back to this question if somebody stumbled upon this question.
The best way to handle offline messages regardless if you are using NodeJS/MongoDB, etc. is to store it on server's database. Then call an API that fetches the the messages which is equal to user's ID whenever the mobile app comes to foreground.
If your problem is that you needed notification and you are using
react-native-push-notifications / react-native-push-notification-ios
Then you should use the data notification to include the message on notification parameter on the server's side(Assuming that you are using Firebase Cloud Messaging). With this way you can directly save the message on the mobile's database.

Related

Can I force react to rerender when other user is inserting data into database?

I would like to create simple forum where users would be able to add/delete/modify posts stored in database. I have simple auth app: client(react app) - server(express). Is it possible to force client side to rerender for one user when there is a change made by another user while both are loggedIn?
It should be simple enough. When a logged in user is on a page that you want to keep synced, open a websocket to the server. Then, when any user makes a change, the server can update its database, and then once that's finished, it can send a websocket message to all users with connected sockets on that page, containing the new data to render.
In the client-side React, create the socket and subscribe to its message event. When a message is sent from the server, call the state setter with the new data.
This mechanism is somewhat similar to how Stack Overflow pushes "An edit has been made to this post" notifications when a post gets edited - anyone looking at the page will see such server-sent notifications through the websocket connection to Stack Exchange.
Websockets is one approach you can follow. If you think this will be complex to implement, you can poll for the data every minute or so.
This is very useful library tailored for React:
useQuery- https://tanstack.com/query/v4/docs/reference/useQuery?from=reactQueryV3&original=https://react-query-v3.tanstack.com/reference/useQuery
You can use it for polling/caching and making regular network calls as well. Lots of utility is provided that you can leverage; especially, considering the use case you seem to be tackling.
There is a slight learning curve, but its worth it if you're a react developer.

How to make a chat application in react native?

I have build chat UI for my application using react-native-gifted-chat. I have connected the sent messages and received messages with the services. Can anyone help me with the issue of messages not getting updated instantly as the message is received?
Do I need to hit services again and again to refresh the chat message? if yes then how?
Or do I need to implement some kind of push notification? if yes then how?
I just want to make my chat screen update the message instantly when current user receives a message from another user.
Well, for update the message instantly when current user receives a message from another user you need to use firebase realtime database. it provides you to live data instantly..(for more info refer this tutorial https://medium.com/#platypus/react-native-chat-application-679dbff3ccd3)
and for other option Socket.io also provides live data and it is better than firebase realtime database.

How to schedule push notifcations for react native expo?

I am trying to send push notifications to a user at a scheduled time. Say they set the date for an event and they want to be notified 30 minutes before, that is when I would like to send them a notification. I am using firebase as my backend and the project is built with expo.
I am curious how I would use expo's notification system if I am using firebase cloud messaging because it says I need separate permission from firebase (I already have the expo token for each user). I have looked into node cron/schedule and also react-native push notification but I am unsure which would be the best solution and where I would deploy the solution (such as running a cloud function).
I assume I need some type of function that takes the token, message body, title, and date and then sets it up to schedule it either to the server or locally. And then that function would be called when they press the button to receive the notification. They can also change the date of the event so it would need to switch the date if the user did that.
Any advice would be greatly appreciated as I have been researching this for days and still am unsure of the best approach.
One possible approach:
In your backend, schedule a cron job that runs every minute (or every 15 seconds) and checks against database which events have start time within next 30 mins.
Once you have the events, find out the users registered for those events and collect their user ids.
As you mention that you already have stored the tokens, so I assume that those tokens exist in some table against the user id. (e.g. mapping of user-id and tokens). Look up this table to fetch the tokens of those users.
Prepare the notification payload and call firebase messaging to send notification against the token. For example, at this point you can call the sendToDevice() function from Firebase SDK: firebase.messaging().sendToDevice(tokens, payload);
Now you can implement these steps in your backend (e.g. Nodejs) or you can deploy a cloud function for this and setup scheduling for this cloud function.
Let me know if you need any further help!

Web Push API- Service worker notification [duplicate]

I am wondering if I can use web push notifications to update a web page without displaying a notification for the user to interact with. Essentially I want to refresh data after an event on the server.
If this is possible, is it still necessary to receive permission from the user to send these push updates?
Yes, you can send push messages without showing a notification, but there are limitations on both Firefox and Chrome on the raw number of "invisible" push messages and the rate at which you send them.
You can experiment a bit with the quotas in different browers using the Push Quota ServiceWorker Cookbook example.

how to show real time data to all users using react and firebase?

I am building a messaging app that updates in realtime. So far I can log in with google and post a message and then that message displays on screen. however, if I log in via another google account (the app is hosted on heroku) and post a message as userB then userA won't see this message on their screen until they refresh the page. what is the best way to update all screens in real time so people can actually have a conversation in real time.
every message is posted and stored in the firebase. my only solution so far requires using the javascript setInterval method and pulling from the database every 3-5 seconds. this worked however it caused the app to become very slow and laggy and a poor experience. any pointers/tips are welcomed
You are using the Firebase and its one of the main feature is the real-time database. Firebase will automatically let you know if there is any change in your JSON database. You no need to send the request in interval basic.
You can refer Zero to App: Develop with Firebase - Google I/O 2016 It is also a messaging app demo by the Google Guys.
You can find the sample source code in Github to send and receive the message in real-time.
There are a lot of ways to do this. Generally, you will want to be notified by the server once a new message has come in and not have to ping the server every X seconds.
You could look at these:
socket.io and learn about websockets in general
A nice list of existing chat apps that utilize react
Google's cloud messaging, as you already use firebase, this might be the way to go for you here.
This should lead you in the right direction.

Categories

Resources