13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany

13. – 14. Februar 2012Radisson Blu HotelHamburg, Germany

Alexander SchulzeInnotrade GmbH, Germanyjwebsocket.org

Real-time Web Applications

Agenda• Einführung:

Realtime Apps und WebSockets

• Integration in Frameworks (ExtJS)

• Demos: NFC & Smart-Cards, SMS,Remote Control & Monitoring,Online-Collaboration, Online-Gaming

• Diskussion

Heutige Session

Realtime Web Apps und NFC 213.02.2012

Information Interaktion

Real-time Applikationen


Geschichte Dokumente, Anfrage/Antwort

(http), nur ganze Seiten oder Frames

Dokumente, Anfrage/Antwort (http),

partielle Aktualisierung, HTML 4

Anwendungen, permanente Verb. (tcp)

Single Page Interface, HTML 5

Web 1.0

Web 2.0

Web 3.0

Web im Wandel


Zauberwort

WebSockets

W3C/IETFTCP Kommunikations Protokoll

Real-time Web


Vorher

HTTP Protokoll• entwickelt für Dokumentenübertragung

• umständliche Tricks zur Annäherung an Realtime

• Polling, Long-Polling, Reverse-AJAX, Comet etc.

• letztlich nicht-standardisierte Hacks

• bleibt Request/Response-Mechanismus


WebSocket Protokoll•permanente Verbindungen,kein Auf-/Abbau mehr

•effizienter Full-Duplex-Modus,kein Warten im Halb-Duplex-Modus

•bidirektional auf einem TCP Kanalstatt zweier HTTP Kanäle

•Realtime Push ohne Polling Delays


Nachher

Neues Paradigma

Request/Response für Dokumente

bidirektionale Realtime- Kommunikation für Applikationen

WebSockets


Neue Strukturen

dynamisch skalierbareCluster gemanagte Service-Knoten

starre Client/Server Strukturen


WebSockets

Warum sollte ich?

bis zu 1/1000 des HTTP Overheads,TCP Verbindung

nur rund 1/3 der Latenz,permanente Verbindung


WebSockets

Lohnt sich das?

nur ein TCP Port spart 50% serverseitiger Ressourcen

standardisiert durch IETF/W3C

sichert Investitionen!


WebSockets

Im Vergleich zu http...

schnellerbilligerportabler


WebSockets

Technologie-Stand?•verfügbar auf allenmodernen Browsern(RFC 6455),Fallbacks für ältere

•verfügbar auf allenPlattformen, wird ständig ausgebaut

•Java, C# und Python


WebSockets

WebSockets bringen

User zusammen!

der verschiedenenPlattformen


WebSockets

Tool-Support?enge Integration in bestehende Frameworks


WebSockets

Sencha/ExtJS Integration

Integration Integration von Realtime-von Realtime-Kommunikation Kommunikation in das ExtJS in das ExtJS FrameworkFramework


Online-Collaboration Online-Collaboration mit ExtJSmit ExtJS

Was haben Sie davon?•Integration von HTML5-WebSockets in ExtJS-Anwendungen

•ersetzt AJAX-Engine durch WebSocket-Engine

•weltweite Datensynchronisierung in Echtzeit

•jWebSocket und Sencha/ExtJS als Basis für Online-Collaboration


Online Collaboration



Sencha/ExtJS (js)

BrowserBrowser

WebSocket Client (js)

ExtJSPlugIn

jWebSocket ServerjWebSocket Server

jWebSocket

Konzept• Framework vs. Client/Server• 3rd Party Engines und Server• Message Routing, Stream,

Send, Broadcast, Events, Channels

• Tokens und Plug-Ins• Listener und Apps• Filter und Verschlüsselung


WebSockets – Models

jWebSocket FrameworkjWebSocket Framework

TCPNIOTCPNIO

JBossNettyJBossNetty

Glass-Fish

Glass-Fish

EclipseJetty

EclipseJetty

System

Plug-In

System

Plug-In

Custom

App

Custom

App

3rd-PartyApp

3rd-PartyApp

Custom

Plug-In

Custom

Plug-In

jWebSocket Framework• austauschbare Engines

• stand-alone odereingebetteter Betrieb

• Plug-ins undWebSocket Apps

• vollständig offen



XMLJSON

