SlideShare ist ein Scribd-Unternehmen logo
1 von 54
Downloaden Sie, um offline zu lesen
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
  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 5




13.02.2012                  Realtime Web Apps und NFC      4
Real-time Web

                     Zauberwort


             WebSockets

                     W3C/IETF
             TCP Kommunikations Protokoll

13.02.2012           Realtime Web Apps und NFC       5
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


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 Kanal
        statt 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 skalierbare
             Cluster gemanagte Service-Knoten




13.02.2012           Realtime Web Apps und NFC      9
WebSockets


Warum sollte ich?
                  1/1000 des HTTP Overheads,
             bis zu
             TCP Verbindung
             nur rund1/3   der Latenz,
             permanente Verbindung




13.02.2012                    Realtime Web Apps und NFC      10
WebSockets


Lohnt 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
WebSockets


Im Vergleich zu http...

             schneller
             billiger
             portabler

13.02.2012        Realtime Web Apps und NFC      12
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

13.02.2012                Realtime Web Apps und NFC      13
WebSockets




WebSockets bringen

User         der verschiedenen
             Plattformen         zusammen!


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-
                                             Kommunikation
                                             in das ExtJS
                                             Framework

                                         Online-Collaboration
                                         mit ExtJS

13.02.2012   Realtime Web Apps und NFC                          16
Online Collaboration


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




13.02.2012               Realtime Web Apps und NFC         17
Online Collaboration




                   Browser                           jWebSocket Server


             WebSocket Client (js)                       ExtJSPlugIn


              Sencha/ExtJS (js)




13.02.2012                   Realtime Web Apps und NFC                   18
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



13.02.2012              Realtime Web Apps und NFC       19
WebSockets – Models


jWebSocket 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      Netty




13.02.2012                  Realtime Web Apps und NFC                               20
WebSockets – Models


jWebSocket 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
WebSockets – Interoperability


Cross-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 Fallback



13.02.2012                  Realtime Web Apps und NFC                             22
WebSockets – Interoperability


Cross-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
WebSockets – Models


jWebSocket Sicherheit                                         Client

      • Verschlüsselung                                       wss://

      • SSL/TLS                                        In Custom-Filter Out
      • ws:// and wss://
                                                       In System-Filter Out
      • Authentifizierung und
        Autorisierung
      • Filter                                         jWebSocket Framework




13.02.2012                 Realtime Web Apps und NFC                          24
WebSockets – Models


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




13.02.2012                 Realtime Web Apps und NFC                                 25
WebSocket – Event Model


jWebSocket 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
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
Smartcards und NFC




                                         Authentifizierung in Web
                                         Apps über Smart Cards
                                         und jWebSocket



                                               NFC und Smart
                                               Card Demo


13.02.2012   Realtime Web Apps und NFC                         28
Smartcards und NFC


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
Smart Cards und NFC




   jWebSocket Server           Browser                  Card Reader

 Middleware Operation
                        WebSocket Client (js)              Card
       Manager

  Custom Application
                        Java Applet (bridge)         Custom Application
     Middleware




13.02.2012               Realtime Web Apps und NFC                        30
Online Collaboration




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

                                               Shared Canvas
                                               Demo



13.02.2012   Realtime Web Apps und NFC                         31
Online Collaboration


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




13.02.2012               Realtime Web Apps und NFC         32
Online Collaboration




                   Browser                           jWebSocket Server


             WebSocket Client (js)                  SharedCanvasPlugIn


                  jQuery (js)




13.02.2012                   Realtime Web Apps und NFC                   33
Remote Monitoring




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

                                               Monitoring Demo



13.02.2012   Realtime Web Apps und NFC                       34
Remote Monitoring


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



13.02.2012               Realtime Web Apps und NFC          35
Remote Monitoring



                                                            WebSocket

                      Browser                                           jWebSocket Server


                WebSocket Client (js)                                   Monitoring Plug-in


    Bindows Gauges                jQuery (js)                             Sigar Library


        JavaScript




13.02.2012                              Realtime Web Apps und NFC                            36
Realtime Charting




                                         Realtime Charting
                                         basierend auf der
                                         Sencha/ExtJS Charting
                                         Engine

                                               Charting Demo




13.02.2012   Realtime Web Apps und NFC                         37
Realtime Charting


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



13.02.2012                Realtime Web Apps und NFC        38
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
Automatisierter SMS-Versand




                                         SMS-Gateway:
                                         • Chaptcha geschützt
                                         • Beliebiger Provider
                                           integrierbar
                                         • 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                     jWebSocket Server                  Server Database


 WebSocket Client (js)                   SMS Plug-in                      SMS trade


        jQuery (js)




13.02.2012                           Realtime Web Apps und NFC                            42
Captcha




                                         Integration von
                                         Captchas als
                                         Sicherheitsfaktor,
                                         Angriffs- und
                                         Spam-Schutz

                                                Captcha-Demo



13.02.2012   Realtime Web Apps und NFC                         43
Remote Monitoring


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
Remote Control




                                         Hardware requests
                                         and controls via web
                                         based on Arduino and
                                         jWebSocket

                                               Arduino Demo



13.02.2012   Realtime Web Apps und NFC                          46
Remote Control


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

13.02.2012                Realtime Web Apps und NFC        47
Remote Control




         Browser          jWebSocket Server                  Device

                         ArduinoRemoteControl             Arduino micro-
 WebSocket Client (js)
                                PlugIn                      controller

                          ArduinoConnection                  Device




13.02.2012                Realtime Web Apps und NFC                        48
Online Gaming




                                         Realtime Online-
                                         Gaming mit einer
                                         Vielzahl von Clients


                                                Ping-Pong Game




13.02.2012   Realtime Web Apps und NFC                          49
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
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
Besonderen Dank an alle jWebSocket Comitter der




               Facultad Regional Mártires de Artemisa




13.02.2012                Realtime Web Apps und NFC            52
13.02.2012   Realtime Web Apps und NFC   53
Danke für Ihre Aufmerksamkeit!


               Fragen & Antworten
                      Alexander Schulze
                   a.schulze@jwebsocket.org




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



13.02.2012               Realtime Web Apps und NFC         54

Weitere ähnliche Inhalte

Ähnlich wie Realtime Web Applications with jWebSocket

Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Digicomp Academy AG
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8chmoser79
 
Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8chmoser79
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Jürg Stuker
 
Die besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDie besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDieter Ziegler
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...DNUG e.V.
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?GFU Cyrus AG
 
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien DNUG e.V.
 
WorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-ToolsWorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-ToolsDirk Steinkopf
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRPush-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRChristian Heindel
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and PollingKai Donato
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT Group
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgDNUG e.V.
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1DNUG e.V.
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDNUG e.V.
 
2006 - Basta!: Web 2.0 mit asp.net 2.0
2006 - Basta!: Web 2.0 mit asp.net 2.02006 - Basta!: Web 2.0 mit asp.net 2.0
2006 - Basta!: Web 2.0 mit asp.net 2.0Daniel Fisher
 

Ähnlich wie Realtime Web Applications with jWebSocket (20)

Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8Roadmap von Microsoft UI Technologien und Windows 8
Roadmap von Microsoft UI Technologien und Windows 8
 
Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8Roadmap von Microsoft UI-Technologien und Windows 8
Roadmap von Microsoft UI-Technologien und Windows 8
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
Die besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDie besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-Apps
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien
 
WorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-ToolsWorNet Präsentation: Web 2.0, clevere IT-Tools
WorNet Präsentation: Web 2.0, clevere IT-Tools
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRPush-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalR
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
2006 - Basta!: Web 2.0 mit asp.net 2.0
2006 - Basta!: Web 2.0 mit asp.net 2.02006 - Basta!: Web 2.0 mit asp.net 2.0
2006 - Basta!: Web 2.0 mit asp.net 2.0
 

Realtime Web Applications with jWebSocket

  • 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 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 5 13.02.2012 Realtime Web Apps und NFC 4
  • 5. Real-time Web Zauberwort WebSockets W3C/IETF TCP Kommunikations Protokoll 13.02.2012 Realtime Web Apps und NFC 5
  • 6. 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 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 Kanal statt 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 skalierbare Cluster gemanagte Service-Knoten 13.02.2012 Realtime Web Apps und NFC 9
  • 10. WebSockets Warum sollte ich? 1/1000 des HTTP Overheads, bis zu TCP Verbindung nur rund1/3 der Latenz, permanente Verbindung 13.02.2012 Realtime Web Apps und NFC 10
  • 11. WebSockets Lohnt 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. WebSockets Im Vergleich zu http... schneller billiger portabler 13.02.2012 Realtime Web Apps und NFC 12
  • 13. 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 13.02.2012 Realtime Web Apps und NFC 13
  • 14. WebSockets WebSockets bringen User der verschiedenen Plattformen zusammen! 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- Kommunikation in das ExtJS Framework Online-Collaboration mit ExtJS 13.02.2012 Realtime Web Apps und NFC 16
  • 17. Online Collaboration 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 13.02.2012 Realtime Web Apps und NFC 17
  • 18. Online Collaboration Browser jWebSocket Server WebSocket Client (js) ExtJSPlugIn Sencha/ExtJS (js) 13.02.2012 Realtime Web Apps und NFC 18
  • 19. 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 13.02.2012 Realtime Web Apps und NFC 19
  • 20. WebSockets – Models jWebSocket 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 Netty 13.02.2012 Realtime Web Apps und NFC 20
  • 21. WebSockets – Models jWebSocket 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. WebSockets – Interoperability Cross-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 Fallback 13.02.2012 Realtime Web Apps und NFC 22
  • 23. WebSockets – Interoperability Cross-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. WebSockets – Models jWebSocket Sicherheit Client • Verschlüsselung wss:// • SSL/TLS In Custom-Filter Out • ws:// and wss:// In System-Filter Out • Authentifizierung und Autorisierung • Filter jWebSocket Framework 13.02.2012 Realtime Web Apps und NFC 24
  • 25. WebSockets – Models jWebSocket 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. Suite 13.02.2012 Realtime Web Apps und NFC 25
  • 26. WebSocket – Event Model jWebSocket 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. 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. Smartcards und NFC Authentifizierung in Web Apps über Smart Cards und jWebSocket NFC und Smart Card Demo 13.02.2012 Realtime Web Apps und NFC 28
  • 29. Smartcards und NFC 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. Smart Cards und NFC jWebSocket Server Browser Card Reader Middleware Operation WebSocket Client (js) Card Manager Custom Application Java Applet (bridge) Custom Application Middleware 13.02.2012 Realtime Web Apps und NFC 30
  • 31. Online Collaboration Zusammenarbeit an Texten, Bildern, Zeichnungen etc. in Echtzeit im Web Shared Canvas Demo 13.02.2012 Realtime Web Apps und NFC 31
  • 32. Online Collaboration 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 13.02.2012 Realtime Web Apps und NFC 32
  • 33. Online Collaboration Browser jWebSocket Server WebSocket Client (js) SharedCanvasPlugIn jQuery (js) 13.02.2012 Realtime Web Apps und NFC 33
  • 34. Remote Monitoring Remote Monitoring von PC- und Server-Systemen basierend auf Sigar Hardware und Bindows Gauges Library Monitoring Demo 13.02.2012 Realtime Web Apps und NFC 34
  • 35. Remote Monitoring 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 13.02.2012 Realtime Web Apps und NFC 35
  • 36. Remote Monitoring WebSocket Browser jWebSocket Server WebSocket Client (js) Monitoring Plug-in Bindows Gauges jQuery (js) Sigar Library JavaScript 13.02.2012 Realtime Web Apps und NFC 36
  • 37. Realtime Charting Realtime Charting basierend auf der Sencha/ExtJS Charting Engine Charting Demo 13.02.2012 Realtime Web Apps und NFC 37
  • 38. Realtime Charting 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 13.02.2012 Realtime Web Apps und NFC 38
  • 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. Automatisierter SMS-Versand SMS-Gateway: • Chaptcha geschützt • Beliebiger Provider integrierbar • 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 jWebSocket Server Server Database WebSocket Client (js) SMS Plug-in SMS trade jQuery (js) 13.02.2012 Realtime Web Apps und NFC 42
  • 43. Captcha Integration von Captchas als Sicherheitsfaktor, Angriffs- und Spam-Schutz Captcha-Demo 13.02.2012 Realtime Web Apps und NFC 43
  • 44. Remote Monitoring 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. Remote Control Hardware requests and controls via web based on Arduino and jWebSocket Arduino Demo 13.02.2012 Realtime Web Apps und NFC 46
  • 47. Remote Control 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 13.02.2012 Realtime Web Apps und NFC 47
  • 48. Remote Control Browser jWebSocket Server Device ArduinoRemoteControl Arduino micro- WebSocket Client (js) PlugIn controller ArduinoConnection Device 13.02.2012 Realtime Web Apps und NFC 48
  • 49. Online Gaming Realtime Online- Gaming mit einer Vielzahl von Clients Ping-Pong Game 13.02.2012 Realtime Web Apps und NFC 49
  • 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
  • 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. Besonderen Dank an alle jWebSocket Comitter der Facultad Regional Mártires de Artemisa 13.02.2012 Realtime Web Apps und NFC 52
  • 53. 13.02.2012 Realtime Web Apps und NFC 53
  • 54. Danke für Ihre Aufmerksamkeit! Fragen & Antworten Alexander Schulze a.schulze@jwebsocket.org Forum & Download: http://jwebsocket.org, @jWebSocket 13.02.2012 Realtime Web Apps und NFC 54