2016-07-15 73 views
0

我在一個小的React應用程序中包含了socket.io,並在「componentWillMount」中設置了所有偵聽器,如下所示。Socket.io多次更新

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

當我有應用程序的只有一個實例中打開它工作正常,但有兩點似乎被更新兩次每一秒,然後三,三次等。console.logs也顯示了這一點。我認爲這是因爲與服務器形成了新的連接,但我不知道如何解決它。

對於socket.io還是很新穎的,所以歡迎任何幫助。非常感謝!

編輯:我通過在連接上刪除來修復它,但是如何在套接字斷開連接上做些事情?

+0

不應該在服務器端使用'socket.emit()'?您每次客戶端連接時都會創建一個計時器,因此您可以使用一個計時器爲每個客戶端發送數據.4 – thst

+0

如果我希望每個連接都具有相同的數據,那麼它就不會是io.emit?我認爲socket.emit會爲每個套接字產生新的數據,但我可能是錯誤的 –

+0

,那麼你必須在連接功能之外創建定時器,或者確保它沒有被創建兩次。 – thst

回答

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