App Web utilizando WebSockets

Parte I

Problema

Soluciones Propuestas

Paradigma

Protocolo

Opening Handshake: Client

            
            GET /chat HTTP/1.1
            Host: server.example.com
            Upgrade: websocket
            Connection: Upgrade
            Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
            Origin: http://example.com
            Sec-WebSocket-Protocol: chat, superchat
            Sec-WebSocket-Version: 13
            
        
  1. Sec-WebSocket-Key

  2. Origin

  3. Sec-WebSocket-protocol

Opening Handshake: Server

            
            HTTP/1.1 101 Switching Protocols
            Upgrade: websocket
            Connection: Upgrade
            Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
            
        
  1. Status line: HTTP/1.1 101 Switching Protocols

  2. Sec-WebSocket-Accept: si base64 no calza con la esperada no se realiza la conexión

  3. Connection: Upgrade, si no viene, no se crea conexión

  4. Sec-WebSocket-protocol

Closing Handshake

  1. Puede ser cerrada por cualquiera de las partes

  2. Frame puede contener la razón de cierre y estas no necesitan ser legible por humanos

  3. No se deben enviar más frames de datos después de enviado el close frame

  4. Close frame es devuelto (echo)

  5. Cuando ya se ha enviado y recibido el close frame, se procede a cerrar la conexión TCP

HTML5 WebSocket API

  1. No es parte de HTML5

  2. Forma de uso

    1. Crear objeto WebSocket

    2. Abrir conexión

    3. Definir evento de recepción de mensaje (websocket.onmessage)

    4. Definir evento de envío de mensajes (websocket.send)

    5. Comunicarse

    6. Cerrar WebSocket cerrando el browser o con websocket.close

Browsers Support

Todos los últimos browser admiten la más reciente especificación de WebSockets (RFC 6455) menos Android Browser.

  1. Firefox 11 (PC y Android)

  2. Chrome 16 (PC, Mobile)

  3. Safari 6 (Max, iOS)

  4. Opera (PC, Mobile)

  5. Internet Explorer 10

Parte II: Demostraciones

Slide

  1. Server: Tornado (Python)

  2. Slide y Remote: deck.js y WebSockets en Javascript

Cuadrados

  1. Servidor: Tornado (Python)

  2. Cliente: KineticJS y Websockets en Javascript Codigo

/

#