jWebSocket Tokens• WebSocket-Verbindungen

sind dumm.

• Es wird eine einheitliche Sprache benötigt, um hereinkommende Pakete zu verstehen.

• Datenformate: JSON, XML oder CSV

• Lösung: Abstrakte Datenobjekte, sogenannte „Tokens“


Token-ProcessorToken-Processor

NativeClientNativeClient

BrowserClient

BrowserClient


WebSockets – Interoperability


WebSocket Services

WebSocket Services

WebSocketApps

WebSocketApps

Cross-Browser-Kompatibilität• nativer Support für

Chrome 4+, FF 4+, IE 10,Safari 5+, Opera 11+,

• Flash-Fallback fürältere Browser

• Long-Polling oderComet Fallback



WebSocket Services

WebSocket Services

WebSocketApps

WebSocketApps

WebSockets – Interoperability

Cross-Plattform-Kompatibilität• Android

• iPad/iPhone

• Symbian/BlackBerry

• Windows Phone

• weitere in Planung(z. B. Bada)

• Java, C#, Python...


jWebSocket Sicherheit• Verschlüsselung

• SSL/TLS

• Authentifizierung undAutorisierung

• ws:// and wss://

• Filter


wss://


In System-Filter OutIn System-Filter Out

ClientClient

In Custom-Filter OutIn Custom-Filter Out




Collab. SuiteCollab. SuiteOnline-GameOnline-Game

Channel 2„WorkTogether“

Channel 2„WorkTogether“

Channel 1„PlayTheGame“

Channel 1„PlayTheGame“

Player 1

Player 1

Player 2

Player 2

Collab.Memb1Collab.Memb1

Collab.Memb2Collab.Memb2

jWebSocket Channels• Publish/subscribe

• privat/öffentlich

• Authentifizierung

• separate Applikationen


jWebSocket Events• Event-Driven Programming

using the Observable Pattern

• Publish/Subscribe-Mechanismus

WebSocket – Event Model

PublishObserver 1( Client )

Observer 1( Client )



ws://

Observable (Server)Observable (Server)


jWebSocket Plug-Ins• JDBC, SMTP, XMPP (Jabber), JMS, JMX

• Remote Procedure Calls, C2S-, S2C- und C2C

• Object and Filesharing, Captcha and Authentication

• SmartCards, NFC, Chat, Streaming, Twitter

• Logging, Statistics, Reporting, Administration

• Monitoring, Remote Control, Arduino

WebSocket – Plug-ins


NFC und Smart Cards

Authentifizierung in Authentifizierung in Web Apps über Web Apps über Smart Cards und Smart Cards und jWebSocketjWebSocket

NFC und Smart NFC und Smart Card DemoCard Demo


Was haben Sie davon?•Authentifizierung, Zugangskontrolle, Zeiterfassung

•Individuelle Verschlüsselung

•Hervorragend einsetzbar für Bezahl- und Clubsysteme

•Applet, Java Card kompatibel

•Unterstützung Kontaktkarten,kontaktlosen Smart Cards und NFC-Devices





Custom Application Middleware


Middleware Operation Manager

Java Applet (bridge)

BrowserBrowser


Custom Application

Card ReaderCard Reader

Card


Zusammenarbeit an Zusammenarbeit an Texten, Bildern, Texten, Bildern, Zeichnungen etc. in Zeichnungen etc. in Echtzeit im WebEchtzeit im Web

Shared Canvas Shared Canvas DemoDemo


Was haben Sie davon?•Kooperation vieler Personen auf einergemeinsamen Internet Plattform in Echtzeit

•Änderungen unverzüglich für alle Teilnehmersichtbar und bearbeitbar

•betriebssystem- und browserunabhängig





jQuery (js)

BrowserBrowser


SharedCanvasPlugIn


Remote Monitoring


Remote Monitoring Remote Monitoring von PC- und Server-von PC- und Server-Systemen basierend Systemen basierend auf Sigar Hardware auf Sigar Hardware und Bindows Gauges und Bindows Gauges LibraryLibrary

Monitoring Monitoring DemoDemo

Was haben Sie davon?•Ressourcenüberwachung von Computernin Echtzeit über das Internet

•unverzügliche Mitteilung bei Überlastungoder Ressourcenausfall, E-Mail, SMS...

•betriebssystemunabhängig (u.a. Linux, Windows, Mac OS, Solaris)

•möglich von jedem Computer, Tablet oder SmartPhone


Remote Monitoring


Remote Monitoring

Bindows Gauges

JavaScript

BrowserBrowser


Sigar Library


Monitoring Plug-in

jQuery (js)

WebSocket

Realtime Charting


Realtime Charting Realtime Charting basierend auf der basierend auf der Sencha/ExtJS Sencha/ExtJS Charting EngineCharting Engine

Charting DemoCharting Demo

Was haben Sie davon?•Darstellung relevanter Serverdaten in Echtzeitinnerhalb frei konfigurierbarer Intervalle(z. B. Auslastung, Nutzer, Anfragen)

•hohe Geschwindigkeit und Genauigkeit bei derAbfrage von Verbindungsdaten

•komfortable und zügige Übersicht über relevante Informationen durch grafische Visualisierung


Realtime Charting


Remote Charting

jWebSocket Sencha Plug-in

(Extjs)

Charting Demo (App)

BrowserBrowser


Server DatabaseServer Database

MongoDB

Sigar Library


Monitoring Plug-in (java)

Automatisierter SMS-Versand

SMS-Gateway:SMS-Gateway:•Captcha geschütztCaptcha geschützt•Beliebiger ProviderBeliebiger Providerintegrierbarintegrierbar•SMS und MMSSMS und MMS

SMS-DemoSMS-Demo



Was haben Sie davon?•SMS-Versand über WebSocket-Verbindung

•Zustellung und Sammlung von Daten für den Austausch mit anderen Anwendungen

•Sofortiger Versand dringender Nachrichten

•direkter Kanal to jedem Mobilfunknutzer

•hohe Zustellgeschwindigkeit

•internationale Abdeckung




HTTPWebSocket

jQuery (js)

BrowserBrowser



SMS tradeSMS Plug-in


Captcha

Integration von Integration von Captchas alsCaptchas alsSicherheitsfaktor,Sicherheitsfaktor,Angriffs- und Angriffs- und Spam-SchutzSpam-Schutz

Captcha-DemoCaptcha-Demo


Was haben Sie davon?•Ultraschnelle Erstellung von Captchas bei WebSocket-Verbindungen

•Schutz vor automatischer Software, die Sicherheitsmechanismen unterwandern

•Spamschutz

•Begrenzung und Kontrolle von persönlichem Zugang zu bestimmten Systemen


Remote Monitoring



jQuery (js)

BrowserBrowser


jCaptcha Framework


jCaptcha Plug-in

Remote Control

Hardware-SteuerungHardware-Steuerungund -Kontrolle über und -Kontrolle über WebWebbasierend auf Arduino basierend auf Arduino und jWebSocketund jWebSocket

Arduino DemoArduino Demo


Was haben Sie davon?•Remote Control in Echtzeit via Web

•Kontrolle der Arduino Hardware über jWebSocket

•effiziente Steuerung von zeitsensitiven Prozessen

•enorm schnelle und sichere Kommunikationvom Controller zum Gerät

•basierend auf Events, die vom jWebSocket Server gestreamt werden


Remote Control


Remote Control

BrowserBrowser


DeviceDevice

DeviceArduinoConnection


ArduinoRemoteControlPlugIn

Arduino micro-controller

Online Gaming

Realtime Online- Realtime Online- Gaming mit einer Gaming mit einer Vielzahl von ClientsVielzahl von Clients

Ping-Pong Ping-Pong GameGame


Was haben Sie davon?•ermöglicht Online Gaming mit einer Vielzahl von Spielern in Echtzeit

•erfasst individuelle Spielereigenschaften

•bietet umfassendes Spielermanagement

•erfasst Kollisionen schnell und genau


Online Gaming


Online Gaming

jws-plugin-1.0 (js)

jQuery (js)

BrowserBrowser



MongoDBPingPongPlugIn



Besonderen Dank an alle jWebSocket Comitter der

Facultad Regional Mártires de Artemisa

Fragen & AntwortenAlexander Schulze

[email protected]

Forum & Download: http://jwebsocket.org, @jWebSocket

Danke für Ihre Aufmerksamkeit!


13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany

Documents

Transcript of 13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany