Stay Connected Realtime-Webapplikationen mit jWebSocket Alexander Schulze Predrag Stojadinovic jWebSocket – Open Source Cross-Browser/Cross-Platform WebSocket

Stay ConnectedRealtime-Webapplikationen mit jWebSocket

Alexander SchulzePredrag Stojadinovic

jWebSocket – Open Source Cross-Browser/Cross-Platform WebSocket Solution

Die heutige Session

• Agenda• Kommunikation mit WebSockets

Wo, Was, Warum, Wie, Wohin

• WebSocket Browser Clients

• WebSocket Server Apps und Erweiterungen

• WebSockets für mobile Apps

• Demos und Code Beispiele

jWebSocket – Stay Connected 211.10.2010

Apps im Wandel

• Weniger Information - mehr Kommunikation• Entertainment, sofortiger Erlebnisaustausch

• Wir werden immer mehr (mobil) online sein• Text, Fotos, Videos, Music, Geo-Location etc.

• Angebote für stationäre und mobile Geräte• Browser-, Desktop- und Mobile-Apps verschmelzen

• WebSockets helfen die User besser zu verbinden


Grundlage WebSockets

• WebSockets sind bidirektional und permanent• Effiziente Echtzeit-Kommunikation statt

umständlichem Request/Response-Protokoll

• WebSockets helfen Interoperabilität herzustellen• Standardisierter Handshake und Paketaustausch

für stationäre und mobile Plattformen

• Web und Mobile Apps brauchen...• sichere, zuverlässige und schnelle Kommunikation


Was wir haben: HTTP

• HTTP - designed zur Übertragung von Dokumenten

• Alle umständlichen, nearly realtime Tricks wie...• Polling, Reverse-AJAX, Comet,

• Flash-Plug-Ins, Java-Applets etc.

• ...sind letztlich nicht standardisierte Hacks!

• HTTP bleibt ein Request/Response Mechanismus


Nearly Realtime Mechanismen

• Polling• Senden regelmäßiger Anfragen mit sofortiger Antwort

• Viele Verbindungen, hohes Volumen, niedrige Effizienz(insbesondere bei niedriger Datenrate)

• Long Polling• Regelmäßige Anfragen mit Offenhalten der Verbindung

• Hohes Volumen, 2 Kanäle pro Client, Puffer-Problem, viele Verbindungen (insbesondere bei hoher Datenrate)


Kosten

• Kalkulation Volumen und Bandbreite HTTP• Annahme: 800 Bytes für Requests + Response (bis 2KB)

• 1.000 Clients x 800 Bytes = 800 KB => 6,4 Mbit/s

• 10.000 Clients x 800 Bytes = 8 MB => 64 Mbit/s

• 100.000 Clients x 800 Bytes = 80 MB => 640 Mbit/s

• Und das nur für‘s Protokoll – ohne Nutzdaten !


WebSockets ?

• WebSockets – Was ist das ?• Bidirektionales Full-Duplex Protokoll

zwischen Browser Clients und WebSocket Server

• Ebenso für Desktop oder Mobile Apps verwendbar

• Designed für permanente/langhaltende Verbindungen

• Standardisiert in HTML5, W3C-API, IETF-Protokoll(http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-02)

• WebSockets sind TCP – nicht HTTP – basiert !jWebSocket – Stay Connected 811.10.2010

TCP statt HTTP

• Umfangreiche Freiheiten• Keinerlei Bindung an bestimmte Datenformate

• Keinerlei Vorgaben für Inhalte oder Verarbeitung

• Aber auch hohe Verantwortung• Datenformate und Kommunikationslogik

müssen selbst implementiert werden

• Ebenso alle Sicherheitsmechanismen !


Verbindungsaufbau

• Handshake


Client

GET {path} HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: {hostname}:{port}Origin: http://{host}[:{port}]Sec-WebSocket-Key1: {sec-key1}Sec-WebSocket-Key2: {sec-key2}

8 Bytes generated {sec-key3}

Verbindungsaufbau

• Handshake (Same Origin Policy, IETF Draft #76)


Client

GET /services/chat/;room=Foyer HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: jwebsocket.orgOrigin: http://jwebsocket.orgSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Sec-WebSocket-Key2: 12998 5 Y3 1 .P00

^n:ds[4U

Server

HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Origin: http://jwebsocket.orgSec-WebSocket-Location: ws://jwebsocket.org/ services/chat

8jKS'y:G*Co,Wxa-

Bidirektionaler Datenaustausch

• Textframes• 0x00 <UTF8-Textdaten> 0xFF

• Keine theoretische Längenbegrenzung, JavaScript: 4 GB

• Binärframes• 0x80-0xFF <Länge> <Binäre Daten>

• Änderungen! Das WebSocket Protokoll lebt!• IEFT Draft #76 -> Draft #02, Sep. 24 inkl. Control-

Frames


WebSockets TCP vs. HTTP

• Kalkulation Volumen und Bandbreite WebSockets• Feststellung: 2 Bytes für Requests + Response




• Protokoll-Overhead: Ein-vierhundert-stel !jWebSocket – Stay Connected 1311.10.2010

WebSockets – Warum?

• Schneller, billiger, offener• Schlankere Kommunikation (TCP vs. HTTP overhead)

WebSockets ersetzen XHR und Comet schrittweise

• Belegt nur einen Kanal (bidirektional, full-duplex)

• Ressourcenschonend und kostenreduzierend,doppelt so viele Clients gleichzeitig pro Server

• Keine Protokollvorgaben oderBindung an bestimmte Datenformate


WebSockets - Wofür

• WebSockets sind die perfekte Basis für...• Online-Games und Online-Collaboration

• Remote Control und Monitoring

• Streaming und Chat

• Soziale Netzwerke

• Cluster und Grids

• Service-Dienste


Paradigmen-Wechsel

• WebSockets:Nicht nur eine Kommunikations-Technologie,sondern ein Paradigmen-Wechsel

• Browser:Nicht mehr Tool zur Dokumentendarstellung,sondern intelligentes Anwendungs-Terminal


HTML5 Browser

• WebSockets im Browser


var lWebSocketClient = new WebSocket("ws://jwebsocket.org:8787"); // tries to open the TCP connection and to exchange handshake

lWebSocketClient.onopen = function(aEvent) { // connection has successfully been established}lWebSocketClient.onmessage = function(aEvent) { // a data packet has completely been received in aEvent.data}lWebSocketClient.onclose = function(aEvent) { // the connection has been terminated}lWebSocketClient.send("Hello World!"); // sends a UTF-8 text message to the server

lWebSocketClient.close(); // terminates the connection

Kompatibilität

• X-Browser und X-Plattform kompatibel• Nativ in Chrome 4/5/6, Firefox 4, Safari 5,

IE 6/7/8, Opera 9/10 und ältere Browsermit FlashBridge

• Clients für Android, Symbian und Blackberry, iPhone ab Dezember 2010


Token

• jWebSocket Token Modell• Alle Knoten in einem WebSocket Netzwerk

sind von Geburt an erstmal dumm

• Alle Beteiligten müssen sich auf eine gemeinsame Sprache einigen, um eingehende Pakete zu „verstehen“

• Zum Beispiel JSON, XML oder auch CSV(WebSocket Subprotokoll: jWebSocket-JSON...)

• Abstrakt: Datenobjekte, in jWebSocket „Token“


jWebSocket Server

• Server Infrastruktur• Engines

• Tokens

• Server

• Filter

• Plug-Ins

• Listener


jWebSocket JavaScript Client

• Client Infrastruktur• Basis WebSocket Client

• Token Client

• Erweiterbar mit Plug-Ins

• Features• Connection Management

• Session Management

• Authentifizierung und Autorisierung


WebSockets – Wie?

• Fertige Libraries verfügbar (Open Source, LGPL)• Browser Client in JavaScript

jWebSocket.js inkl. FlashBridge und JSON Support

• jWebSocket Serverals .jar, .war, .exe oder Service

• Client für Java SE z.B. für Swing Desktop Apps

• Clients für Android, Symbian und BlackBerry(iPhone ab Dezember 2010)


jWebSocket - Server

• Stand-Alone Server• Einfachste Installation (download, unzip, run)

• Nur Webserver nötig (z.B. Apache), für neue Web-Apps

• als .jar Betriebssystem-unabhängig (exe4j für Windows)

• Integration in bestehende (Web-)Apps• Java Apps oder Web-Apps, z.B. Tomcat oder GlassFish

• Kombimodelle aus Servlets und WebSockets


Integration in WebApps

• Context-Listener in Tomcat


public class ContextListener implements ServletContextListener {

public void contextInitialized(ServletContextEvent sce) { // start the jWebSocket server sub system JWebSocketFactory.start("");

// assign web socket server to servlet bridge servlet ServletBridge.setServer((TokenServer)JWebSocketFactory.getServer("ts0")); } public void contextDestroyed(ServletContextEvent sce) { // stop the jWebSocket server sub system JWebSocketFactory.stop(); }}

WebSocket Programmierung

• Businesslogik auf dem jWebSocket Server• Plug-Ins (Server um eigene Funktionen erweitern)

• für applikationsübergreifende Standard-Funktionen

• Listener (Server in eigene Applikation einbinden)

• für anwendungs-/kundenspezifische Funktionen• Channels

• für Message-Routing zwischen Clients• und separate Anwendungskontexte


jWebSocket - Plug-Ins

• jWebSocket um Standard-Funktionen erweitern• System-, Chat-, Streaming- und JDBC-Plug-In

• RPC/RRPC-, SharedObjects- und FileSharing-PlugIn

• API für eigene Plug-Ins• MyPlugIn.jar als separates Produkt distributierbar,

eigener Namespace (org.my.plugin.smsgateway)

• Leicht integrierbar/konfigurierbar über jWebSocket.xml

• LGPL Lizenz erlaubt auch kommerzielle Plug-Ins


jWebSocket - PlugIn-Chain


jWebSocket - Listener

• Eigene App um WebSocket Funktionen erweitern• jWebSocketServer.jar einbinden

• Eigene Listener-Klasse erstellen durchImplementieren des WebSocketListener Interface

• Listener-Klasse registrieren(global am Server oder an Channel)

• Eingehende Tokens verarbeiten und Antworten senden


jWebSocket Listener - Code


jWebSocket - ListenerChain


jWebSocket - Channels

• Message-Routing via Channels• Mehrere Apps oder Services auf einem Server

• Keine echte Logik - vielmehr Vermittlungsservice

• Server verwaltet Channels (Message-Queues)

• Subscribe/Unsubscribe Mechanismus• Clients, Plug-Ins oder Listener hören „global“

oder registrieren sich an einem oder mehreren Channels

• Antworten ebenfalls global oder „kanalisiert“


WebSocket - Sicherheit

• Authentifizierung und Autorisierung• Integrierte SecurityFactory, Rechte and Rollen

Mgmt

• API für JDBC, LDAP und OpenID (SSO), ab v0.11

• Filterung• Inbound und Outbound Paket- und Token-Filter

• Verschlüsselung• SSL (wss://), transparent für die Applikation


Filterchain


jWebSocket - Listener (Code)


Android - Dalvik VM

• Android Apps in Java• Im Prinzip Java 1.5, inkl. Collections, Annotations etc.

• Google‘s eigene Dalvik VM: optimiert für mobile Geräte,sehr kompakt, aber leider nicht byte-code kompatibel

• Wie schon unter Java ME leidlich erfahren:Write Once Run Everwhere gehört der Vergangenheit an

• Spezielle Android Builds der Libraries erforderlich, eigene re-compilieren, Third-Party Libs im Source


Listener

• Gleiches API wie bei den Web Clients


public interface WebSocketClientListener {

void processOpened(WebSocketClientEvent aEvent);

void processPaket(WebSocketClientEvent aEvent, WebSocketPacket aPacket);

void processClosed(WebSocketClientEvent aEvent);

}

Low-Level-Interface

• Java Client für Android, Symbian und BlackBerry


public interface WebSocketClient { void open(String aURL) throws WebSocketException; void send(WebSocketPacket aPacket) throws WebSocketException; void close() throws WebSocketException; boolean isConnected();

void addListener(WebSocketClientListener aListener); void removeListener(WebSocketClientListener aListener);

void notifyOpened(WebSocketClientEvent aEvent); void notifyPacket(WebSocketClientEvent aEvent, WebSocketPacket(aPacket); void notifyClosed(WebSocketClientEvent aEvent);}

Java WebSocket Client


Android Demo App

• MainActivity• Listview

• ConfigActivity• URL

• Username

• Password


Android Fundamentals


• WebSocket App• Verbindung aufbauen

• Nachrichten empfangen

• Nachrichten senden

• Nachrichten broadcasten

• Verbindung trennen

Android Canvas Demo

• Online-Collaboration• Mehrere Benutzer arbeiten

am gleichen Dokument

• Beispiel:SharedCanvas


Android - Fotos übertragen

• Imagetransfer• jWebSocket FileSystem Plug-In

• Benachrichtigung bei Änderungen

• Binärdaten werden Base64codiert, Optimierung mit neuemBinärprotokoll umgehend erwartet

• http://jwebsocket.org/Snapshot Demo!


Ausblick

• Wir haben noch viel vor...• SSO und Authentification/Autorisation API

• Remote Procedure Calls (RPC und RRPC)

• Cloud API, Smart Grids und Cluster

• Shared Objects und FileSharing API

• JDBC Bridge und Database API

• Externe Service Nodes


In eigener Sache

• Das jWebSocket Team sucht Unterstützung!• Java EE, SE, ME, JavaScript, Objective C...• Android, Symbian, BlackBerry, iPhone...• Ideen für innovative Apps willkommen!

• Wir bieten...• Umfangreiche Erfahrungen eines

internationalen Teams• Erstklassigen Support für eigene Projekte• Unterstützung beim Aufbau eigener Reputation


Vielen Dank für Ihre Aufmerksamkeit !

Fragen & AntwortenAlexander Schulze

Predrag Stojadinovic

Forum & Downloadhttp://jwebsocket.org @jWebSocket


Documents

Stay Connected Realtime-Webapplikationen mit jWebSocket Alexander Schulze Predrag Stojadinovic jWebSocket – Open Source Cross-Browser/Cross-Platform WebSocket