1 / 54

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

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)

nola
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Real-time Web Applications Alexander Schulze Innotrade GmbH, Germany jwebsocket.org 13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany

  2. 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

  3. Real-time Applikationen Information Interaktion 13.02.2012 Realtime Web Apps und NFC 3

  4. 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

  5. Real-time Web ZauberwortWebSockets W3C/IETFTCP Kommunikations Protokoll 13.02.2012 Realtime Web Apps und NFC 5

  6. 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

  7. 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

  8. WebSockets Neues Paradigma Request/Response für Dokumente bidirektionale Realtime- Kommunikation für Applikationen 13.02.2012 Realtime Web Apps und NFC 8

  9. WebSockets Neue Strukturen starre Client/Server Strukturen dynamisch skalierbareCluster gemanagte Service-Knoten 13.02.2012 Realtime Web Apps und NFC 9

  10. 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

  11. 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

  12. WebSockets • Im Vergleich zu http... • schneller billiger portabler 13.02.2012 Realtime Web Apps und NFC 12

  13. 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

  14. WebSockets WebSockets bringenUserzusammen! der verschiedenenPlattformen 13.02.2012 Realtime Web Apps und NFC 14

  15. WebSockets Tool-Support? enge Integration in bestehende Frameworks 13.02.2012 Realtime Web Apps und NFC 15

  16. Sencha/ExtJS Integration Integration von Realtime-Kommunikationin das ExtJSFramework Online-Collaborationmit ExtJS 13.02.2012 Realtime Web Apps und NFC 16

  17. 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

  18. Online Collaboration Browser jWebSocket Server ExtJSPlugIn WebSocket Client (js) Sencha/ExtJS (js) 13.02.2012 Realtime Web Apps und NFC 18

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. 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

  31. Online Collaboration • Zusammenarbeit an Texten, Bildern, Zeichnungen etc. in Echtzeit im Web • SharedCanvas Demo Realtime Web Apps und NFC

  32. 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

  33. Online Collaboration Browser jWebSocket Server SharedCanvasPlugIn WebSocket Client (js) jQuery (js) 13.02.2012 Realtime Web Apps und NFC 33

  34. RemoteMonitoring • RemoteMonitoring von PC- und Server-Systemen basierend auf Sigar Hardware und BindowsGauges Library • Monitoring Demo Realtime Web Apps und NFC

  35. 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

  36. 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

  37. RealtimeCharting • RealtimeCharting basierend auf der Sencha/ExtJSChartingEngine • Charting Demo Realtime Web Apps und NFC

  38. 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

  39. 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

  40. Automatisierter SMS-Versand • SMS-Gateway: • Captcha geschützt • Beliebiger Providerintegrierbar • SMS und MMS • SMS-Demo 13.02.2012 Realtime Web Apps und NFC 40

  41. 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

  42. 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

  43. Captcha Integration von Captchas alsSicherheitsfaktor,Angriffs- und Spam-Schutz Captcha-Demo 13.02.2012 Realtime Web Apps und NFC 43

  44. 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

  45. Online Collaboration Browser jWebSocket Server WebSocket Client (js) jCaptcha Plug-in jQuery (js) jCaptcha Framework 13.02.2012 Realtime Web Apps und NFC 45

  46. RemoteControl Hardware-Steuerungund -Kontrolle über Webbasierend auf Arduinound jWebSocket Arduino Demo 13.02.2012 Realtime Web Apps und NFC 46

  47. 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

  48. RemoteControl Browser Device jWebSocket Server Arduino micro-controller ArduinoRemoteControlPlugIn WebSocket Client (js) ArduinoConnection Device 13.02.2012 Realtime Web Apps und NFC 48

  49. Online Gaming • Realtime Online- Gaming mit einer Vielzahl von Clients • Ping-PongGame Realtime Web Apps und NFC

  50. 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

More Related