Enviar y recibir datos UDP con Adobe AIR 2.0 – Consultoria y Formacion Adobe

En este tip, aprenderemos a enviar información a través de UDP (Universal Datagram Protocol) que es una nueva característica de Adobe AIR 2.0 que nos permitirá enviar y recibir datos, que al ser UDP no garantiza la recepción o entrega, ya que sus cabeceras no llevan el control de datos haciendo ligero los envíos. Al ser así, se puede usar esta nueva característica para aplicaciones con baja latencia y donde la perdida de datos sea indiferente. Por ejemplo puedes utilizar esto con aplicaciones en tiempo real o juegos multiplayer, ejemplos o utilidades pueden haber miles, depende mucho del análisis que hagas.

Para este ejemplo, como ya saben, necesitan tener Flash Builder o eclipse con el SDK de AIR 2.0. De la misma forma puedes ver los anteriores tips que escribí para que te sientas familiarizado con Adobe AIR.

Usaremos la clase DatagramSocket y para eso crearemos una instancia de esta clase. Asimismo, tendremos una variable con la dirección IP que usaremos para la conexión. En este ejemplo usaré la dirección local de mi computador, puedes poner IP de máquinas en tu red y usar el ejemplo en más de un computador.

Código :

private var $__datagramSocket:DatagramSocket;
private var $__IP:String = "127.0.0.1";

Cuando la aplicación se inicie crearemos el constructor de la clase DatagramSocket, agregando un escuchador que permita detectar cuando un mensaje fue recibido:

Código :

$__datagramSocket = new DatagramSocket();
$__datagramSocket.addEventListener( DatagramSocketDataEvent.DATA, dataReceived, false, 0, true );

Adicional a esto el método bind() nos permite establecer la conexión entre el puerto que usaremos y la dirección IP que servirá para dicha conexión. El método receive() es quien nos permite iniciar la escucha de los datos enviados.

Código :

$__datagramSocket.bind( 55555, $__IP );
$__datagramSocket.receive();

El método que usaremos para escuchar cuando los datos lleguen es dataReceived:

Código :

private function dataReceived( event:DatagramSocketDataEvent ):void{
   campo.text = campo.text + "\nOtro dice: " + event.data.toString();
}

Para este tip, crearemos un ejemplo básico de chat enviando texto y mostrando la información de otro usuario. Para eso crearemos la siguiente interfaz:

Código :

<s:Label text="Chat:" width="200"  fontWeight="bold"/>
<s:TextArea width="200" height="200" id="campo" text="...INICIA CHAT..."  
         verticalAlign="bottom" editable="false"/>
<s:Label text="Enviar:" width="200"  fontWeight="bold"/>
<s:TextInput id="txtInput" width="200" 
          click="{txtInput.text = ''}"
          keyDown="send(event)" 
          text="Escribe aqu y presiona enter" />

Como ven en el código, al presionar una tecla llamará al método send, nosotros validaremos que sea con ENTER:

Código :

private function send( e:KeyboardEvent = null ):void
{
   if( e.keyCode == Keyboard.ENTER ){
      var data:ByteArray = new ByteArray();
      data.writeUTFBytes(txtInput.text);

      $__datagramSocket.send( data, 0, 0, $__IP, 55554);

      campo.text = campo.text + "\nTu dices: " + txtInput.text;
      txtInput.text = "";
   }
}

Es necesario aclarar que los puertos donde se conectarán deben estar libres y no siendo utilizados incluso por varias de esta misma app, además de tener permisos de seguridad. Aquí te dejo el código completo de la app que hice, es sólo un demo pero creo que sirve como base para que puedas crear cosas impresionantes.

Código :

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  creationComplete="init()"
                   width="236" height="300">
   <s:layout>
      <s:VerticalLayout horizontalAlign="center" paddingTop="10"/>
   </s:layout>

   
   <fx:Script>
      <![CDATA[
         
         private var $__datagramSocket:DatagramSocket;
         private var $__IP:String = "127.0.0.1";
         
         private function init():void{
            
            $__datagramSocket = new DatagramSocket();
            $__datagramSocket.addEventListener( DatagramSocketDataEvent.DATA, dataReceived, false, 0, true );
            $__datagramSocket.bind( 55555, $__IP );
            $__datagramSocket.receive();
         }
         
         private function dataReceived( event:DatagramSocketDataEvent ):void{
            campo.text = campo.text + "\nOtro dice: " + event.data.toString();
         }
         
         private function send( e:KeyboardEvent = null ):void
         {
            if( e.keyCode == Keyboard.ENTER ){
               var data:ByteArray = new ByteArray();
               data.writeUTFBytes(txtInput.text);
               
               $__datagramSocket.send( data, 0, 0, $__IP, 55554);
               
               campo.text = campo.text + "\nTu dices: " + txtInput.text;
               txtInput.text = "";
            }
         }
         
      ]]>
   </fx:Script>
   
   <s:Label text="Chat:" width="200"  fontWeight="bold"/>
   <s:TextArea width="200" height="200" id="campo" text="...INICIA CHAT..."  
            verticalAlign="bottom" editable="false"/>
   <s:Label text="Enviar:" width="200"  fontWeight="bold"/>
   <s:TextInput id="txtInput" width="200" 
             click="{txtInput.text = ''}"
             keyDown="send(event)" 
             text="Escribe aqu y presiona enter" />
   
</s:WindowedApplication>

Puedes descargar el demo aquí

Deja una respuesta Cancelar la respuesta