用响应连接套接字io，无法获取数据

debugcn 发表于 Dev

织物

我正在尝试从React连接一个组件，以通过socket.io通过实时更新从服务器获取一些数据

在我的快递服务器中，我有以下内容：（部分但相关的部分）

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

然后，我在客户端有一个助手api.js文件：

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 }

然后，我将此方法导入我的react组件中：

import { subscribeToTimer } from './api';

然后，我创建一个状态并尝试更新它：

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

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

在服务器端，我得到控制台日志：

client is subscribing to timer with interval 1000

在客户端它console.logs：

'no timestamp yet'

我没有从套接字获取更新。知道我在做什么错吗？我正在关注一个教程，并将其合并到我的react项目中。

索艾尔·阿什拉夫（Sohail Ashraf）

传递tstamp给setTimeStamp函数，您只是传递函数的引用。

尝试这个。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。