Connecting socket io with react, not able to get data

Question

I'm attempting to connect a component from React to get some data from the server with live updates via socket.io

In my express server I have the following: (partial but the relevant part)

const apiPort = 3000
const server = app.listen(apiPort, () => console.log(`Server running on port ${apiPort}`))

io.on('connection', (client) => {
  client.on('subscribeToTimer', (interval) => {
    console.log('client is subscribing to timer with interval', interval);
    setInterval(() => {
      client.emit('timer', new Date());
    }, interval);
  });
});

io.listen(server);
console.log('listening on port ', apiPort);

I then have a helper api.js file on the client side:

import openSocket from 'socket.io-client';
const socket = openSocket('http://localhost:3000');

function subscribeToTimer(cb) {
  socket.on('timer', timestamp => cb(null, timestamp));
  socket.emit('subscribeToTimer', 1000);
}

export { subscribeToTimer }

I then import this method into my react component:

import { subscribeToTimer } from './api';

I then create a state and attempt to update it:

const [timestamp, setTimeStamp] = useState('no timestamp yet')

  useEffect(() => {
    subscribeToTimer((err, tstamp) => setTimeStamp);
    console.log(timestamp);
  });

On the server side I get the console log:

client is subscribing to timer with interval 1000

On the client side it console.logs:

'no timestamp yet'

I'm not getting the update from the socket. Any idea what I'm doing wrong? I'm following a tutorial and incorporating it into my react project.

Sohail Ashraf · Accepted Answer · 2020-04-09 01:22:59Z

2

Pass the tstamp to the setTimeStamp function, you are just passing the reference of the function.

Try this.

const [timestamp, setTimeStamp] = useState('no timestamp yet')
  useEffect(() => {
    subscribeToTimer((err, tstamp) => setTimeStamp(tstamp));
    console.log(timestamp);
  });

answered Apr 9, 2020 at 1:22

Sohail Ashraf

10.7k3 gold badges31 silver badges43 bronze badges

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

Comments

Carlos Saiz Orteu · Accepted Answer · 2020-04-09 01:22:09Z

1

I believe your problem is here:

useEffect(() => {
    subscribeToTimer((err, tstamp) => setTimeStamp(tstamp));
    console.log(timestamp);
  }

You are not assign8ng anything to your state

answered Apr 9, 2020 at 1:22

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

Connecting socket io with react, not able to get data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related