How to change user page content without refresh

Question

I have a react js app with a video player window, using Firebase database. I have an admin panel that can change the url of the video shown.

I want when the admin change the video displayed, the video shown of users in the other side, changed without refresh rhe page.

How can I do that?

Answer 1

I think you should use WebSockets ( https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications ). The client will listen for changes and change state inside the component.

Answer 2

I found an easy way using Firebase.Get realtime updates with Cloud Firestore.

onSnapshot() function

You can listen to a document with the onSnapshot() method. An initial call using the callback you provide creates a document snapshot immediately with the current contents of the single document. Then, each time the contents change, another call updates the document snapshot.