Aplicación en Tiempo Real con Node.js y GWT (HTML5)

probando:  http://nodejs2014.appspot.com
cliente: https://github.com/jumanor/client-nodejsgwt

servidor: https://github.com/jumanor/server-nodejsgwt

Es realmente sorprendente el poder de Node.js, que con tan pocas lineas de código pueda hacer funcionar una aplicación en tiempo real (aunque esta sea una sencilla aplicación). En realidad es en el front-end donde esta la complejidad y es precisamente en este lado que sale al rescate GWT y HTML5 que junto a Java hace las cosas realmente muy sencillas.

Aunque JSNI siempre estuvo presente desde las primeras versiones de GWT la depuración de código Javascript era muy complicado; sin embargo, esto ha cambiado con GWT 2.5.x que trae “super dev mode”.

JSNI (Javasript Native Interface)
Jsni es la forma como podemos llamar métodos Java de Javascript y viceversa.

Llamando métodos Java de Javascript

  
private native void loadNodeJS(String path) /*-{
//...
   //$wnd hace referencia al objeto window
   //window.socket.on...
   $wnd.socket.on('onRemoveUser', function (data) {
      var user=JSON.parse(data);
      //Un ejemplo del obj JSON recuperado
      //var user={x:10,y:20,name:'xploit'};
      tmp.@pck.client.TEngine::onRemoveUser(Lpck/client/TUser;)(user);
  });
//...
}-*/;
//...
public void onRemoveUser(TUser user){  
           for(int i=1;i<naves.size();i++){       
                if(naves.get(i).getName().equals(user.getName())){  
                     naves.get(i).BorrarNave();  
                     contenedorCanvas.remove(naves.get(i).getCanvas());  
                     naves.remove(i);  
                }  
           }  
      }
//...  

El método "loadNodeJS" es un método Java que es "native" esto significa que puede contener código Javascript.
En la linea 9 del ejemplo de arriba se llama al método Java de Javascript, aunque su sintaxis puede parecer intimidante en realidad el autocompletado de código (del Eclipse) ayuda bastante.
Como puede observar el método "onRemoveUser" acepta un parametro de tipo "TUser", es por esto que cuando llamamos al método utilizamos la firma "Lpck/client/TUser;".
La clase "TUser" se extiende de "JavascriptObject" (ver abajo) que trasparentemente convierte el Objeto "Json" a "TUser".

La clase "TUser" se define teniendo en cuenta el Objeto Json a convertir.  

public class TUser extends JavaScriptObject {

 protected TUser(){};
    //var user={x:10,y:20,name:'xploit'};
    public final native int getX() /*-{ return this.x; }-*/;
    public final native int getY() /*-{ return this.y; }-*/;
    public final native String getName() /*-{ return this.name; }-*/;
}

Llamando métodos Javascript de Java.

Debido a que los métodos "native" contienen código Javascript. Llamar a un método "native" implica llamar métodos Javascript.

En la linea 7 del ejemplo de abajo se llama a "$wnd.socket.emit(...)".

public native void onSendMessageChatUser(String name,String message) /*-{
    var msn={};
    msn.message=message;
    msn.name=name;
          //$wnd hace referencia al objeto window
          //window.socket.emit(...)
    $wnd.socket.emit("onSendMessageChatUser",JSON.stringify(msn));
 }-*/;

SUPER DEV MODE
Gwt que con el “super dev mode” nos permite depurar código Java dentro del navegador web como si se tratase de código Javascript. Esto último es de extraordinaria ayuda, y disponible en la ultimas versiones de GWT.