我做了一个react应用程序，它可以通过表单收集客户信息，并将其呈现在另一个页面上。目的是让网站在平板电脑上打开，然后在电脑上显示结果。所以当表单在平板电脑上提交时，我希望结果页面上的结果在电脑上自动更新。这有可能在两个不同的设备之间发生吗？
我在表单组件中将表单数据发送到strapi，然后在结果组件中获取结果。我做了一个刷新按钮，用于刷新页面和更新结果。我也尝试过每10秒使用一个setInterval来获取新数据，但是每10秒刷新一次似乎有点不必要。我希望它只在提交新结果时重新呈现，而不是每10秒左右。
1条答案
按热度按时间owfi6suc1#
要在平板电脑上提交表单时使结果页面在计算机上自动更新，需要使用一种称为实时通信的技术。实时通信允许两个或多个设备即时交换数据，而无需刷新或轮询。
在react应用中实现实时通信的一种方法是使用Web套接字。Web套接字是一种在客户端和服务器之间实现双向和持久通信的协议。您可以使用www.example.com等库来简化创建和管理Web套接字的过程。socket.io to simplify the process of creating and managing web sockets.
以下是如何在React应用中通过www.example.com使用Web套接字的概述：socket.io in your react app:
socket.io-client作为依赖项安装到react应用中，并将其导入到组件中。io()并将strapi服务器的URL作为参数来创建套接字示例。socket.emit()发出一个事件，并将数据作为参数传递。socket.on()侦听事件，并使用作为参数接收的数据更新状态。useEffect()挂钩清理套接字连接。有关详细信息，请查看文档。