Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Socket.io firing multiple events

Socket.io seems to be firing multiple messages exponentially, here is an example I'm running that causes the issue.

Client side:

<html>
<head>
<script type="text/javascript" src="../../js/jquery191.min.js"></script>
<script type="text/javascript" src="http://192.168.1.2:8887/socket.io/socket.io.js"></script>
</head>

<body>

<button>Click Me!</button>

<script type="text/javascript">
$(document).ready(function(){
var socket = io.connect('http://192.168.1.2:8887');

$("button").click(function(){

    console.log("Emitting test_parent");
    socket.emit('test_parent');

    socket.on('test_parent_server', function(data){
        console.log("Handling test_parent_server");


        console.log("Emitting test_child");
        socket.emit('test_child');

        socket.on('test_child_server', function(ing){
            console.log("Handling test_child_server");

        });

    });
});
});
</script>
</body>
</html>

Server side:

socket.on("test_parent", function(){
    socket.emit("test_parent_server", { data : " " });
});

socket.on("test_child", function(){
    socket.emit("test_child_server", { data : " " });
});

For some reason every time the button is clicked the events get fired multiple times, increasing exponentially. I've tried to pinpoint what the heck is going on but no luck debugging it or searching online.

like image 289
Joseph Shering Avatar asked Jun 12 '13 03:06

Joseph Shering


1 Answers

Every time the click handler is called, it attaches additional event listeners to the socket. The listeners you attached on the previous clicks remain active. You either need to start using removeListener or removeAllListeners to remove old listeners, or you need to move the listener code outside the click handler so that it doesn't get called multiple times.

For example:

$("button").click(function() {
    console.log("Emitting test_parent");
    socket.emit('test_parent');
});

socket.on('test_parent_server', function(data) {
    console.log("Handling test_parent_server");

    console.log("Emitting test_child");
    socket.emit('test_child');
});

socket.on('test_child_server', function(ing) {
    console.log("Handling test_child_server");
});
like image 62
Bret Copeland Avatar answered Oct 19 '22 16:10

Bret Copeland