Socket.ioとReactを使用してサーバーからクライアントにデータを返信します

Question

私はReactで自分のコンポーネントにブール値を送り返したいと思う次のシナリオを持っています。 server.js内でメソッドを呼び出して呼び出すことはできますが、実行後にデータを返す方法を理解することはできません。

Server.js：

... 

const io = require('socket.io')(server); 

var fetch =() => { 
    url = 'abc'; 
    request(url, function(error, response, html){ 

    ... 

    fs.writeFile(__dirname + '/data/output.json', JSON.stringify(result, null, 4), function(err){ 
     if(err) { 
     throw err; 
     } else { 
     console.log('File successfully written! - Check your project directory for the output.json file'); 

     io.on('connection', (socket) => { 
      console.log('send data back to component'); 
     }); 
     } 
    }); 
    }) 
} 

io.on('connection', (socket) => { 
    //console.log('a user connected'); 

    socket.on('disconnect',() => { 
    console.log('user disconnected'); 
    }); 

    socket.on('fetchData',() => { 
    fetch(); 
    }); 

}); 

Component.js（反応）

... 

handleClick() { 
    socket.emit('fetchData'); 
    } 


    render() { 
    return (
     <div> 
     <button onClick={(e) => this.handleClick(e)}>Fetch</button> 
     </div> 
    )  

}

Answer 1

まず、あなたのfetch()機能では、あなたがもう一度あなたの接続に耳を傾けてきました。次に、コンポーネントにリスナーを追加する必要があると思います。例えば

Server.js：

var fetch = (socket) => { 
    url = 'abc'; 
    request(url, function(error, response, html){ 

    ... 

    fs.writeFile(__dirname + '/data/output.json', JSON.stringify(result, null, 4), function(err){ 
     if(err) { 
     throw err; 
     } else { 
     console.log('File successfully written! - Check your project directory for the output.json file'); 
     var bool; 
     socket.emit('get-data-back', bool); 
     } 
    }); 
    }) 
} 

io.on('connection', (socket) => { 
    //console.log('a user connected'); 

    socket.on('disconnect',() => { 
    console.log('user disconnected'); 
    }); 

    socket.on('fetchData',() => { 
    fetch(socket); 
    }); 

}); 

コンポーネント：

... 

    componentDidMount() { 
     socket.on('get-data-back', (data) => { 
     console.log(data); 
     }) 
    } 


    handleClick() { 
     socket.emit('fetchData'); 
     } 


     render() { 
     return (
      <div> 
      <button onClick={(e) => this.handleClick(e)}>Fetch</button> 
      </div> 
     )  
    }