Post on 31-May-2015
description
13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany
Alexander Schulze Innotrade GmbH, Germany jwebsocket.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 2 13.02.2012
Information Interaktion
Real-time Applikationen
Realtime Web Apps und NFC 3 13.02.2012
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
Realtime Web Apps und NFC 4 13.02.2012
Zauberwort
WebSockets
W3C/IETF TCP Kommunikations Protokoll
Real-time Web
Realtime Web Apps und NFC 5 13.02.2012
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
Realtime Web Apps und NFC 6 13.02.2012
WebSocket Protokoll
• permanente Verbindungen, kein Auf-/Abbau mehr
• effizienter Full-Duplex-Modus, kein Warten im Halb-Duplex-Modus
• bidirektional auf einem TCP Kanal statt zweier HTTP Kanäle
• Realtime Push ohne Polling Delays
Realtime Web Apps und NFC 7 13.02.2012
Nachher
Neues Paradigma
Request/Response für Dokumente
bidirektionale Realtime- Kommunikation für Applikationen
WebSockets
Realtime Web Apps und NFC 8 13.02.2012
Neue Strukturen
dynamisch skalierbare Cluster gemanagte Service-Knoten
starre Client/Server Strukturen
Realtime Web Apps und NFC 9 13.02.2012
WebSockets
Warum sollte ich?
bis zu 1/1000 des HTTP Overheads,
TCP Verbindung
nur rund 1/3 der Latenz,
permanente Verbindung
Realtime Web Apps und NFC 10 13.02.2012
WebSockets
Lohnt sich das?
nur ein TCP Port spart 50% serverseitiger Ressourcen
standardisiert durch IETF/W3C
sichert Investitionen!
Realtime Web Apps und NFC 11 13.02.2012
WebSockets
Im Vergleich zu http...
schneller billiger portabler
Realtime Web Apps und NFC 12 13.02.2012
WebSockets
Technologie-Stand?
• verfügbar auf allen modernen Browsern (RFC 6455), Fallbacks für ältere
• verfügbar auf allen Plattformen, wird ständig ausgebaut
• Java, C# und Python
Realtime Web Apps und NFC 13 13.02.2012
WebSockets
WebSockets bringen
User zusammen! der verschiedenen
Plattformen
Realtime Web Apps und NFC 14 13.02.2012
WebSockets
Tool-Support?
enge Integration in bestehende Frameworks
Realtime Web Apps und NFC 15 13.02.2012
WebSockets
Sencha/ExtJS Integration
Integration von Realtime-Kommunikation in das ExtJS Framework
Realtime Web Apps und NFC 16 13.02.2012
Online-Collaboration mit ExtJS
Was haben Sie davon? • Integration von WebSockets
in ExtJS-Anwendungen
• ersetzt AJAX-Engine durch WebSocket-Engine
• weltweite Datensynchronisierung in Echtzeit
• jWebSocket und Sencha/ExtJS als Basis für Online-Collaboration
Realtime Web Apps und NFC 17 13.02.2012
Online Collaboration
Realtime Web Apps und NFC 18 13.02.2012
Online Collaboration
Sencha/ExtJS (js)
Browser
WebSocket Client (js) ExtJSPlugIn
jWebSocket 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
Realtime Web Apps und NFC 19 13.02.2012
WebSockets – Models
jWebSocket Framework
TCP NIO
JBoss Netty
Glass- Fish
Eclipse Jetty
System Plug-In
Custom App
3rd-Party App
Custom Plug-In
jWebSocket Framework
• austauschbare Engines
• stand-alone oder eingebetteter Betrieb
• Plug-ins und WebSocket Apps
• vollständig offen
Realtime Web Apps und NFC 20 13.02.2012
WebSockets – Models
XML JSON
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“
jWebSocket Framework
Token-Processor
Native Client
Browser Client
Realtime Web Apps und NFC 21 13.02.2012
WebSockets – Interoperability
jWebSocket Framework
WebSocket Services
WebSocket Apps
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 oder Comet Fallback
Realtime Web Apps und NFC 22 13.02.2012
jWebSocket Framework
WebSocket Services
WebSocket Apps
WebSockets – Interoperability
Cross-Plattform-Kompatibilität
• Android
• iPad/iPhone
• Symbian/BlackBerry
• Windows Phone
• weitere in Planung (z. B. Bada)
• Java, C#, Python...
Realtime Web Apps und NFC 23 13.02.2012
jWebSocket Sicherheit
• Verschlüsselung
• SSL/TLS
• ws:// and wss://
• Authentifizierung und Autorisierung
• Filter
WebSockets – Models
wss://
jWebSocket Framework
In System-Filter Out
Client
In Custom-Filter Out
Realtime Web Apps und NFC 24 13.02.2012
WebSockets – Models
jWebSocket Framework
Collab. Suite Online-Game
Channel 2 „WorkTogether“
Channel 1 „PlayTheGame“
Player 1 Player 2 Collab. Memb1
Collab. Memb2
jWebSocket Channels
• Publish/subscribe
• privat/öffentlich
• Authentifizierung
• separate Applikationen
Realtime Web Apps und NFC 25 13.02.2012
jWebSocket Events
• Event-Driven Programming using the Observable Pattern
• Publish/Subscribe-Mechanismus
WebSocket – Event Model
Sub
scri
be
Pu
blish
Observer 1
( Client ) Observer 2
( Client )
ws://
Observable (Server)
Realtime Web Apps und NFC 26 13.02.2012
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
Realtime Web Apps und NFC 27 13.02.2012
Smartcards und NFC
Authentifizierung in Web Apps über Smart Cards und jWebSocket
NFC und Smart Card Demo
Realtime Web Apps und NFC 28 13.02.2012
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
Realtime Web Apps und NFC 29 13.02.2012
Smartcards und NFC
Realtime Web Apps und NFC 30 13.02.2012
Smart Cards und NFC
Custom Application Middleware
jWebSocket Server
Middleware Operation Manager
Java Applet (bridge)
Browser
WebSocket Client (js)
Custom Application
Card Reader
Card
Online Collaboration
Zusammenarbeit an Texten, Bildern, Zeichnungen etc. in Echtzeit im Web
Shared Canvas Demo
Realtime Web Apps und NFC 31 13.02.2012
Was haben Sie davon? • Kooperation vieler Personen auf einer
gemeinsamen Internet Plattform in Echtzeit
• Änderungen unverzüglich für alle Teilnehmer sichtbar und bearbeitbar
• betriebssystem- und browserunabhängig
Realtime Web Apps und NFC 32 13.02.2012
Online Collaboration
Realtime Web Apps und NFC 33 13.02.2012
Online Collaboration
jQuery (js)
Browser
WebSocket Client (js) SharedCanvasPlugIn
jWebSocket Server
Remote Monitoring
Realtime Web Apps und NFC 34 13.02.2012
Remote Monitoring von PC- und Server-Systemen basierend auf Sigar Hardware und Bindows Gauges Library
Monitoring Demo
Was haben Sie davon? • Ressourcenüberwachung von Computern
in Echtzeit über das Internet
• unverzügliche Mitteilung bei Überlastung oder Ressourcenausfall, E-Mail, SMS...
• betriebssystemunabhängig (u.a. Linux, Windows, Mac OS, Solaris)
• möglich von jedem Computer, Tablet oder SmartPhone
Realtime Web Apps und NFC 35 13.02.2012
Remote Monitoring
Realtime Web Apps und NFC 36 13.02.2012
Remote Monitoring
Bindows Gauges
JavaScript
Browser
WebSocket Client (js)
Sigar Library
jWebSocket Server
Monitoring Plug-in
jQuery (js)
WebSocket
Realtime Charting
Realtime Web Apps und NFC 37 13.02.2012
Realtime Charting basierend auf der Sencha/ExtJS Charting Engine
Charting Demo
Was haben Sie davon? • Darstellung relevanter Serverdaten in Echtzeit
innerhalb frei konfigurierbarer Intervalle (z. B. Auslastung, Nutzer, Anfragen)
• hohe Geschwindigkeit und Genauigkeit bei der Abfrage von Verbindungsdaten
• komfortable und zügige Übersicht über relevante Informationen durch grafische Visualisierung
Realtime Web Apps und NFC 38 13.02.2012
Realtime Charting
Realtime Web Apps und NFC 39 13.02.2012
Remote Charting
jWebSocket Sencha Plug-in (Extjs)
Charting Demo (App)
Browser
WebSocket Client (js)
Server Database
MongoDB
Sigar Library
jWebSocket Server
Monitoring Plug-in (java)
Automatisierter SMS-Versand
SMS-Gateway: • Chaptcha geschützt • Beliebiger Provider
integrierbar • SMS und MMS
SMS-Demo
Realtime Web Apps und NFC 40 13.02.2012
Automatisierter SMS-Versand
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
Realtime Web Apps und NFC 41 13.02.2012
Automatisierter SMS-Versand
Realtime Web Apps und NFC 42 13.02.2012
HTTP WebSocket
jQuery (js)
Browser
WebSocket Client (js)
Server Database
SMS trade SMS Plug-in
jWebSocket Server
Captcha
Integration von Captchas als Sicherheitsfaktor, Angriffs- und Spam-Schutz Captcha-Demo
Realtime Web Apps und NFC 43 13.02.2012
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
Realtime Web Apps und NFC 44 13.02.2012
Remote Monitoring
Realtime Web Apps und NFC 45 13.02.2012
Online Collaboration
jQuery (js)
Browser
WebSocket Client (js)
jCaptcha Framework
jWebSocket Server
jCaptcha Plug-in
Remote Control
Hardware requests and controls via web based on Arduino and jWebSocket Arduino Demo
Realtime Web Apps und NFC 46 13.02.2012
Was haben Sie davon? • Remote Control in Echtzeit via Web
• Kontrolle der Arduino Hardware über jWebSocket
• effiziente Steuerung von zeitsensitiven Prozessen
• schnelle und sichere Kommunikation vom Controller zum Gerät
• basierend auf Events, die vom jWebSocket Server gestreamt werden
Realtime Web Apps und NFC 47 13.02.2012
Remote Control
Realtime Web Apps und NFC 48 13.02.2012
Remote Control
Browser
WebSocket Client (js)
Device
Device ArduinoConnection
jWebSocket Server
ArduinoRemoteControlPlugIn
Arduino micro-controller
Online Gaming
Realtime Online- Gaming mit einer Vielzahl von Clients
Ping-Pong Game
Realtime Web Apps und NFC 49 13.02.2012
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
Realtime Web Apps und NFC 50 13.02.2012
Online Gaming
Realtime Web Apps und NFC 51 13.02.2012
Online Gaming
jws-plugin-1.0 (js)
jQuery (js)
Browser
WebSocket Client (js)
Server Database
MongoDB PingPongPlugIn
jWebSocket Server
Realtime Web Apps und NFC 52 13.02.2012
Besonderen Dank an alle jWebSocket Comitter der
Facultad Regional Mártires de Artemisa
Realtime Web Apps und NFC 53 13.02.2012
Fragen & Antworten Alexander Schulze
a.schulze@jwebsocket.org
Forum & Download: http://jwebsocket.org, @jWebSocket
Danke für Ihre Aufmerksamkeit!
Realtime Web Apps und NFC 54 13.02.2012