Real-time Web ApplicationsAlexander SchulzeInnotrade GmbH, Germanyjwebsocket.org                          13. – 14. Februa...
Heutige SessionAgenda      • Einführung:        Realtime Apps und WebSockets      • Integration in Frameworks (ExtJS)     ...
Real-time Applikationen         Information                Interaktion13.02.2012        Realtime Web Apps und NFC         3
Web im WandelGeschichte  Web        1.0   Dokumente, Anfrage/Antwort (http),                   nur ganze Seiten oder Frame...
Real-time Web                     Zauberwort             WebSockets                     W3C/IETF             TCP Kommunika...
VorherHTTP Protokoll      • entwickelt für Dokumentenübertragung      • umständliche Tricks        zur Annäherung an Realt...
NachherWebSocket Protokoll      • permanente Verbindungen,        kein Auf-/Abbau mehr      • effizienter Full-Duplex-Modu...
WebSocketsNeues Paradigma             Request/Response für Dokumente             bidirektionale Realtime-             Komm...
WebSocketsNeue Strukturen             starre Client/Server Strukturen             dynamisch skalierbare             Cluste...
WebSocketsWarum sollte ich?                  1/1000 des HTTP Overheads,             bis zu             TCP Verbindung     ...
WebSocketsLohnt sich das?                            spart 50%             nur ein TCP Port             serverseitiger Res...
WebSocketsIm Vergleich zu http...             schneller             billiger             portabler13.02.2012        Realti...
WebSocketsTechnologie-Stand?      • verfügbar auf allen        modernen Browsern        (RFC 6455),        Fallbacks für ä...
WebSocketsWebSockets bringenUser         der verschiedenen             Plattformen         zusammen!13.02.2012            ...
WebSocketsTool-Support?enge Integration in bestehende Frameworks13.02.2012             Realtime Web Apps und NFC      15
Sencha/ExtJS Integration                                             Integration                                          ...
Online CollaborationWas haben Sie davon?     • Integration von WebSockets       in ExtJS-Anwendungen     • ersetzt AJAX-En...
Online Collaboration                   Browser                           jWebSocket Server             WebSocket Client (j...
jWebSocketKonzept     • Framework vs. Client/Server     • 3rd Party Engines und Server     • Message Routing, Stream, Send...
WebSockets – ModelsjWebSocket Framework      • austauschbare Engines              System         Custom                   ...
WebSockets – ModelsjWebSocket Tokens     • WebSocket-Verbindungen sind                    Browser       Native       dumm....
WebSockets – InteroperabilityCross-Browser-Kompatibilität     • nativer Support für       Chrome 4+, FF 4+, IE 10,       S...
WebSockets – InteroperabilityCross-Plattform-Kompatibilität     • Android     • iPad/iPhone     • Symbian/BlackBerry      ...
WebSockets – ModelsjWebSocket Sicherheit                                         Client      • Verschlüsselung            ...
WebSockets – ModelsjWebSocket Channels     • Publish/subscribe                Player 1       Player 2                     ...
WebSocket – Event ModeljWebSocket Events                                                             Observer 1           ...
WebSocket – Plug-insjWebSocket Plug-Ins     • JDBC, SMTP, XMPP (Jabber), JMS, JMX     • Remote Procedure Calls, C2S-, S2C-...
Smartcards und NFC                                         Authentifizierung in Web                                       ...
Smartcards und NFCWas haben Sie davon?     • Authentifizierung, Zugangskontrolle, Zeiterfassung     • Individuelle Verschl...
Smart Cards und NFC   jWebSocket Server           Browser                  Card Reader Middleware Operation               ...
Online Collaboration                                         Zusammenarbeit an                                         Tex...
Online CollaborationWas haben Sie davon?     • Kooperation vieler Personen auf einer       gemeinsamen Internet Plattform ...
Online Collaboration                   Browser                           jWebSocket Server             WebSocket Client (j...
Remote Monitoring                                         Remote Monitoring von                                         PC...
Remote MonitoringWas haben Sie davon?     • Ressourcenüberwachung von Computern       in Echtzeit über das Internet     • ...
Remote Monitoring                                                            WebSocket                      Browser       ...
Realtime Charting                                         Realtime Charting                                         basier...
Realtime ChartingWas haben Sie davon?     • Darstellung relevanter Serverdaten in Echtzeit       innerhalb frei konfigurie...
Remote Charting         Browser         jWebSocket Server           Server Database                         Monitoring Plu...
Automatisierter SMS-Versand                                         SMS-Gateway:                                         •...
Automatisierter SMS-VersandWas haben Sie davon?     • SMS-Versand über WebSocket-Verbindung     • Zustellung und Sammlung ...
Automatisierter SMS-Versand                         WebSocket                               HTTP         Browser          ...
Captcha                                         Integration von                                         Captchas als      ...
Remote MonitoringWas haben Sie davon?     • Ultraschnelle Erstellung von Captchas bei       WebSocket-Verbindungen     • S...
Online Collaboration                   Browser                           jWebSocket Server             WebSocket Client (j...
Remote Control                                         Hardware requests                                         and contr...
Remote ControlWas haben Sie davon?     • Remote Control in Echtzeit via Web     • Kontrolle der Arduino Hardware       übe...
Remote Control         Browser          jWebSocket Server                  Device                         ArduinoRemoteCon...
Online Gaming                                         Realtime Online-                                         Gaming mit ...
Online GamingWas haben Sie davon?     • ermöglicht Online Gaming mit einer Vielzahl von       Spielern in Echtzeit     • e...
Online Gaming         Browser         jWebSocket Server           Server Database WebSocket Client (js)    PingPongPlugIn ...
Besonderen Dank an alle jWebSocket Comitter der               Facultad Regional Mártires de Artemisa13.02.2012            ...
13.02.2012   Realtime Web Apps und NFC   53
Danke für Ihre Aufmerksamkeit!               Fragen & Antworten                      Alexander Schulze                   a...
Upcoming SlideShare
Loading in …5
×

Realtime Web Applications with jWebSocket

3,454 views
3,300 views

Published on

Alexander Schulze at Mobile Developer Conference MDC 2012, presenting Real-time Apps with jWebSocket. Integration with Sencha/ExtJS, jQuery and PhoneGap, NFC and SmartCards, SMS, Captcha, Remote Control and Monitoring, Online-Collaboration and Online-Gaming. Imparting WebSocket knowledge and benefits of bidirectional full-duplex TC communication vs. http. Cross-Plattform compatible for native and web based, stationary and mobile Apps. With special thanks to the entire Team of Artemisa/UCI.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • jWebSocket is the best team ever seen, this conference surely will open a new door to the future, we hope our technology be useful for everyone out there!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,454
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
22
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Realtime Web Applications with jWebSocket

  1. 1. Real-time Web ApplicationsAlexander SchulzeInnotrade GmbH, Germanyjwebsocket.org 13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany
  2. 2. Heutige SessionAgenda • Einführung: Realtime Apps und WebSockets • Integration in Frameworks (ExtJS) • Demos: NFC & Smart-Cards, SMS, Remote Control & Monitoring, Online-Collaboration, Online-Gaming • Diskussion13.02.2012 Realtime Web Apps und NFC 2
  3. 3. Real-time Applikationen Information Interaktion13.02.2012 Realtime Web Apps und NFC 3
  4. 4. Web im WandelGeschichte Web 1.0 Dokumente, Anfrage/Antwort (http), nur ganze Seiten oder Frames Dokumente, Anfrage/Antwort (http), Web 2.0 partielle Aktualisierung, HTML 4 Anwendungen, permanente Verb. (tcp) Web 3.0 Single Page Interface, HTML 513.02.2012 Realtime Web Apps und NFC 4
  5. 5. Real-time Web Zauberwort WebSockets W3C/IETF TCP Kommunikations Protokoll13.02.2012 Realtime Web Apps und NFC 5
  6. 6. VorherHTTP 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-Mechanismus13.02.2012 Realtime Web Apps und NFC 6
  7. 7. NachherWebSocket 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 Delays13.02.2012 Realtime Web Apps und NFC 7
  8. 8. WebSocketsNeues Paradigma Request/Response für Dokumente bidirektionale Realtime- Kommunikation für Applikationen13.02.2012 Realtime Web Apps und NFC 8
  9. 9. WebSocketsNeue Strukturen starre Client/Server Strukturen dynamisch skalierbare Cluster gemanagte Service-Knoten13.02.2012 Realtime Web Apps und NFC 9
  10. 10. WebSocketsWarum sollte ich? 1/1000 des HTTP Overheads, bis zu TCP Verbindung nur rund1/3 der Latenz, permanente Verbindung13.02.2012 Realtime Web Apps und NFC 10
  11. 11. WebSocketsLohnt sich das? spart 50% nur ein TCP Port serverseitiger Ressourcen standardisiert durch IETF/W3C sichert Investitionen!13.02.2012 Realtime Web Apps und NFC 11
  12. 12. WebSocketsIm Vergleich zu http... schneller billiger portabler13.02.2012 Realtime Web Apps und NFC 12
  13. 13. WebSocketsTechnologie-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 Python13.02.2012 Realtime Web Apps und NFC 13
  14. 14. WebSocketsWebSockets bringenUser der verschiedenen Plattformen zusammen!13.02.2012 Realtime Web Apps und NFC 14
  15. 15. WebSocketsTool-Support?enge Integration in bestehende Frameworks13.02.2012 Realtime Web Apps und NFC 15
  16. 16. Sencha/ExtJS Integration Integration von Realtime- Kommunikation in das ExtJS Framework Online-Collaboration mit ExtJS13.02.2012 Realtime Web Apps und NFC 16
  17. 17. Online CollaborationWas 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-Collaboration13.02.2012 Realtime Web Apps und NFC 17
  18. 18. Online Collaboration Browser jWebSocket Server WebSocket Client (js) ExtJSPlugIn Sencha/ExtJS (js)13.02.2012 Realtime Web Apps und NFC 18
  19. 19. jWebSocketKonzept • 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üsselung13.02.2012 Realtime Web Apps und NFC 19
  20. 20. WebSockets – ModelsjWebSocket Framework • austauschbare Engines System Custom 3rd- Custom Party Plug-In Plug-In App • stand-alone oder App eingebetteter Betrieb jWebSocket Framework • Plug-ins und WebSocket Apps TCP Eclipse Glass- JBoss • vollständig offen NIO Jetty Fish Netty13.02.2012 Realtime Web Apps und NFC 20
  21. 21. WebSockets – ModelsjWebSocket Tokens • WebSocket-Verbindungen sind Browser Native dumm. Client Client • Es wird eine einheitliche Sprache JSON XML benötigt, um hereinkommende Pakete zu verstehen. Token-Processor • Datenformate: JSON, XML oder CSV jWebSocket Framework • Lösung: Abstrakte Datenobjekte, sogenannte „Tokens“13.02.2012 Realtime Web Apps und NFC 21
  22. 22. WebSockets – InteroperabilityCross-Browser-Kompatibilität • nativer Support für Chrome 4+, FF 4+, IE 10, Safari 5+, Opera 11+, • Flash-Fallback für jWebSocket Framework ältere Browser • Long-Polling oder WebSocket WebSocket Services Apps Comet Fallback13.02.2012 Realtime Web Apps und NFC 22
  23. 23. WebSockets – InteroperabilityCross-Plattform-Kompatibilität • Android • iPad/iPhone • Symbian/BlackBerry jWebSocket Framework • Windows Phone • weitere in Planung WebSocket WebSocket (z. B. Bada) Services Apps • Java, C#, Python...13.02.2012 Realtime Web Apps und NFC 23
  24. 24. WebSockets – ModelsjWebSocket Sicherheit Client • Verschlüsselung wss:// • SSL/TLS In Custom-Filter Out • ws:// and wss:// In System-Filter Out • Authentifizierung und Autorisierung • Filter jWebSocket Framework13.02.2012 Realtime Web Apps und NFC 24
  25. 25. WebSockets – ModelsjWebSocket Channels • Publish/subscribe Player 1 Player 2 Collab. Collab. Memb1 Memb2 • privat/öffentlich Channel 1 Channel 2 • Authentifizierung „PlayTheGame“ „WorkTogether“ • separate Applikationen jWebSocket Framework Online-Game Collab. Suite13.02.2012 Realtime Web Apps und NFC 25
  26. 26. WebSocket – Event ModeljWebSocket Events Observer 1 Observer 2 • Event-Driven Programming ( Client ) ( Client ) using the Observable Pattern Subscribe Publish ws:// • Publish/Subscribe- Mechanismus Observable (Server)13.02.2012 Realtime Web Apps und NFC 26
  27. 27. WebSocket – Plug-insjWebSocket 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, Arduino13.02.2012 Realtime Web Apps und NFC 27
  28. 28. Smartcards und NFC Authentifizierung in Web Apps über Smart Cards und jWebSocket NFC und Smart Card Demo13.02.2012 Realtime Web Apps und NFC 28
  29. 29. Smartcards und NFCWas 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-Devices13.02.2012 Realtime Web Apps und NFC 29
  30. 30. Smart Cards und NFC jWebSocket Server Browser Card Reader Middleware Operation WebSocket Client (js) Card Manager Custom Application Java Applet (bridge) Custom Application Middleware13.02.2012 Realtime Web Apps und NFC 30
  31. 31. Online Collaboration Zusammenarbeit an Texten, Bildern, Zeichnungen etc. in Echtzeit im Web Shared Canvas Demo13.02.2012 Realtime Web Apps und NFC 31
  32. 32. Online CollaborationWas 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ängig13.02.2012 Realtime Web Apps und NFC 32
  33. 33. Online Collaboration Browser jWebSocket Server WebSocket Client (js) SharedCanvasPlugIn jQuery (js)13.02.2012 Realtime Web Apps und NFC 33
  34. 34. Remote Monitoring Remote Monitoring von PC- und Server-Systemen basierend auf Sigar Hardware und Bindows Gauges Library Monitoring Demo13.02.2012 Realtime Web Apps und NFC 34
  35. 35. Remote MonitoringWas 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 SmartPhone13.02.2012 Realtime Web Apps und NFC 35
  36. 36. Remote Monitoring WebSocket Browser jWebSocket Server WebSocket Client (js) Monitoring Plug-in Bindows Gauges jQuery (js) Sigar Library JavaScript13.02.2012 Realtime Web Apps und NFC 36
  37. 37. Realtime Charting Realtime Charting basierend auf der Sencha/ExtJS Charting Engine Charting Demo13.02.2012 Realtime Web Apps und NFC 37
  38. 38. Realtime ChartingWas 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 Visualisierung13.02.2012 Realtime Web Apps und NFC 38
  39. 39. Remote Charting Browser jWebSocket Server Server Database Monitoring Plug-in WebSocket Client (js) MongoDB (java) jWebSocket Sencha Sigar Library Plug-in (Extjs) Charting Demo (App)13.02.2012 Realtime Web Apps und NFC 39
  40. 40. Automatisierter SMS-Versand SMS-Gateway: • Chaptcha geschützt • Beliebiger Provider integrierbar • SMS und MMS SMS-Demo13.02.2012 Realtime Web Apps und NFC 40
  41. 41. Automatisierter SMS-VersandWas 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 Abdeckung13.02.2012 Realtime Web Apps und NFC 41
  42. 42. Automatisierter SMS-Versand WebSocket HTTP Browser jWebSocket Server Server Database WebSocket Client (js) SMS Plug-in SMS trade jQuery (js)13.02.2012 Realtime Web Apps und NFC 42
  43. 43. Captcha Integration von Captchas als Sicherheitsfaktor, Angriffs- und Spam-Schutz Captcha-Demo13.02.2012 Realtime Web Apps und NFC 43
  44. 44. Remote MonitoringWas 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 Systemen13.02.2012 Realtime Web Apps und NFC 44
  45. 45. Online Collaboration Browser jWebSocket Server WebSocket Client (js) jCaptcha Plug-in jQuery (js) jCaptcha Framework13.02.2012 Realtime Web Apps und NFC 45
  46. 46. Remote Control Hardware requests and controls via web based on Arduino and jWebSocket Arduino Demo13.02.2012 Realtime Web Apps und NFC 46
  47. 47. Remote ControlWas 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 werden13.02.2012 Realtime Web Apps und NFC 47
  48. 48. Remote Control Browser jWebSocket Server Device ArduinoRemoteControl Arduino micro- WebSocket Client (js) PlugIn controller ArduinoConnection Device13.02.2012 Realtime Web Apps und NFC 48
  49. 49. Online Gaming Realtime Online- Gaming mit einer Vielzahl von Clients Ping-Pong Game13.02.2012 Realtime Web Apps und NFC 49
  50. 50. Online GamingWas haben Sie davon? • ermöglicht Online Gaming mit einer Vielzahl von Spielern in Echtzeit • erfasst individuelle Spielereigenschaften • bietet umfassendes Spielermanagement • erfasst Kollisionen schnell und genau13.02.2012 Realtime Web Apps und NFC 50
  51. 51. Online Gaming Browser jWebSocket Server Server Database WebSocket Client (js) PingPongPlugIn MongoDB jws-plugin-1.0 (js) jQuery (js)13.02.2012 Realtime Web Apps und NFC 51
  52. 52. Besonderen Dank an alle jWebSocket Comitter der Facultad Regional Mártires de Artemisa13.02.2012 Realtime Web Apps und NFC 52
  53. 53. 13.02.2012 Realtime Web Apps und NFC 53
  54. 54. Danke für Ihre Aufmerksamkeit! Fragen & Antworten Alexander Schulze a.schulze@jwebsocket.org Forum & Download: http://jwebsocket.org, @jWebSocket13.02.2012 Realtime Web Apps und NFC 54

×