Question

我在一个小的React应用程序中包含了socket.io，并在“componentWillMount”中设置了所有侦听器，如下所示。

componentWillMount() {  
    const socket = io();

    socket.on('update', function(newDataPoint) {
        console.log("Client updating!");
        this.setState({
            count: newDataPoint.count,
            temperature: newDataPoint.temperature,
            humidity: newDataPoint.humidity,
            pressure: newDataPoint.pressure
        }); 
    }.bind(this));      
}

在服务器端，我有这个：

io.on('connection', function(socket) {
    const pulse = setInterval(function() {
        console.log("From server."); 
        io.emit('update', {
            temperature: Math.floor(Math.random() * 10 + 70),
            count: Math.floor(Math.random() * 300) + 5000, 
            humidity: Math.floor(Math.random() * 5) + 30,
            pressure: Math.floor(Math.random() * 3) + 29
        });
    }, 1000);

    socket.on('disconnect', function() {
        clearInterval(pulse);
    });
});

当我只打开一个应用程序实例时，它可以正常工作，但有两个似乎每秒更新两次，然后是三次，三次等等.ssole.logs也显示了这一点。我认为这是因为与服务器形成了新的连接，但我不确定如何修复它。

对socket.io来说还是一个新手，所以欢迎任何帮助。非常感谢！

编辑：我通过删除连接来修复它，但是如何在套接字断开连接上执行操作？

Answer 1

您正在每个传入连接上创建一个计时器。它只需要执行一次。

var connected = 0;

const pulse = setInterval(function() {
    console.log("From server."); 
    if(connected > 0) {
        io.emit('update', {
            temperature: Math.floor(Math.random() * 10 + 70),
            count: Math.floor(Math.random() * 300) + 5000, 
            humidity: Math.floor(Math.random() * 5) + 30,
            pressure: Math.floor(Math.random() * 3) + 29
        }
    });

}, 1000);

io.on('connection', function(socket) {
    connected++;
    socket.on('disconnect', function() {
        connected--;
    });
});

Socket.io多次更新

1 个答案: