Asynchronous socket.io javascript callback not working

Question

Asynchronous socket.io javascript callback not working

I need help making my javascript asynchronous because I'm querying from a database with node. I'm using node.js and socket.io. The code works if I use setTimeout() functions, but I want to make my code more reliable so I'm trying to implement callbacks. However, I don't know how to use "socket.on()" properly in callback functions. I think the problem is that I'm nesting socket.on calls and the second "socket.on()" call doesn't execute. Any help would be greatly appreciated, thanks.

/*server side*/
socket.emit(variable1);//not important
socket.emit(variable2);//not important
//code above isn't important, I just wanted to show how data is used from my queries



/*client side*/
var socket = io.connect('123.456.789.123:3000');
var data = " ";//data I need to pass around


   socket1(data, function(){
        socket2(data)
   });


   function socket1(data, callback) {
        socket.on('variable1', function (data)  {
            console.log("1");
            callback();
        }, callback)
    }

    function socket2(data) {
        console.log("2");
        socket.on('variable2', function (data) {
            console.log("3");
        })
    }

The output is "12" and should be "123"

javascript
node.js
asynchronous
callback
socket.io

Answer 1

Think of the asynchronous on function calls as a registration process for registering handlers for when data is received as a push from the server.

function registerVariable1(callback) {

    socket.on('variable1', function (data)  {
        console.log("1");
        callback(data);
    });
}

function registerVariable2(callback) {

    socket.on('variable2', function (data)  {
        console.log("2");
        callback(data);
    });
}

On the server, when you emit data to the clients, use the name of the handler as the first argument, as described here.

socket.emit('variable1', {data: 1});
socket.emit('variable2', {data: 2});

This will send the data down to the correct handler.

With that said, you may be thinking of this wrong. Don't think of each handler as being specific to a single operation. Think of this as registering a listener with the server so that the server can continue to send data back through to that handler. Both registerVariable1 and registerVariable2 only need to be called one time, and then your server can push data back to each handler N times.

To register the handlers, you simply pass in a callback function into each:

registerVariable1(function(data) {
    console.log('This is the first handler');
    console.log(data);
    // do stuff for this handler here...
});

registerVariable2(function(data) {
    console.log('This is the second handler');
    console.log(data);
    // do stuff for this handler here...
});

Now, if the server makes the following three calls:

socket.emit('variable1', {data: 123});
socket.emit('variable2', {data: 24});
socket.emit('variable1', {data: 22});

You might see the following output:

1
This is the first handler
{data: 123}
2
This is the second handler
{data: 24}
1
This is the first handler
{data: 22}

Order may not be guaranteed; however, since you're dealing with the network. But hopefully this helps you see how this works.