Why does Socket.io emit empty events at random intervals? - node.js

Question

I have an application that runs on Nodejs and Socket.io
The events 2, 3 seen in the image are empty events that socket.io server keeps emitting at random intervals. What's more annoying is that the time delay between the empty events is crazy, as seen in the picture there was a 19 seconds time delay between 2 and 3. And due to this, the message:delete event that was emitted by socket.io client which was supposed to immediately emit message:deleted, got delayed by 19 seconds!!
What's worse is that while these empty events are emitted, all other socket events originated from socket client are not emitted and they are stuck in limbo until the empty events are out of the way.
I suspect these empty events are socket ping and pong events. Does anyone have any idea why this happens? And how we could prevent this? Or maybe even set a priority for client socket.emit so that regardless of these empty events, the client emitted socket event takes precedence and is fired immediately?
Edit #1
Despite adding { transports : ['websocket'] } the delay was still well over 17 seconds as you can see in this image
Edit #2 - The socket.emit code
The client is made up of a lot of jQuery + vanilla JS + Angular 1.7. The client socket is a factory wrapper
app.factory('socket',['$rootScope', function ($rootScope) {
var socket = io.connect('',{
path: '/socket.io',
transports: ['websocket']
});
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
})
},
disconnect: function(close){
socket.disconnect(close);
},
removeAllListeners: function (eventName, callback) {
socket.removeAllListeners(eventName, function() {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
}
};
}])
And on the controller the `socket.emit' code is as follows
$scope.deleteMessage = function (message) {
socket.emit('message:delete', {
id: message
});
};
I use express + Nodejs so here's the code for initializing the server socket
Server = require('socket.io'),
io = new Server({
path: `/socket.io`,
transports: ['websocket']
});
And the server side socket code listens to the client emit as follows
io.on("connection", async function (socket) {
socket.on("message:delete", function (payload) {
if (props.connectedUsers[socket.userId].info.isAdmin) {
console.log("Received Message Deletion by",
props.connectedUsers[socket.userId].info.name);
if (payload.id == "SYS_MOTD") return;
await Message.remove({
_id: new db.Types.ObjectId(payload.id)
}).exec(function (err, message) {
if (!err) {
console.log("Emit message:deleted");
io.sockets.emit("message:deleted", {
id: payload.id
});
}
});
}
});
});

Answer 1

I think it's normal, according to the Socket.IO documentation:
By default, a long-polling connection is established first, then
upgraded to “better” transports (like WebSocket).
What you can do is to set the connection to use websocket only, it should stop the long-polling and you will receive the messages immediately:
socket = io.connect({transports: ['websocket']});
Update
No need to set the path to /socket.io, it's the default value.
On Client side you can also use:
const socket = io([URL], {
transports: ['websocket']
});
I've noticed you are using async/await with a callback, I would either use async/await or a callback on your server side code, for example:
try {
await Message.remove({
_id: new db.Types.ObjectId(payload.id)
})
console.log("Emit message:deleted");
io.sockets.emit("message:deleted", {
id: payload.id
});
} catch(ex) {
console.log(ex.message);
}