如何在 javascript 中使用 socket.io 管理多个发射事件

Question

I've made a demo app to understand how socket.io 'emit' works. In client file I have defined a function that emit some value to server and this function is call in loop 5 times and server job is to return that value back to client.

My web client: client.html

    var socket = io('http://127.0.0.1:8586', {transports: ['websocket']});
        
    function test2( dataSend ){
        console.log("FUNCTION 'test2()' loop test - > emit to SRV: " + dataSend);
        
        socket.emit('emitFromClient', dataSend);
        
        socket.on('feedback_emitFromClient', function (data) { // listen to news event raised by the server
            console.log("Received data from server: " + JSON.stringify(data)); //+ " || typeof: " + typeof data["result"]);                     
        });
    }
    
    for (var i = 1; i <= 5; i++)
        test2(i);

NodeJS server app: server.js

 const express = require('express');
 const app = express();
 const http = require('http');
 const server = http.createServer(app);

app.use(express.static('socketTest1'));

const io = require('socket.io')(server);//, { origins: '*:*'});

io.sockets.on('connection', function(socket){
  console.log('a user connected!');
  
    var socketId = socket.id;
    var clientIp = socket.request.connection.remoteAddress;

    console.log("clientIp: " + clientIp + " || socketId: " + socketId);
    
    
     socket.on('emitFromClient', function (data) { 
        console.log("debug -  received event (emitFromClient) from client, socket id: "  + socket.id  + " || value: " + data );
        let ts = Date.now();
        console.log("debug -  send data from SRV to client ->  data: " + data);
        socket.emit('feedback_emitFromClient', { result: Math.floor(ts/1000), data: data }); // Send data to client 
     }); 

server.listen(8586, '127.0.0.1', function(){
  console.log('listening on *:8586');
});

In actual state I've received in console client something like that:

First, all emit events are done and then are displayed all data from server
  > EMIT event 1 from CLIENT, value: 1
  > EMIT event 2 from CLIENT, value: 2
  ..................................
  > EMIT event 5 from CLIENT, value: 5

  < Received data from server, value: 1
  < Received data from server, value: 2
  ........................................
  < Received data from server, value: 5

I want to modified this demo to work like this, after every single emit event to received an answer from server

 > EMIT event 1 from CLIENT, value: 1
 < Received data from server, value: 1

 > EMIT event 2 from CLIENT, value: 2
 < Received data from server, value: 2

Can anyone explain to me what I did wrong?

Answer 1

You did nothing wrong, you just expect a wrong thing. You send all data at the same time

for (var i = 1; i <= 5; i++)
    test2(i);

Thats why you see the log

  > EMIT event 1 from CLIENT, value: 1
  > EMIT event 2 from CLIENT, value: 2
  ..................................
  > EMIT event 5 from CLIENT, value: 5

Because you are not waiting to the response to send the next.

If you want to wait for the response you should write something like:

var testTosend;
var testSent;
function emit(testSent){
    console.log("FUNCTION 'test2()' loop test - > emit to SRV: " + testSent);
    socket.emit('emitFromClient', testSent);
    testSent++;
}

function test2( dataSend , times){
    testTosend=times;
    emit(dataSend)
    socket.on('feedback_emitFromClient', function (data) { // listen to news event raised by the server
        if(testTosend>testSent) emit(dataSend);
        console.log("Received data from server: " + JSON.stringify(data)); //+ " || typeof: " + typeof data["result"]);                     
    });
}


test2(5);

But a better way to do this is to save a timestamp and order all the messages dependending of this date before showing them.

Synchrony is complex =)