CODEWITHSUNDEEP
javascriptreactjsfirebasereal-time
The worm
The worm

Reputation: 5888

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

Upvotes: 0

Views: 1116

Answers (2)

Sriram G
Sriram G

Reputation: 409

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.

Upvotes: 1

embiem
embiem

Reputation: 113

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:

  1. socket.io and learn about websockets in general
  2. A nice list of existing chat apps that utilize react
  3. 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.

Upvotes: 0

Related Questions