javascript - example - Transmita los contenidos de cada archivo usando sockets web y ReactJs
socket javascript (1)
Estoy tratando de leer los archivos de un directorio y usar el socket tengo que renderizar el nombre del archivo y los datos del archivo usando React.
esto es lo que hice:
Servidor:
var files = fs.readdirSync(currentPath);
for (var i in files) {
(function(j){
var currentFile = currentPath + ''/'' + files[j];
var fileName = files[j];
var stats = fs.statSync(currentFile);
if (stats.isFile()) {
fs.readFile(currentFile, function (err, data) {
if (err)
throw err;
if (data){
var fileAndData=currentFile+" "+data.toString(''utf8'')
io.emit(''file data'',fileAndData);
console.log("file name and file data ***",currentFile+data.toString(''utf8''));
}
});
}
else if (stats.isDirectory()) {
traverseFileSystem(currentFile);
}
}
)( i );
}
cliente: componente principal:
class FileData extends Component{
constructor(props) {
super(props);
this.state = {
filedata:null,
filename:null,
data:[]
}
}
componentDidMount() {
socket.on(''file data'', function(msg){
this.state.data.push(msg);
// this.setState({filename:msg})
}.bind(this));
}
render(){
return(<div>
<DataCard data={this.state.data}/>
</div>);
}
}
ReactDOM.render(
<FileData/>,document.getElementById(''messages'')
);
cliente: componente infantil
constructor(props) {
super(props);
this.state={data:this.props.data}
}
render(){
console.log("array",Array.isArray(this.state.data))
console.log("array length",this.state.data.length)
console.log("array is ==>",this.state.data)
return(
<MuiThemeProvider>
</MuiThemeProvider>);
}
Quiero mostrar los datos y el nombre del archivo y los datos del archivo usando el mapa. Pero cuando estoy consolando los datos recibidos en el componente secundario, la longitud de la matriz es Cero. Aquí está el
console result :
array true
array length 0
array is ==> Array[0]0: "/vagrant/assignment/server/data//file 1.txt hello from file 1."1: "/vagrant/assignment/server/data//file 2.txt hello from file 2."length: 2__proto__: Array[0]
Por qué la 3ª consola muestra 2 datos si su longitud es cero.
No puede mutar el estado haciendo this.state.data.push(msg);
Tratar
var data = this.state.data;
data.push(msg);
this.setState({data: data});