使用Socket.io和React將數據從服務器發送回客戶端

Question

我有以下senario，我想發送一個布爾值給我的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> 
     )  
    }