Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: EFEX en 15 Noviembre 2013, 05:42 am



Título: websocket y jquery
Publicado por: EFEX en 15 Noviembre 2013, 05:42 am
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
  1. <head>
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  3. <script type="text/javascript">
  4. localStorage.lastresponse = 'old';
  5.  
  6. function init(){
  7. var host = "ws://echo.websocket.org";
  8.  
  9. socket = new WebSocket(host);
  10. socket.onopen    = function(msg){log("Welcome - status "+this.readyState); };
  11. socket.onmessage = function(msg){
  12. localStorage.lastresponse = msg.data;
  13. log("Received: "+msg.data);
  14. };
  15. socket.onclose   = function(msg){log("Disconnected - status "+this.readyState); };
  16. }
  17.  
  18. function log(msg){var log = document.getElementById("log"); log.innerHTML+="<br>"+msg; log.scrollTop = log.scrollHeight;}
  19.  
  20. function send_msg(msg){ log('Sent: '+msg); socket.send(msg); }
  21.  
  22. $(document).ready(function(){
  23. $('.boton').on('click', function () {
  24. $('.map').unbind().on('click', function (e) {
  25. send_msg('Rock it with HTML5 WebSocket');
  26. alert(localStorage.lastresponse);
  27. //console.log(localStorage.lastresponse);
  28. //delete localStorage.lastresponse;
  29.  
  30. e.stopPropagation();
  31. });
  32. });
  33. });
  34. </script>
  35. <style type="text/css">
  36. .map{width: 200px;height: 200px;background-color: green;}
  37. #log{width: 400px; height: 120px;overflow-y: scroll;}
  38. </style>
  39. </head>
  40. <body onload="init()">
  41. <div class="map"></div>
  42. <div id="log"></div>
  43. <br>
  44. <button class="boton">Crear unidad</button>
  45. </body>
  46. </html>
  47.  

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?


Título: Re: websocket y jquery
Publicado por: EFEX en 16 Noviembre 2013, 08:10 am
estuve intentando varias cosas pero no logro hacerlo  :-\


Título: Re: websocket y jquery
Publicado por: Z3r0D4Y en 18 Noviembre 2013, 08:59 am
Cambia la funcion en la linea 21 por esta    

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

Se le asigna como ultima respuesta el mensaje a enviar.


Título: Re: websocket y jquery
Publicado por: EFEX en 18 Noviembre 2013, 11:42 am
Cambia la funcion en la linea 21 por esta    

Código:
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
  1. //linea 27
  2. setTimeout('alert(localStorage.lastresponse)',5000);
  3.  

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
  1. function init(){
  2. var host = "ws://echo.websocket.org";
  3.  
  4. socket = new WebSocket(host);
  5. socket.onopen    = function(msg){log("Welcome - status "+this.readyState); };
  6. socket.onclose   = function(msg){log("Disconnected - status "+this.readyState); };
  7. }
  8.  
  9. function log(msg){var log = document.getElementById("log"); log.innerHTML+="<br>"+msg; log.scrollTop = log.scrollHeight;}
  10.  
  11. function send_msg(msg, callback){
  12. //Wait until server response
  13.  
  14. socket.send(msg);
  15. log('Sent: '+msg);
  16. socket.onmessage = function(got){
  17. log("Received: "+got.data);
  18. callback(got.data);
  19. };
  20. }
  21.  
  22. $(document).ready(function(){
  23. $('.boton').on('click', function () {
  24. $('.map').unbind().on('click', function (e) {
  25.  
  26. send_msg('Rock it with HTML5 WebSocket', function(lastresponse){
  27. alert(lastresponse);
  28. });
  29.  
  30. e.stopPropagation();
  31. });
  32. });
  33. });
  34.