8

Eu possuo esse código em JavaScript que representa minha conexão com o servidor WebSockets, onde ele recebe e envia mensagens para o servidor:

var connection = new WebSocket('ws://127.0.0.1:2333');

connection.onopen = function () { // abriu a conexão com o servidor 
};

connection.onmessage = function (e) { // recebe do servidor
};

function sendToServer(data) { // envia mensagens para o servidor
   connection.send(data)
}

Como eu faço para que mensagens não sejam enviadas e recebidas simultaneamente, por exemplo, se o portão de entrada onmessage estiver ocupado recebendo mensagens o portão de saida sendToServer() não vai enviar nada até que seja concluida toda as entradas.. Com esses três critérios:

  • Nenhuma mensagem deve ser perdida
  • Tudo tem que ocorrer automaticamente
  • A Sequencia deve ser respeitada

Quando digo que nenhuma mensagem deve ser perdida eu digo que, se uma mensagem do servidor vier enquanto uma mensagem de saída estiver sendo trabalhada ela vai ser "salva" e ser "trabalhada" assim que possível.

Quando digo que tudo tem que ocorrer automaticamente me refiro que nada pode ficar parado, se uma mensagem foi salva para ser executada assim que possível, ela tem que ser executada assim que possível, ela nao pode ser "esquecida"..

E finalmente a sequencia, a sequencia deve ser respeitada, mas a sequencia em que chega/sai mensagens dentro do script. Supondo que uma mensagem A, vinda do servidor chegue e depois enquanto a mensagem A é "trabalhada" chega outra mensagem do servidor nomeada B e depois de B chega outra do servidor chamada C e enquanto todas essas, (A, B e C), aguardam na fila para serem "trabalhadas" o usuário ordena que outras três mensagens devem ser enviadas ao servidor, primeiro D, depois E e depois F, nessa ordem respectivamente.

Supondo tudo isso, a sequencia final de saída/entrada ou "trabalho" desse script deve ser:

A -> B -> C -> D -> E -> F

eu penso nisso como um aeroporto.. mas é algo meio complexo para mim. Eu tentei aplicar o semaphore mas não obtive êxito então venho recorrer..

"trabalho" = enviar/recebimento pro/do servidor

7
  • Em que situações isso está ocorrendo? JavaScript é single-threaded por padrão (exceto em alguns casos degenerados, ou se você usar web workers), de modo que quando um dos códigos acima começar a executar os outros não vão começar até que o primeiro tenha terminado. Ou seu fluxo de código é outro? Tipo, há vários recebimentos em onmessage, e só quando algo em especial acontecer (uma mensagem de "fim das entradas" por exemplo) é que o sendToServer pode executar. É algo desse tipo?
    – mgibsonbr
    Commented 24/07/2015 às 17:48
  • Vendo a resposta do Edney Pitta me surgiu uma outra dúvida: quando você envia uma mensagem você precisa esperar uma resposta antes de enviar outra? Ou pode enviar várias em sequência, desde que o sistema esteja no estado apropriado? Se precisar esperar, minha resposta abaixo não é suficiente, precisaria ser adaptada.
    – mgibsonbr
    Commented 24/07/2015 às 18:03
  • @mgibsonbr quando mensagens são recebidas eles passa por códigos normais mesmo, nada de webworkers por que os códigos são simples nada de execuções complexas que demorem muito tempo (que passe de 1 segundo). Se uma mensagem for recebida agora, as portas devem ser fechadas (de recebimento e de "enviamento") até que esse fluxo seja tratado, depois que ele for tratado ele pode continuar a receber mensagens e enviar, e também uma mensagem não deve ser enviada ao mesmo tempo que recebe uma mensagem. Tem que ser um de cada vez pra não ocasionar conflito em outras coisas..
    – Elaine
    Commented 24/07/2015 às 18:13
  • @mgibsonbr não, não é necessário esperar uma resposta do servidor.. pode continuar normalmente.. caso o servidor envie uma resposta ela deve ser tratada na forma que te falei..
    – Elaine
    Commented 24/07/2015 às 18:15
  • @mgibsonbr mas se for legal colocar meu código que trata o recebimento/enviamento dentro de um webworker eu posso por.
    – Elaine
    Commented 24/07/2015 às 18:21

2 Respostas 2

10

Você precisa de uma fila: sempre que o sendToServer for chamado, coloque os dados na fila em vez de enviá-los direto. Ao final, das duas uma:

  • Se o sistema estiver num estado que permita que as mensagens sejam enviadas, envie-as de uma vez (só deve ter uma);
  • Caso contrário não envie.

Quando o sistema mudar do estado "bloqueado" pro estado "disponível", envie tudo o que estiver na fila (pra não ter que esperar a próxima chamada de sendToServer.

var connection = new WebSocket('ws://127.0.0.1:2333');

    var fila = [];
    function esvaziaFila() {
        while ( fila.length > 0 ) {
            if ( !podeProcessar )
                return;
          
            var proximo = fila.shift();
            if ( proximo.envio )
                connection.send(proximo.dados);
            if ( proximo.recebimento )
                processar(proximo.evento);
        }
    }
    var podeProcessar = false;
    
    connection.onopen = function () { // abriu a conexão com o servidor 
        document.body.innerHTML += "<pre>Abriu a conexão</pre>";
        podeProcessar = true;
    };
    
    connection.onerror = function (error) { // ocorreu um erro na comunicação
    };
    
    connection.onmessage = function (e) { // recebe do servidor
        rec("cliente", e);
        fila.push({ recebimento:true, evento:e });
        esvaziaFila();
        
    };

    function processar(evento) { // recebe mensagens do servidor
      document.body.innerHTML += "<pre>Cliente vai processar " + JSON.stringify(evento) + "; não faz mais nada até estar pronto!";
      podeProcessar = false;
      
      tarefaDemorada(evento);
    }
    
    function sendToServer(data) { // envia mensagens para o servidor
       fila.push({envio:true, dados:data});
       esvaziaFila();
    }

/********** Mockups para testar ***************/
function rec(classe, dados) {
    document.body.innerHTML += "<pre class='" + classe + "'>" + classe + " recebeu: " + JSON.stringify(dados) + "</pre>";
}
function env(classe, dados) {
    document.body.innerHTML += "<pre class='" + classe + "'>" + classe + " enviou: " + JSON.stringify(dados) + "</pre>";
}

function WebSocket() {
  this.send = function(data) {
    rec("servidor", data);
  }
  // Manda algumas mensagens no futuro
  var self = this;
  setTimeout(function() { self.onopen() }, 500);
  setTimeout(function() { env("servidor","A"); self.onmessage("A") }, 2000);
  setTimeout(function() { env("servidor","B"); self.onmessage("B") }, 4000);
  setTimeout(function() { env("servidor","C"); self.onmessage("C") }, 6000);
}

setTimeout(function() { env("cliente","D"); sendToServer("D"); }, 8000);
setTimeout(function() { env("cliente","E"); sendToServer("E"); }, 10000);

function tarefaDemorada(evento) {
    setTimeout(function() {
        document.body.innerHTML += "<pre>Terminou de processar " + JSON.stringify(evento) + "; pode processar o resto.";
        podeProcessar = true;
        esvaziaFila();
    }, evento == "B" ? 5500 : 1250);
}
.servidor {
  color: blue;
}

.cliente {
  color: red;
}

Alternativa: grafo de dependências

Se você possui um fluxo complexo de envio/recebimento, uma maneira de gerenciar essa complexidade é criando um grafo de dependências entre suas mensagens, tanto de entrada quanto de saída. Sugiro isso - e não uma ordem total - pois é complicado dizer que "o evento A ocorreu antes do evento B" quando A se originou numa máquina (ex.: o cliente) e B em outra (ex.: o servidor)[1].

Um exemplo que combina a técnica da fila com um grafo de dependências seria o seguinte:

var fila = [];
function processaFila() {
    while ( fila.length > 0 ) {
        var proximo = fila[fila.length-1];

        if ( !proximo.pronto ) // Se está aguardando outro processamento
            break;             // Não processa mais nada

        fila.pop();
        if ( proximo.envio ) // Se está pronta pra ser enviada
             connection.send(proximo.dados);
        if ( proximo.recebimento ) // Se foi recebida e tem de ser processada
            proximo.processar(proximo.evento);
    }
}

function incluiNaFila(job) {
    var i = fila.length;
    while ( i > 0 ) {
        // Se o próximo da fila precisa ser executado depois da tarefa atual
        if ( dependeDe(fila[i-1], job) )
            break; // Coloca a atual no começo da fila

        // Senão, coloca a atual depois do primeiro da fila
        fila[i] = fila[i-1];
        i--; // Repete a lógica pro segundo da fila, etc
    }
    fila[i] = job;
}

connection.onmessage = function (e) {
    incluiNaFila({
        recebimento:true, pronto:true,
        evento:e,
        processar:function(e) { ... }, // Função que processa a entrada
        ... // outros campos que determinam a dependência
    });
    processaFila();
}

function sendToServer(data) {
    incluiNaFila({
        envio: true, pronto:true,
        dados: data,
        ... // Outros campos que determinam a dependência
    });
    processarFila();
}

function dependeDe(tarefaA, tarefaB) {
    /* Aqui entra sua lógica específica.
       Ela deve retornar false se a tarefa B pode ser executada depois
       de A (B é uma tarefa mais nova que A), ou true se A precisa
       esperar B estar pronta pra executar.
    */
}

Após uma rápida leitura no seu exemplo no pastebin (nos comentários), eu sugeriria algo assim como ponto de partida:

var sequencial = 0; // Cada mensagem de iniciativa do servidor ou do cliente
                    // recebe um id sequencial; mensagens que são respostas
                    // a outra mensagem recebem o mesmo id da mensagem original.

connection.onmessage = function(e) {
    var id = sequencial++;
    incluiNaFila({
        recebimento:true,
        evento:e,
        processar:function(e) {
            var aguradando = {
                recebimento:true, processar:function(){},
                pronto:false, id:id
            }

            incluiNaFila(aguardando);
            funcaoquetrataamensagem(.......).then(function() {
                aguardando.pronto = true;
                processaFila();
            });
        },
        id:id
    });
    processaFila();
}

// Envia uma mensagem, sem impor nenhuma ordem específica (iniciativa do cliente)
function sendToServer(data) {
    incluiNaFila({
        envio: true, pronto:true,
        dados: data,
        id:sequencial++
    });
    processarFila();        
}

// Envia uma mensagem como resposta a uma mensagem recebida
function respondToServer(idMensagemOriginal, data) {
    incluiNaFila({
        envio: true, pronto:true,
        dados: data,
        id:idMensagemOriginal+1 // Garante que só será enviada quando a
                                // mensagem original tiver sido processada
    });
    processarFila();        
}

function dependeDe(a, b) {
    return ( a.id > b.id );
}

Nesse exemplo as mensagens recebidas e as mensagens enviadas por iniciativa do cliente serão processadas na ordem (fila), enquanto as mensagens que são resposta a uma outra mensagem serão processadas só depois que a mensagem original tiver sido totalmente processada. Qualquer mensagem que precise "fazer mais coisas" antes de terminar seu processamento bloqueia toda a fila - ao inserir na mesma uma nova tarefa aguardando com o mesmo id, e consequentemente a mesma prioridade, da mensagem original.


[1]: Há várias tentativas de solução pra esse problema, mas nenhuma perfeita. Escolher um lado da comunicação para ser autoritativo pode causar starvation no outro; A técnica Operational Tranform é promisora, mas não se aplica a todos os casos; Em alguns cenários (ex.: a rede BitCoin), o proof of work pode ser usado para reduzir o problema, mas não o elimina totalmente. Etc.

4
  • Oi, eu atualizei a pergunta tentando explicar o máximo que eu conseguir. Eu executei seu script para testar de forma bruta e então eu eu criei duas funções SR para simular um recebimento e SE para simular um envio para o servidor. No onmessage eu coloquei uma função que leva tempo, pra ver se a fila realmente funcionava. O Problema foi que ele agrupou os acontecimentos na fila (na hora de executar) e deu preferencia aos recebimentos, vindo do SR. Veja o código pastebin.com/PpneGPBm (desculpe nao usar o jsfiddle, ele não funciona adequadamente em minha máquina)
    – Elaine
    Commented 26/07/2015 às 0:45
  • só pra ressaltar que nesse teste eu usei um servidor de testes, que envia uma mensagem assim que o usuário se conecta, para testar a fila. Pode ver esse print do que eu disse: s18.postimg.org/p10kn9bnd/image.png
    – Elaine
    Commented 26/07/2015 às 0:55
  • Olha, não dá pra ajudar a depurar um programa sem saber o que ele está fazendo... Só com seu código no pastebin, mas incompleto, sem a parte do servidor, eu não faço ideia do que possa estar acontecendo de errado. Já tentou criar um Exemplo Mínimo, Completo e Verificável, que não precise de um servidor, que as pessoas possam simplesmente executar e ver o que está acontecendo? Eu vou editar minha resposta colocando meu código no StackSnippets, de modo a ficar fácil de testar. Vai demorar um pouquinho, eu te notifico por comentário assim que terminar, ok?
    – mgibsonbr
    Commented 26/07/2015 às 1:00
  • @Elaine Pronto! Dá uma olhada no primeiro exemplo (o que usa fila, sem essa questão das dependências) e veja se ela faz o que você quer. As mensagens foram "trabalhadas" na ordem, nenhuma foi perdida. O ponto chave é bloquear o tratamento da fila (podeProcessar = false;) quando um trabalho começar, e liberar esse tratamento e esvaziar a fila (podeProcessar = true; esvaziarFila();) quando o trabalho terminar - não importa se isso ocorreu no próprio código, em resposta a um evento, num timeout, no then de uma promessa, etc. Tente adaptar isso ao seu código real.
    – mgibsonbr
    Commented 26/07/2015 às 1:36
2

Não sei se o objeto do WebSocket tem algum controle do tipo, mas você pode controlar isso manualmente

var connection = new WebSocket('ws://127.0.0.1:2333');
var available = true;

connection.onopen = function () { // abriu a conexão com o servidor 
    // mantém available = false
};

connection.onerror = function (error) { // ocorreu um erro na comunicação
    available = true;
};

connection.onmessage = function (e) { // recebe do servidor
    processa(e);
    available = true;
};

function sendToServer(data) { // envia mensagens para o servidor 
    var interval = setInterval(function () {
        if (available) {
            clearInterval(interval);
            available = false;
            connection.send(data);
        }
    }, 1000)
}
3
  • 1
    Eu acho muito perigoso isso. Se o sent for false enquanto forem feitas muitas chamadas à função sendToServer(), seriam criados muitos while rodando infinitamente. Pode facilmente travar o navegador até porque o while não foi feito pra isso. A sua idéia é boa mas perigosa. Mas o while podia ser trocado por um setInterval por exemplo, o que preveniria esse problema. Commented 24/07/2015 às 17:37
  • @DontVoteMeDown Bem apontado, tem razão Commented 24/07/2015 às 17:51
  • Para uma única mensagem, isso funciona, mas se tiver várias esse código fará com que elas sejam enviadas [potencialmente] fora de ordem.
    – mgibsonbr
    Commented 24/07/2015 às 17:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .