SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen
Universidad de Oviedo   Programa de extensión universitaria




     CLOUD COMPUTING.
DESARROLLO DE APLICACIONES Y
        MINERÍA WEB


                               Miguel Fernández Fernández
                                miguelff@innova.uniovi.es
Web en Tiempo Real
XMPP, Websockets, et al.
¿Qué es XMPP?
                                         antesJabber
Extensible Messaging and Presence Protocol

   Envío de mensajes en tiempo real

          Codificados en XML

 Transportados sobre TCP y UDP (media)




           http://xmpp.org
¿Por qué XMPP?
                para la   Web
  HTTP
Half-duplex
 stateless
¿Por qué XMPP?
                        para la   Web
        HTTP
      Half-duplex
        stateless

c
s
    normal polling (AJAX)
c

s
    long polling (Comet)
¿Por qué XMPP?
                        para la   Web
        HTTP                 XMPP
      Half-duplex           Full-duplex
        stateless            stateful

c
s
    normal polling (AJAX)
c

s
    long polling (Comet)
¿Por qué XMPP?
                        para la        Web
        HTTP                      XMPP
      Half-duplex               Full-duplex
        stateless                 stateful

c
s                           c
    normal polling (AJAX)
c
                            s
                                conexión persistente
s
    long polling (Comet)
Arquitectura XMPP




       O’REILLY XMPP: The Definitive Guide
Arquitectura XMPP



Web (HTTP)             Mail (SMTP)




             XMPP
La red XMPP: Entidades

        Servidores
         Clientes
       Componentes
         Plugins
Servidores


          Enrutan mensajes
Hablan con clientes y otros servidores
  FOSS: Ejabberd, Openfire, Tigase
Clientes


   Humanos y robots

Protocolo cliente-servidor
Componentes

Extienden la funcionalidad del servidor

Tienen su propia identidad y dirección
    Se ejecutan fuera del mismo
Se comunican con un protocolo específico

        Ejemplo típico: Multichat
Plugins


Mismo propósito que los componentes

También tienen identidad y dirección
          No hay IPC              mayor rendimiento
Direccionamiento en XMPP

     JIDs: almenos uno por cada entidad

         local@dom.ain/resource
 it@miinterprete.appspotchat.com/adium
            Bare JID

                  Full JID
XMPP Stanzas
<stream:stream>

    <iq type="get">
        <query xmlns="jabber:iq:roster"/>
    </iq>

    <presence/>

    <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat">
        <body>Tomamos algo?</body>
    </message>

    <presence type="unavailable"/>

</stream:stream>
XMPP Stanzas
<stream:stream>

    <iq type="get">
        <query xmlns="jabber:iq:roster"/>
    </iq>

    <presence/>

    <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat">
        <body>Tomamos algo?</body>
    </message>

    <presence type="unavailable"/>

</stream:stream>
XMPP Stanzas
<stream:stream>

    <iq type="get">
        <query xmlns="jabber:iq:roster"/>        Dame mis contactos
    </iq>

    <presence/>

    <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat">
        <body>Tomamos algo?</body>
    </message>

    <presence type="unavailable"/>

</stream:stream>
XMPP Stanzas
<stream:stream>

    <iq type="get">
        <query xmlns="jabber:iq:roster"/>        Dame mis contactos
    </iq>

    <presence/>                                  Estoy online
    <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat">
        <body>Tomamos algo?</body>
    </message>

    <presence type="unavailable"/>

</stream:stream>
XMPP Stanzas
<stream:stream>

    <iq type="get">
        <query xmlns="jabber:iq:roster"/>        Dame mis contactos
    </iq>

    <presence/>                                  Estoy online
    <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat">
        <body>Tomamos algo?</body>
    </message>

    <presence type="unavailable"/>

</stream:stream>                                    Dile a bar que si
                                                     tomamos algo
XMPP Stanzas
<stream:stream>

    <iq type="get">
        <query xmlns="jabber:iq:roster"/>        Dame mis contactos
    </iq>

    <presence/>                                  Estoy online
    <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat">
        <body>Tomamos algo?</body>
    </message>

    <presence type="unavailable"/>

</stream:stream>                                    Dile a bar que si
                     Ya no estoy disponible          tomamos algo
Tiempo real en La Web
Acercando XMPP a la Web
            Pre HTML 5

     Comunicación basada en HTTP

         AJAX & Long Polling

      Bidirectional-Streams over
         synchronous HTTP
AJAX & Long Polling
  AJAX (muestreo frecuente)                                     Comet (Long Polling)
setInterval(function(){                                       function load(){
    // pedimos cada 500 milisegundos esperando cambio             $.ajax({ url: '/my/page', success: function(){
    $.ajax({ url: '/my/page', success: function(data){} });           // abrimos la conexión durante 20 segundos
}, 500);                                                          }, complete: load, timeout: 20000 });
                                                              }




              Latencia (200ms/petición)                            Reducción dramática de latencia

     Muchas peticiones no recogeran cambios                           Mucho más eficiente

            Se genera mucho tráfico
BOSH, XMPP sobre HTTP
    Flujos bidireccionales sobre HTTP síncrono

      Usa pares de petición-respuesta para simular

 Requiere de un proxy que dirija los stanzas al servidor XMPP

        HTTP/1.1 200 OK
        Content-Type: text/xml; charset=utf-8
        Content-Length: 483

        <body xmpp:version='1.0'
              authid='ServerStreamID'
              xmlns='http://jabber.org/protocol/httpbind'
              xmlns:xmpp='urn:xmpp:xbosh'
              xmlns:stream='http://etherx.jabber.org/streams'>
          <stream:features>
            <mechanisms xmlns='urn:ietf:params:xml:ns:xmpp-sasl'>
              <mechanism>SCRAM-SHA-1</mechanism>
              <mechanism>PLAIN</mechanism>
            </mechanisms>
          </stream:features>
        </body>


         http://xmpp.org/extensions/xep-0206.html
HTML5 Websockets
                          HTML 5

                        WebSockets
          To enable Web applications to maintain bidirectional
             communications with server-side processes, this
            specification introduces the WebSocket interface.




                  Gecko 2.0b4 (24/08/2010) (Firefox 4 Nighties)
Soportado en:     Webkit 333 (Safari 4, Chrome >4)
HTML5 Websockets
                             HTML 5

                           WebSockets
             To enable Web applications to maintain bidirectional
                communications with server-side processes, this
               specification introduces the WebSocket interface.



         c

         s
                        conexión persistente


                     Gecko 2.0b4 (24/08/2010) (Firefox 4 Nighties)
Soportado en:        Webkit 333 (Safari 4, Chrome >4)
El contrato Websocket
[Constructor(in DOMString url, in optional DOMString protocols)]
[Constructor(in DOMString url, in optional DOMString[] protocols)]
interface WebSocket {
  readonly attribute DOMString url; ws://services.com/service

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;         estado de
  readonly attribute unsigned long bufferedAmount;     la conexión

  // networking
  attribute Function onopen;
  attribute Function onmessage;
                                          Recepción de eventos
  attribute Function onerror;
  attribute Function onclose;
  readonly attribute DOMString protocol;
  void send(in DOMString data);          Envío de mensajes
  void close();
};
WebSocket implements EventTarget;
Web en tiempo real con
    Websockets
Event Machine
                                     à-la node.js (javascript) y twisted (python)
              Framework I/O dirigida por eventos

                 Implementa el patrón Reactor

                       Corre sobre ruby

            Muy útil para crear aplicaciones servidor



                                            eventmachine (0.12.10)
http://rubyeventmachine.com/                eventmachine-websocket (0.1.0)
<html>
                         Nuestro cliente
  <head>
    <script src='jquery.min.js'></script>
    <script>
    function WebSocketAdapter(url){
         this.ws=new WebSocket(url);

        this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");};
        this.ws.onclose = function() { alert("socket cerrado"); };
        this.ws.onopen = function() { alert("conectado..."); };
        this.send=function(msg) {this.ws.send(msg);}
    }
    var ws;
    $(document).ready(function(){
         ws=new WebSocketAdapter("ws://localhost:8080/");
    });
    </script>
  </head>
  <body>
    <form>
         Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input>
         <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/>
    </form>
    <div id="msg"></div>
  </body>
</html>
<html>
                         Nuestro cliente
  <head>
    <script src='jquery.min.js'></script>
    <script>
    function WebSocketAdapter(url){
         this.ws=new WebSocket(url);

        this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");};
        this.ws.onclose = function() { alert("socket cerrado"); };
        this.ws.onopen = function() { alert("conectado..."); };
        this.send=function(msg) {this.ws.send(msg);}
    }
    var ws;
    $(document).ready(function(){
         ws=new WebSocketAdapter("ws://localhost:8080/");
    });
    </script>
  </head>
  <body>
    <form>
         Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input>
         <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/>
    </form>
    <div id="msg"></div>
  </body>
</html>
<html>
                         Nuestro cliente
  <head>
    <script src='jquery.min.js'></script>
    <script>
    function WebSocketAdapter(url){
         this.ws=new WebSocket(url);

        this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");};
        this.ws.onclose = function() { alert("socket cerrado"); };
        this.ws.onopen = function() { alert("conectado..."); };
        this.send=function(msg) {this.ws.send(msg);}
    }
    var ws;
    $(document).ready(function(){
         ws=new WebSocketAdapter("ws://localhost:8080/");
    });
    </script>
  </head>
  <body>
    <form>
         Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input>
         <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/>
    </form>
    <div id="msg"></div>
  </body>
</html>
<html>
                         Nuestro cliente
  <head>
    <script src='jquery.min.js'></script>
    <script>
    function WebSocketAdapter(url){
         this.ws=new WebSocket(url);

        this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");};
        this.ws.onclose = function() { alert("socket cerrado"); };
        this.ws.onopen = function() { alert("conectado..."); };
        this.send=function(msg) {this.ws.send(msg);}
    }
    var ws;
    $(document).ready(function(){
         ws=new WebSocketAdapter("ws://localhost:8080/");
    });
    </script>
  </head>
  <body>
    <form>
         Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input>
         <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/>
    </form>
    <div id="msg"></div>
  </body>
</html>
<html>
                         Nuestro cliente
  <head>
    <script src='jquery.min.js'></script>
    <script>
    function WebSocketAdapter(url){
         this.ws=new WebSocket(url);

        this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");};
        this.ws.onclose = function() { alert("socket cerrado"); };
        this.ws.onopen = function() { alert("conectado..."); };
        this.send=function(msg) {this.ws.send(msg);}
    }
    var ws;
    $(document).ready(function(){
         ws=new WebSocketAdapter("ws://localhost:8080/");
    });
    </script>
  </head>
  <body>
    <form>
         Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input>
         <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/>
    </form>
    <div id="msg"></div>
  </body>
</html>
<html>
                         Nuestro cliente
  <head>
    <script src='jquery.min.js'></script>
    <script>
    function WebSocketAdapter(url){
         this.ws=new WebSocket(url);

        this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");};
        this.ws.onclose = function() { alert("socket cerrado"); };
        this.ws.onopen = function() { alert("conectado..."); };
        this.send=function(msg) {this.ws.send(msg);}
    }
    var ws;
    $(document).ready(function(){
         ws=new WebSocketAdapter("ws://localhost:8080/");
    });
    </script>
  </head>
  <body>
    <form>
         Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input>
         <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/>
    </form>
    <div id="msg"></div>
  </body>
</html>
<html>
                         Nuestro cliente
  <head>
    <script src='jquery.min.js'></script>
    <script>
    function WebSocketAdapter(url){
         this.ws=new WebSocket(url);

        this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");};
        this.ws.onclose = function() { alert("socket cerrado"); };
        this.ws.onopen = function() { alert("conectado..."); };
        this.send=function(msg) {this.ws.send(msg);}
    }
    var ws;
    $(document).ready(function(){
         ws=new WebSocketAdapter("ws://localhost:8080/");
    });
    </script>
  </head>
  <body>
    <form>
         Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input>
         <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/>
    </form>
    <div id="msg"></div>
  </body>
</html>
Echo (single client)

require 'rubygems'
require 'eventmachine-websocket'

EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |con|
    con.on_open    { con.send "Cliente conectado"}
    con.on_message { |msg| con.send msg.reverse }
    con.on_close   { puts "Cliente desconectado" }
end
Multichat en 23LOC
require 'rubygems'
require 'eventmachine-websocket'

connections=[]
indexes={}

EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |con|

      con.on_open     do
        indexes[con]=connections.size+1
        con.send "<p class="highlight">Eres el cliente #{indexes[con]}<p>"
        connections.each{ |c| c.send "<p class="highlight">El cliente #{indexes[con]} ha entrado en la sala<p>" }
        connections << con
      end
      con.on_message do |msg|
        connections.each{ |c| c.send "<p><span class="cliente">Cliente #{indexes[con]}:</span> #{msg}</p>" }
      end
      con.on_close do
        c.send "<p class="highlight">Has abandonado la sala</p>"
        connections.delete con
        indexes.delete con
      end
end
Conclusiones

• Hastala aparición de HTML5, XMPP tenía unas expectativas
 muy altas como alternativa a Comet.

• Sinembargo, se han cancelado muchos servicios XMPP para
 el consumo de datos en tiempo real (Twitter firehose API)

• Websocket se presenta como una alternativa más simple y
 elegante para la implementación de servicios Web de tiempo
 real

• XMPP    no pierde fuerza para mensajería instantánea
Bilbiografía
Gracias
Universidad de Oviedo   Programa de extensión universitaria




     CLOUD COMPUTING.
DESARROLLO DE APLICACIONES Y
        MINERÍA WEB


                               Miguel Fernández Fernández
                                miguelff@innova.uniovi.es

Weitere ähnliche Inhalte

Ähnlich wie Real-time web

Conceptos acerca de Ajax
Conceptos acerca  de AjaxConceptos acerca  de Ajax
Conceptos acerca de AjaxAlvaro Castillo
 
Introduccion Ajax V1.0
Introduccion Ajax V1.0Introduccion Ajax V1.0
Introduccion Ajax V1.0Arnulfo Gomez
 
Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2Michelle Aguirre
 
Presentacion remobjects
Presentacion remobjectsPresentacion remobjects
Presentacion remobjectsmamcx
 
Microservicios sobre MEAN Stack
Microservicios sobre MEAN StackMicroservicios sobre MEAN Stack
Microservicios sobre MEAN StackPedro J. Molina
 
Opensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackOpensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackPedro J. Molina
 
Semana 1 tecnologias web
Semana 1   tecnologias webSemana 1   tecnologias web
Semana 1 tecnologias webINFOVIC
 
Ruby y las arquitecturas orientadas a servicios
Ruby y las arquitecturas orientadas a servicios Ruby y las arquitecturas orientadas a servicios
Ruby y las arquitecturas orientadas a servicios Joaquín Salvachúa
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js IntroduccionMayer Horna
 
Programación web con JSP
Programación web con JSPProgramación web con JSP
Programación web con JSPousli07
 
Codemotion 2013 - Quiero tiempo real y lo quiero para ayer
Codemotion 2013 - Quiero tiempo real y lo quiero para ayerCodemotion 2013 - Quiero tiempo real y lo quiero para ayer
Codemotion 2013 - Quiero tiempo real y lo quiero para ayerIván López Martín
 

Ähnlich wie Real-time web (20)

Conceptos acerca de Ajax
Conceptos acerca  de AjaxConceptos acerca  de Ajax
Conceptos acerca de Ajax
 
Introduccion Ajax V1.0
Introduccion Ajax V1.0Introduccion Ajax V1.0
Introduccion Ajax V1.0
 
Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2Conceptos Introductorios Del Web 2
Conceptos Introductorios Del Web 2
 
Presentacion remobjects
Presentacion remobjectsPresentacion remobjects
Presentacion remobjects
 
Servicios web
Servicios webServicios web
Servicios web
 
Aplicaciones Web
Aplicaciones WebAplicaciones Web
Aplicaciones Web
 
Ajax
AjaxAjax
Ajax
 
Microservicios sobre MEAN Stack
Microservicios sobre MEAN StackMicroservicios sobre MEAN Stack
Microservicios sobre MEAN Stack
 
Opensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackOpensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN Stack
 
SignalR y dispositivos móviles
SignalR y dispositivos móvilesSignalR y dispositivos móviles
SignalR y dispositivos móviles
 
Semana 1 tecnologias web
Semana 1   tecnologias webSemana 1   tecnologias web
Semana 1 tecnologias web
 
Ruby y las arquitecturas orientadas a servicios
Ruby y las arquitecturas orientadas a servicios Ruby y las arquitecturas orientadas a servicios
Ruby y las arquitecturas orientadas a servicios
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
 
ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3ASP.NET MVC Workshop Día 3
ASP.NET MVC Workshop Día 3
 
Protocolo http
Protocolo httpProtocolo http
Protocolo http
 
Programación web con JSP
Programación web con JSPProgramación web con JSP
Programación web con JSP
 
Generación de web sites dinámicos usando php
Generación de web sites dinámicos usando phpGeneración de web sites dinámicos usando php
Generación de web sites dinámicos usando php
 
Servicios web Extendido_error perl
Servicios web Extendido_error perlServicios web Extendido_error perl
Servicios web Extendido_error perl
 
Codemotion 2013 - Quiero tiempo real y lo quiero para ayer
Codemotion 2013 - Quiero tiempo real y lo quiero para ayerCodemotion 2013 - Quiero tiempo real y lo quiero para ayer
Codemotion 2013 - Quiero tiempo real y lo quiero para ayer
 
Protocol HTTP
Protocol HTTPProtocol HTTP
Protocol HTTP
 

Mehr von Miguel Fernández

Mehr von Miguel Fernández (6)

Hierarchical taxonomy extraction
Hierarchical taxonomy extractionHierarchical taxonomy extraction
Hierarchical taxonomy extraction
 
Yahoo! pipes
Yahoo! pipesYahoo! pipes
Yahoo! pipes
 
Screen scraping
Screen scrapingScreen scraping
Screen scraping
 
App engine
App engineApp engine
App engine
 
Ruby intro
Ruby introRuby intro
Ruby intro
 
Rails intro
Rails introRails intro
Rails intro
 

Kürzlich hochgeladen

Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosAlbanyMartinez7
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 
Presentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia ArtificialPresentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia Artificialcynserafini89
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúRed Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúCEFERINO DELGADO FLORES
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptchaverriemily794
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1ivanapaterninar
 
Los Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesLos Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesEdomar AR
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxtjcesar1
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersIván López Martín
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
Tecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxTecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxGESTECPERUSAC
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxAlexander López
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfFernandoOblitasVivan
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfjeondanny1997
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfedepmariaperez
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
tarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzztarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzzAlexandergo5
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docxobandopaula444
 

Kürzlich hochgeladen (20)

Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos Juridicos
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 
Presentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia ArtificialPresentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia Artificial
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúRed Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1
 
Los Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesLos Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, Aplicaciones
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 Testcontainers
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
Tecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxTecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptx
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdf
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdf
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
tarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzztarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzz
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
 

Real-time web

  • 1. Universidad de Oviedo Programa de extensión universitaria CLOUD COMPUTING. DESARROLLO DE APLICACIONES Y MINERÍA WEB Miguel Fernández Fernández miguelff@innova.uniovi.es
  • 2. Web en Tiempo Real XMPP, Websockets, et al.
  • 3. ¿Qué es XMPP? antesJabber Extensible Messaging and Presence Protocol Envío de mensajes en tiempo real Codificados en XML Transportados sobre TCP y UDP (media) http://xmpp.org
  • 4. ¿Por qué XMPP? para la Web HTTP Half-duplex stateless
  • 5. ¿Por qué XMPP? para la Web HTTP Half-duplex stateless c s normal polling (AJAX) c s long polling (Comet)
  • 6. ¿Por qué XMPP? para la Web HTTP XMPP Half-duplex Full-duplex stateless stateful c s normal polling (AJAX) c s long polling (Comet)
  • 7. ¿Por qué XMPP? para la Web HTTP XMPP Half-duplex Full-duplex stateless stateful c s c normal polling (AJAX) c s conexión persistente s long polling (Comet)
  • 8. Arquitectura XMPP O’REILLY XMPP: The Definitive Guide
  • 9. Arquitectura XMPP Web (HTTP) Mail (SMTP) XMPP
  • 10. La red XMPP: Entidades Servidores Clientes Componentes Plugins
  • 11. Servidores Enrutan mensajes Hablan con clientes y otros servidores FOSS: Ejabberd, Openfire, Tigase
  • 12. Clientes Humanos y robots Protocolo cliente-servidor
  • 13. Componentes Extienden la funcionalidad del servidor Tienen su propia identidad y dirección Se ejecutan fuera del mismo Se comunican con un protocolo específico Ejemplo típico: Multichat
  • 14. Plugins Mismo propósito que los componentes También tienen identidad y dirección No hay IPC mayor rendimiento
  • 15. Direccionamiento en XMPP JIDs: almenos uno por cada entidad local@dom.ain/resource it@miinterprete.appspotchat.com/adium Bare JID Full JID
  • 16. XMPP Stanzas <stream:stream> <iq type="get"> <query xmlns="jabber:iq:roster"/> </iq> <presence/> <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat"> <body>Tomamos algo?</body> </message> <presence type="unavailable"/> </stream:stream>
  • 17. XMPP Stanzas <stream:stream> <iq type="get"> <query xmlns="jabber:iq:roster"/> </iq> <presence/> <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat"> <body>Tomamos algo?</body> </message> <presence type="unavailable"/> </stream:stream>
  • 18. XMPP Stanzas <stream:stream> <iq type="get"> <query xmlns="jabber:iq:roster"/> Dame mis contactos </iq> <presence/> <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat"> <body>Tomamos algo?</body> </message> <presence type="unavailable"/> </stream:stream>
  • 19. XMPP Stanzas <stream:stream> <iq type="get"> <query xmlns="jabber:iq:roster"/> Dame mis contactos </iq> <presence/> Estoy online <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat"> <body>Tomamos algo?</body> </message> <presence type="unavailable"/> </stream:stream>
  • 20. XMPP Stanzas <stream:stream> <iq type="get"> <query xmlns="jabber:iq:roster"/> Dame mis contactos </iq> <presence/> Estoy online <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat"> <body>Tomamos algo?</body> </message> <presence type="unavailable"/> </stream:stream> Dile a bar que si tomamos algo
  • 21. XMPP Stanzas <stream:stream> <iq type="get"> <query xmlns="jabber:iq:roster"/> Dame mis contactos </iq> <presence/> Estoy online <message to="bar@otherside.com" from="foo@oneside.com/adium" type="chat"> <body>Tomamos algo?</body> </message> <presence type="unavailable"/> </stream:stream> Dile a bar que si Ya no estoy disponible tomamos algo
  • 22. Tiempo real en La Web
  • 23. Acercando XMPP a la Web Pre HTML 5 Comunicación basada en HTTP AJAX & Long Polling Bidirectional-Streams over synchronous HTTP
  • 24. AJAX & Long Polling AJAX (muestreo frecuente) Comet (Long Polling) setInterval(function(){ function load(){ // pedimos cada 500 milisegundos esperando cambio $.ajax({ url: '/my/page', success: function(){ $.ajax({ url: '/my/page', success: function(data){} }); // abrimos la conexión durante 20 segundos }, 500); }, complete: load, timeout: 20000 }); } Latencia (200ms/petición) Reducción dramática de latencia Muchas peticiones no recogeran cambios Mucho más eficiente Se genera mucho tráfico
  • 25. BOSH, XMPP sobre HTTP Flujos bidireccionales sobre HTTP síncrono Usa pares de petición-respuesta para simular Requiere de un proxy que dirija los stanzas al servidor XMPP HTTP/1.1 200 OK Content-Type: text/xml; charset=utf-8 Content-Length: 483 <body xmpp:version='1.0' authid='ServerStreamID' xmlns='http://jabber.org/protocol/httpbind' xmlns:xmpp='urn:xmpp:xbosh' xmlns:stream='http://etherx.jabber.org/streams'> <stream:features> <mechanisms xmlns='urn:ietf:params:xml:ns:xmpp-sasl'> <mechanism>SCRAM-SHA-1</mechanism> <mechanism>PLAIN</mechanism> </mechanisms> </stream:features> </body> http://xmpp.org/extensions/xep-0206.html
  • 26. HTML5 Websockets HTML 5 WebSockets To enable Web applications to maintain bidirectional communications with server-side processes, this specification introduces the WebSocket interface. Gecko 2.0b4 (24/08/2010) (Firefox 4 Nighties) Soportado en: Webkit 333 (Safari 4, Chrome >4)
  • 27. HTML5 Websockets HTML 5 WebSockets To enable Web applications to maintain bidirectional communications with server-side processes, this specification introduces the WebSocket interface. c s conexión persistente Gecko 2.0b4 (24/08/2010) (Firefox 4 Nighties) Soportado en: Webkit 333 (Safari 4, Chrome >4)
  • 28. El contrato Websocket [Constructor(in DOMString url, in optional DOMString protocols)] [Constructor(in DOMString url, in optional DOMString[] protocols)] interface WebSocket { readonly attribute DOMString url; ws://services.com/service // ready state const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSING = 2; const unsigned short CLOSED = 3; readonly attribute unsigned short readyState; estado de readonly attribute unsigned long bufferedAmount; la conexión // networking attribute Function onopen; attribute Function onmessage; Recepción de eventos attribute Function onerror; attribute Function onclose; readonly attribute DOMString protocol; void send(in DOMString data); Envío de mensajes void close(); }; WebSocket implements EventTarget;
  • 29. Web en tiempo real con Websockets
  • 30. Event Machine à-la node.js (javascript) y twisted (python) Framework I/O dirigida por eventos Implementa el patrón Reactor Corre sobre ruby Muy útil para crear aplicaciones servidor eventmachine (0.12.10) http://rubyeventmachine.com/ eventmachine-websocket (0.1.0)
  • 31. <html> Nuestro cliente <head> <script src='jquery.min.js'></script> <script> function WebSocketAdapter(url){ this.ws=new WebSocket(url); this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");}; this.ws.onclose = function() { alert("socket cerrado"); }; this.ws.onopen = function() { alert("conectado..."); }; this.send=function(msg) {this.ws.send(msg);} } var ws; $(document).ready(function(){ ws=new WebSocketAdapter("ws://localhost:8080/"); }); </script> </head> <body> <form> Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input> <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/> </form> <div id="msg"></div> </body> </html>
  • 32. <html> Nuestro cliente <head> <script src='jquery.min.js'></script> <script> function WebSocketAdapter(url){ this.ws=new WebSocket(url); this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");}; this.ws.onclose = function() { alert("socket cerrado"); }; this.ws.onopen = function() { alert("conectado..."); }; this.send=function(msg) {this.ws.send(msg);} } var ws; $(document).ready(function(){ ws=new WebSocketAdapter("ws://localhost:8080/"); }); </script> </head> <body> <form> Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input> <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/> </form> <div id="msg"></div> </body> </html>
  • 33. <html> Nuestro cliente <head> <script src='jquery.min.js'></script> <script> function WebSocketAdapter(url){ this.ws=new WebSocket(url); this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");}; this.ws.onclose = function() { alert("socket cerrado"); }; this.ws.onopen = function() { alert("conectado..."); }; this.send=function(msg) {this.ws.send(msg);} } var ws; $(document).ready(function(){ ws=new WebSocketAdapter("ws://localhost:8080/"); }); </script> </head> <body> <form> Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input> <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/> </form> <div id="msg"></div> </body> </html>
  • 34. <html> Nuestro cliente <head> <script src='jquery.min.js'></script> <script> function WebSocketAdapter(url){ this.ws=new WebSocket(url); this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");}; this.ws.onclose = function() { alert("socket cerrado"); }; this.ws.onopen = function() { alert("conectado..."); }; this.send=function(msg) {this.ws.send(msg);} } var ws; $(document).ready(function(){ ws=new WebSocketAdapter("ws://localhost:8080/"); }); </script> </head> <body> <form> Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input> <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/> </form> <div id="msg"></div> </body> </html>
  • 35. <html> Nuestro cliente <head> <script src='jquery.min.js'></script> <script> function WebSocketAdapter(url){ this.ws=new WebSocket(url); this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");}; this.ws.onclose = function() { alert("socket cerrado"); }; this.ws.onopen = function() { alert("conectado..."); }; this.send=function(msg) {this.ws.send(msg);} } var ws; $(document).ready(function(){ ws=new WebSocketAdapter("ws://localhost:8080/"); }); </script> </head> <body> <form> Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input> <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/> </form> <div id="msg"></div> </body> </html>
  • 36. <html> Nuestro cliente <head> <script src='jquery.min.js'></script> <script> function WebSocketAdapter(url){ this.ws=new WebSocket(url); this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");}; this.ws.onclose = function() { alert("socket cerrado"); }; this.ws.onopen = function() { alert("conectado..."); }; this.send=function(msg) {this.ws.send(msg);} } var ws; $(document).ready(function(){ ws=new WebSocketAdapter("ws://localhost:8080/"); }); </script> </head> <body> <form> Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input> <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/> </form> <div id="msg"></div> </body> </html>
  • 37. <html> Nuestro cliente <head> <script src='jquery.min.js'></script> <script> function WebSocketAdapter(url){ this.ws=new WebSocket(url); this.ws.onmessage = function(evt) {$("#msg").append("<p>"+evt.data+"</p>");}; this.ws.onclose = function() { alert("socket cerrado"); }; this.ws.onopen = function() { alert("conectado..."); }; this.send=function(msg) {this.ws.send(msg);} } var ws; $(document).ready(function(){ ws=new WebSocketAdapter("ws://localhost:8080/"); }); </script> </head> <body> <form> Enviar al servidor: <input id="texto" type="text" value="hola mundo!"></input> <input id="enviar" type="button" value="enviar" onclick="ws.send($('#texto').val())"/> </form> <div id="msg"></div> </body> </html>
  • 38. Echo (single client) require 'rubygems' require 'eventmachine-websocket' EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |con| con.on_open { con.send "Cliente conectado"} con.on_message { |msg| con.send msg.reverse } con.on_close { puts "Cliente desconectado" } end
  • 39. Multichat en 23LOC require 'rubygems' require 'eventmachine-websocket' connections=[] indexes={} EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |con| con.on_open do indexes[con]=connections.size+1 con.send "<p class="highlight">Eres el cliente #{indexes[con]}<p>" connections.each{ |c| c.send "<p class="highlight">El cliente #{indexes[con]} ha entrado en la sala<p>" } connections << con end con.on_message do |msg| connections.each{ |c| c.send "<p><span class="cliente">Cliente #{indexes[con]}:</span> #{msg}</p>" } end con.on_close do c.send "<p class="highlight">Has abandonado la sala</p>" connections.delete con indexes.delete con end end
  • 40.
  • 41. Conclusiones • Hastala aparición de HTML5, XMPP tenía unas expectativas muy altas como alternativa a Comet. • Sinembargo, se han cancelado muchos servicios XMPP para el consumo de datos en tiempo real (Twitter firehose API) • Websocket se presenta como una alternativa más simple y elegante para la implementación de servicios Web de tiempo real • XMPP no pierde fuerza para mensajería instantánea
  • 44. Universidad de Oviedo Programa de extensión universitaria CLOUD COMPUTING. DESARROLLO DE APLICACIONES Y MINERÍA WEB Miguel Fernández Fernández miguelff@innova.uniovi.es