Send data from server back to client using Socket.io and React

Question

I have the following senario where I would like to send a boolean value back to my component in React. I am able to emit and call my method inside my server.js, however I can't figure out how to send data back once it executes.

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 (react)

...

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


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

}

Msar · Accepted Answer · 2017-03-12 13:16:06Z

2

First, in your fetch() function, you've listened to your connection once more. Second, I think you will need to add a listener on your component. e.g.

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); 
  });

});

Component:

    ...

    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>
        )    
    }

answered Mar 12, 2017 at 13:16

Msar

5095 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user992731 Over a year ago

I had to reconfig something in my server.js that I didnt post. That worked however, thank you

Collectives™ on Stack Overflow

Send data from server back to client using Socket.io and React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related