Digamos que tienes un componente que muestra una línea de tiempo similar a Twitter, y queremos mostrar los datos enviados al servidor en tiempo real.
El componente se vería de la siguiente manera.
<pre>12345678910111213141516171819202122232425classTimelineextendsComponent{constructor(props){super(props);this.state={ timeline:[]}}componentDidMount(){esto. setState({timeline:this.props.initialData})}render(){retorno(<divclassName="timeline-contenedor">{esto. state.timeline.map(post=>(<divclassName="post"key={post.id}><UserInfouser={post. user}><pclassName="feed">{post.feed}</p></div> ))} </div> ) }}</pre>
jsx
Simple, por ahora… su único trabajo es mostrar los datos iniciales obtenidos por la aplicación. Más adelante, esta guía explicará cómo modificar el componente para mostrar nuevos datos.
El componente es fundamental para mostrar el avatar y el nombre del usuario'tico.
El componente será envuelto por el componente, que recogerá los datos iniciales y los pasará como el propulsor de datos iniciales.
<pre>12345678910111213141516171819classAppextendsComponent{constructor(props){super(props);this.state={ initialData:[]};}asynccomponentDidMount(){const res =awaitfetch(SERVER_URL);const data =await res. json();this.setState({ initialData: data });}render(){if(initialData.length==0)return<Loader> return <TimelineinitialData={this.state.initialData}/> }}</pre>
jsx
Hasta que los datos se obtengan del servidor, el componente devolverá un componente. Para obtener los datos del servidor, este ejemplo utiliza el método fetch(), pero también puede utilizar axios. Ambos sirven para el mismo propósito.(Consulta esta guía sobre Axios versus Fetch para aprender más)
En este momento, el componente sólo está buscando y pasando los datos iniciales al componente. El siguiente paso es actualizar el componente para solicitar que el servidor compruebe periódicamente si hay nuevos datos mediante el método setInterval(). Este es un patrón pseudo-real-time, pero es crucial para entender cómo manejar los nuevos datos antes de ir al tiempo real. Más adelante en esta Guía, se usará Sarus para obtener los datos en tiempo real.
<pre>1234567891011121314151617181920212223242526272829303132333435claseAppextendsComponente{constructor(es) {super(es))};esto. state={ initialData:[], newData:[]};}asynccomponentDidMount(){const res =awaitfetch(SERVER_URL);const data =await res. json();this.setState({ initialData: data });this.timer=setInterval(()=>{let lastId =null;const{initialData, newData}=this.state;if(initialData.length>0){if(newData. length>0) lastId = newData[0].idelse lastId = initialData[0].id}const res =awaitfetch(`${SERVER_URL}/${lastId}`);const data =await res.json();this.setState({ newData: data });},8000);}componentWillUnmount(){clearInterval(this. temporizador);}render(){if(initialData.length==0)return<Cargador> return <TimelineinitialData={this.state.initialData}newData={this.state.newData}/> }}</pre>
jsx
Este ejemplo obtendrá los nuevos datos cada ocho segundos. Considerando que este servidor tiene un punto final que devolverá los datos después de un ID específico, primero averigua el último ID en la línea de tiempo y pásalo como un parámetro de ruta al punto final del servidor.