简体   繁体   English

如何在不刷新的情况下更改用户页面内容

[英]How to change user page content without refresh

I have a react js app with a video player window, using Firebase database.我有一个带有视频播放器 window 的反应 js 应用程序,使用 Firebase 数据库。 I have an admin panel that can change the url of the video shown.我有一个管理面板,可以更改所示视频的 url。

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?我怎样才能做到这一点?

I think you should use WebSockets ( https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications ).我认为您应该使用 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.客户端将侦听更改并更改组件内部的 state。

I found an easy way using Firebase.我找到了一种使用 Firebase 的简单方法。Get realtime updates with Cloud Firestore.使用 Cloud Firestore 获取实时更新。

onSnapshot() function onSnapshot() function

You can listen to a document with the onSnapshot() method.您可以使用 onSnapshot() 方法收听文档。 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.然后,每次内容更改时,另一个调用会更新文档快照。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在不刷新页面的情况下更改路由和内容? (机器人友好) - How to change route and content without page refresh? (robot friendly) 更改内容大小时无需刷新页面? - change content on resize without page refresh? 当至少1个用户触发事件而不刷新页面时,更改所有用户页面中的内容 - change content in all users pages when at least 1 user triggers event without page refresh 如何在不重新加载页面的情况下刷新div内容 - how to refresh the div content without the page reloads 如何在不重新加载页面的情况下刷新内容(愿望清单)? - How to refresh content (wishlist) without reloading the page? 通过单击锚,codeigniter更改内容而不刷新页面 - codeigniter change content without refresh page by clicking anchor 正文内容必须更新而无需更改页眉和页脚,也不能刷新页面 - body content has to be update without header and footer change and no page refresh 如何在不刷新页面的情况下单击菜单栏来更改div内容 - how we can change the div content by clicking on menu bar without page refresh 更改页面并更改 URL 不刷新并在刷新后保留内容,如 ReactJS 网站 - Change page and change URL without refresh and keep content after refresh , like ReactJS website 如何在页面上获取新内容,而无需刷新页面 - How to get new content on the page, without a page refresh
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM