540 likes | 699 Views
Real-time Web Applications. Alexander Schulze Innotrade GmbH, Germany jwebsocket.org. 13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany. Heutige Session. Agenda Einführung: Realtime Apps und WebSockets Integration in Frameworks (ExtJS)
E N D
Real-time Web Applications Alexander Schulze Innotrade GmbH, Germany jwebsocket.org 13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany
Heutige Session Agenda • Einführung:Realtime Apps und WebSockets • Integration in Frameworks (ExtJS) • Demos: NFC & Smart-Cards, SMS,Remote Control & Monitoring,Online-Collaboration, Online-Gaming • Diskussion 13.02.2012 Realtime Web Apps und NFC 2
Real-time Applikationen Information Interaktion 13.02.2012 Realtime Web Apps und NFC 3
Web im Wandel • 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 Web1.0 Web2.0 Web3.0 13.02.2012 Realtime Web Apps und NFC 4
Real-time Web ZauberwortWebSockets W3C/IETFTCP Kommunikations Protokoll 13.02.2012 Realtime Web Apps und NFC 5
Vorher HTTP Protokoll • entwickelt für Dokumentenübertragung • umständliche Tricks zurAnnäherung an Realtime • Polling, Long-Polling, Reverse-AJAX,Cometetc. • letztlichnicht-standardisierte Hacks • bleibt Request/Response-Mechanismus 13.02.2012 Realtime Web Apps und NFC 6
Nachher • 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 13.02.2012 Realtime Web Apps und NFC 7
WebSockets Neues Paradigma Request/Response für Dokumente bidirektionale Realtime- Kommunikation für Applikationen 13.02.2012 Realtime Web Apps und NFC 8
WebSockets Neue Strukturen starre Client/Server Strukturen dynamisch skalierbareCluster gemanagte Service-Knoten 13.02.2012 Realtime Web Apps und NFC 9
WebSockets Warum sollte ich? bis zu 1/1000 des HTTP Overheads, TCP Verbindung nur rund 1/3 der Latenz, permanente Verbindung 13.02.2012 Realtime Web Apps und NFC 10
WebSockets Lohnt sich das? nur ein TCP Port spart 50% serverseitiger Ressourcen standardisiert durch IETF/W3Csichert Investitionen! 13.02.2012 Realtime Web Apps und NFC 11
WebSockets • Im Vergleich zu http... • schneller billiger portabler 13.02.2012 Realtime Web Apps und NFC 12
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 13.02.2012 Realtime Web Apps und NFC 13
WebSockets WebSockets bringenUserzusammen! der verschiedenenPlattformen 13.02.2012 Realtime Web Apps und NFC 14
WebSockets Tool-Support? enge Integration in bestehende Frameworks 13.02.2012 Realtime Web Apps und NFC 15
Sencha/ExtJS Integration Integration von Realtime-Kommunikationin das ExtJSFramework Online-Collaborationmit ExtJS 13.02.2012 Realtime Web Apps und NFC 16
Online Collaboration • 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 13.02.2012 Realtime Web Apps und NFC 17
Online Collaboration Browser jWebSocket Server ExtJSPlugIn WebSocket Client (js) Sencha/ExtJS (js) 13.02.2012 Realtime Web Apps und NFC 18
jWebSocket Konzept • Framework vs. Client/Server • 3rd Party Engines und Server • MessageRouting, Stream, Send, Broadcast, Events, Channels • Tokens und Plug-Ins • Listener und Apps • Filter und Verschlüsselung 13.02.2012 Realtime Web Apps und NFC 19
WebSockets – Models jWebSocket Framework • austauschbare Engines • stand-alone odereingebetteter Betrieb • Plug-ins undWebSocketApps • vollständig offen Custom Plug-In 3rd-Party App System Plug-In Custom App jWebSocket Framework Eclipse Jetty Glass- Fish TCP NIO JBoss Netty 13.02.2012 Realtime Web Apps und NFC 20
WebSockets – Models jWebSocketTokens • 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“ Browser Client Native Client JSON XML Token-Processor jWebSocket Framework 13.02.2012 Realtime Web Apps und NFC 21
WebSockets – Interoperability Cross-Browser-Kompatibilität • nativer Support fürChrome 4+, FF 4+, IE 10,Safari 5+, Opera 11+, • Flash-Fallback fürältere Browser • Long-Polling oderComet Fallback jWebSocket Framework WebSocket Services WebSocketApps 13.02.2012 Realtime Web Apps und NFC 22
WebSockets – Interoperability Cross-Plattform-Kompatibilität • Android • iPad/iPhone • Symbian/BlackBerry • Windows Phone • weitere in Planung(z. B. Bada) • Java, C#, Python... jWebSocket Framework WebSocket Services WebSocketApps 13.02.2012 Realtime Web Apps und NFC 23
WebSockets – Models Client jWebSocket Sicherheit • Verschlüsselung • SSL/TLS • Authentifizierung undAutorisierung • ws:// and wss:// • Filter wss:// In Custom-Filter Out In System-Filter Out jWebSocket Framework 13.02.2012 Realtime Web Apps und NFC 24
WebSockets – Models jWebSocketChannels • Publish/subscribe • privat/öffentlich • Authentifizierung • separate Applikationen Player 2 Collab. Memb2 Player 1 Collab. Memb1 Channel 2 „WorkTogether“ Channel 1 „PlayTheGame“ jWebSocket Framework Collab. Suite Online-Game 13.02.2012 Realtime Web Apps und NFC 25
WebSocket – Event Model jWebSocket Events • Event-DrivenProgrammingusingtheObservable Pattern • Publish/Subscribe-Mechanismus Observer 1( Client ) Observer 2( Client ) Subscribe Publish ws:// Observable (Server) 13.02.2012 Realtime Web Apps und NFC 26
WebSocket – Plug-ins 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 13.02.2012 Realtime Web Apps und NFC 27
NFC und Smart Cards • Authentifizierung in Web Apps über Smart Cards und jWebSocket • NFC und Smart Card Demo 13.02.2012 Realtime Web Apps und NFC 28
Online Collaboration • 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 13.02.2012 Realtime Web Apps und NFC 29
Online Collaboration jWebSocket Server Browser Card Reader Middleware Operation Manager WebSocket Client (js) Card Custom Application Middleware Java Applet (bridge) Custom Application 13.02.2012 Realtime Web Apps und NFC 30
Online Collaboration • Zusammenarbeit an Texten, Bildern, Zeichnungen etc. in Echtzeit im Web • SharedCanvas Demo Realtime Web Apps und NFC
Online Collaboration • 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 13.02.2012 Realtime Web Apps und NFC 32
Online Collaboration Browser jWebSocket Server SharedCanvasPlugIn WebSocket Client (js) jQuery (js) 13.02.2012 Realtime Web Apps und NFC 33
RemoteMonitoring • RemoteMonitoring von PC- und Server-Systemen basierend auf Sigar Hardware und BindowsGauges Library • Monitoring Demo Realtime Web Apps und NFC
RemoteMonitoring • 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 13.02.2012 Realtime Web Apps und NFC 35
RemoteMonitoring WebSocket Browser jWebSocket Server WebSocket Client (js) Monitoring Plug-in jQuery (js) Bindows Gauges Sigar Library JavaScript 13.02.2012 Realtime Web Apps und NFC 36
RealtimeCharting • RealtimeCharting basierend auf der Sencha/ExtJSChartingEngine • Charting Demo Realtime Web Apps und NFC
RealtimeCharting • 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 13.02.2012 Realtime Web Apps und NFC 38
RemoteCharting Browser Server Database jWebSocket Server Monitoring Plug-in (java) WebSocket Client (js) MongoDB jWebSocket Sencha Plug-in (Extjs) Sigar Library Charting Demo (App) 13.02.2012 Realtime Web Apps und NFC 39
Automatisierter SMS-Versand • SMS-Gateway: • Captcha geschützt • Beliebiger Providerintegrierbar • SMS und MMS • SMS-Demo 13.02.2012 Realtime Web Apps und NFC 40
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 13.02.2012 Realtime Web Apps und NFC 41
Automatisierter SMS-Versand WebSocket HTTP Browser Server Database jWebSocket Server SMS Plug-in WebSocket Client (js) SMS trade jQuery (js) 13.02.2012 Realtime Web Apps und NFC 42
Captcha Integration von Captchas alsSicherheitsfaktor,Angriffs- und Spam-Schutz Captcha-Demo 13.02.2012 Realtime Web Apps und NFC 43
RemoteMonitoring • 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 13.02.2012 Realtime Web Apps und NFC 44
Online Collaboration Browser jWebSocket Server WebSocket Client (js) jCaptcha Plug-in jQuery (js) jCaptcha Framework 13.02.2012 Realtime Web Apps und NFC 45
RemoteControl Hardware-Steuerungund -Kontrolle über Webbasierend auf Arduinound jWebSocket Arduino Demo 13.02.2012 Realtime Web Apps und NFC 46
RemoteControl • 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 13.02.2012 Realtime Web Apps und NFC 47
RemoteControl Browser Device jWebSocket Server Arduino micro-controller ArduinoRemoteControlPlugIn WebSocket Client (js) ArduinoConnection Device 13.02.2012 Realtime Web Apps und NFC 48
Online Gaming • Realtime Online- Gaming mit einer Vielzahl von Clients • Ping-PongGame Realtime Web Apps und NFC
Online Gaming • 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 13.02.2012 Realtime Web Apps und NFC 50