I'm currently using this code for receiving data from sockets Code:
socket.on('send_image', (message) => {
setImage(message.image)
console.log(message)
})
the server sends data(images from camera) continuously. how to receive it without refreshing? i tried one method that requests data every milliseconds. i don't know whether it is a good way or not
Request every milliseconds code:
useEffect(() => {
const id = setInterval(() => {
socket.on('send_image', (message) => {
setImage(message.image)
console.log(message)
})
}, 10);
return () => clearInterval(id);
}, []);
is there any other way to continuously receive data from sockets?
To update the local state as soon as a send_image message is received, just register the handler in your useEffect.
useEffect(() => {
const handler = (message) => {
setImage(message.image);
console.log(message);
};
socket.on("send_image", handler);
return () => socket.off("send_image", handler); // assuming `.off` deregisters a callback
}, []);