websocket y jquery

Iniciado por EFEX, 15 Noviembre 2013, 05:42 AM

0 Miembros y 1 Visitante están viendo este tema.

EFEX

Hola gente, hacia rato que no pasaba no tengo internet hace como mes y medio... pero estoy haciendo un juego simple y necesito ayuda con algo.
En este caso es un problema que no puedo identificarlo, entenderlo del todo bien, es en la parte del cliente. Aca prepare algo mas simple de la parte del cliente que no encuentro solucion.

Código (html4strict) [Seleccionar]

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
localStorage.lastresponse = 'old';

function init(){
var host = "ws://echo.websocket.org";

socket = new WebSocket(host);
socket.onopen    = function(msg){log("Welcome - status "+this.readyState); };
socket.onmessage = function(msg){
localStorage.lastresponse = msg.data;
log("Received: "+msg.data);
};
socket.onclose   = function(msg){log("Disconnected - status "+this.readyState); };
}

function log(msg){var log = document.getElementById("log"); log.innerHTML+="<br>"+msg; log.scrollTop = log.scrollHeight;}

function send_msg(msg){ log('Sent: '+msg); socket.send(msg); }

$(document).ready(function(){
$('.boton').on('click', function () {
$('.map').unbind().on('click', function (e) {
send_msg('Rock it with HTML5 WebSocket');
alert(localStorage.lastresponse);
//console.log(localStorage.lastresponse);
//delete localStorage.lastresponse;

e.stopPropagation();
});
});
});
</script>
<style type="text/css">
.map{width: 200px;height: 200px;background-color: green;}
#log{width: 400px; height: 120px;overflow-y: scroll;}
</style>
</head>
<body onload="init()">
<div class="map"></div>
<div id="log"></div>
<br>
<button class="boton">Crear unidad</button>
</body>
</html>


El funcionamiento es simple, abris la web, se conecta al servidor, creas una unidad, selecionas que parte del mapa y crea la unida...  el problema es que en el alert no me imprime 'Rock it with HTML5 WebSocket' sino el valor anterior que tenia, ¿como puedo obtener la ultima respuesta del servidor?
GITHUB 

EFEX

estuve intentando varias cosas pero no logro hacerlo  :-\
GITHUB 

Z3r0D4Y

Cambia la funcion en la linea 21 por esta    

function send_msg(msg){
          log('Sent: '+msg); socket.send(msg);
          localStorage.lastresponse = msg;
}


Se le asigna como ultima respuesta el mensaje a enviar.

EFEX

#3
Cita de: Z3r0D4Y en 18 Noviembre 2013, 08:59 AM
Cambia la funcion en la linea 21 por esta    

function send_msg(msg){
          log('Sent: '+msg); socket.send(msg);
          localStorage.lastresponse = msg;
}


Se le asigna como ultima respuesta el mensaje a enviar.

Solo estas copiando lo que estas por enviar, no la respuesta del servidor.Este servidor websocket solo devuelve lo que envies, no encontre otro por hay  :rolleyes:.
Por ahora provisoriamente hago que se ejecute el alert, en 5s y funciona...
Código (javascript) [Seleccionar]

//linea 27
setTimeout('alert(localStorage.lastresponse)',5000);


Lo que realmente quiero es que al enviarse una peticion al servidor wb, espere a que obtenga una respuesta y despues llamar la funcion que deba llamar, supongo que utilizando un callback deberia funcionar? pero estoy perdido en donde.

Edito
Bueno por fin le encontre la vuelta... de la siguiente manera.

Código (javascript) [Seleccionar]

function init(){
var host = "ws://echo.websocket.org";

socket = new WebSocket(host);
socket.onopen    = function(msg){log("Welcome - status "+this.readyState); };
socket.onclose   = function(msg){log("Disconnected - status "+this.readyState); };
}

function log(msg){var log = document.getElementById("log"); log.innerHTML+="<br>"+msg; log.scrollTop = log.scrollHeight;}

function send_msg(msg, callback){
//Wait until server response

socket.send(msg);
log('Sent: '+msg);
socket.onmessage = function(got){
log("Received: "+got.data);
callback(got.data);
};
}

$(document).ready(function(){
$('.boton').on('click', function () {
$('.map').unbind().on('click', function (e) {

send_msg('Rock it with HTML5 WebSocket', function(lastresponse){
alert(lastresponse);
});

e.stopPropagation();
});
});
});
GITHUB