connecting to node websocket on multiple devices stops update - node.js

Question

So, I'm learning about websockets...the below code is from a tutorial which I have been playing with..when I connect to it via a react app, the date updates as expected each second. when I then connect to it using another browser tab or my mobile, the newest instance updates as expected, however the older ones now stop.
I would have expected the setInterval to clear and restart, emitting to all devices so they update together.
Can someone advise me please? If I comment out the clear intervals, it works as expected however I know this is a no no as it will just create more and more interval events..
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const port = process.env.PORT || 4001;
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server);
let interval;
io.on("connection", (socket) => {
console.log("New client connected");
if (interval) {
clearInterval(interval);
}
interval = setInterval(() => getApiAndEmit(socket), 1000);
socket.on("disconnect", () => {
console.log("Client disconnected");
clearInterval(interval);
});
});
const getApiAndEmit = socket => {
const response = new Date();
// Emitting a new message. Will be consumed by the client
socket.emit("Test1", response);
};
server.listen(port, () => console.log(`Listening on port ${port}`));

Answer 1

Hi #Lawrence Ferguson,
So what we are doing here is instead of using a single internval instance, we are creatings intervals by socket's uniq id.
By the way, passing socket object around is really not that good :)
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const port = process.env.PORT || 4001;
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server);
let intervals = {};
io.on("connection", (socket) => {
console.log("New client connected");
// this is probably never gonna called,
// cause you will get another socket.id when you connect again
// So :D
if (intervals && intervals[socket.id]) {
clearInterval(intervals[socket.id]);
}
// instead of using a outside function
// intervals[socket.id] = setInterval(() => getApiAndEmit(socket), 1000);
// I'm always trying to use an internal val
intervals[socket.id] = setInterval(() => {
socket.emit("Test1", new Date());
}, 1000);
// But obv how ever you want to use :)
socket.on("disconnect", () => {
console.log("Client disconnected");
clearInterval(intervals[socket.id]);
});
});
const getApiAndEmit = socket => {
const response = new Date();
// Emitting a new message. Will be consumed by the client
socket.emit("Test1", response);
};
server.listen(port, () => console.log(`Listening on port ${port}`));