Realtime Web Applications with jWebSocket
Upcoming SlideShare
Loading in...5
×
 

Realtime Web Applications with jWebSocket

on

  • 3,352 views

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

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.

Statistics

Views

Total Views
3,352
Views on SlideShare
3,342
Embed Views
10

Actions

Likes
1
Downloads
21
Comments
1

4 Embeds 10

https://twitter.com 5
http://www.slashdocs.com 3
http://us-w1.rockmelt.com 1
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Realtime Web Applications with jWebSocket Realtime Web Applications with jWebSocket Presentation Transcript

  • Real-time Web ApplicationsAlexander SchulzeInnotrade GmbH, Germanyjwebsocket.org 13. – 14. Februar 2012 Radisson Blu Hotel Hamburg, Germany
  • 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
  • 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 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
  • Real-time Web Zauberwort WebSockets W3C/IETF TCP Kommunikations Protokoll13.02.2012 Realtime Web Apps und NFC 5
  • 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
  • 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
  • WebSocketsNeues Paradigma Request/Response für Dokumente bidirektionale Realtime- Kommunikation für Applikationen13.02.2012 Realtime Web Apps und NFC 8
  • WebSocketsNeue Strukturen starre Client/Server Strukturen dynamisch skalierbare Cluster gemanagte Service-Knoten13.02.2012 Realtime Web Apps und NFC 9
  • 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
  • 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
  • WebSocketsIm Vergleich zu http... schneller billiger portabler13.02.2012 Realtime Web Apps und NFC 12
  • 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
  • WebSocketsWebSockets bringenUser der verschiedenen Plattformen zusammen!13.02.2012 Realtime Web Apps und NFC 14
  • WebSocketsTool-Support?enge Integration in bestehende Frameworks13.02.2012 Realtime Web Apps und NFC 15
  • Sencha/ExtJS Integration Integration von Realtime- Kommunikation in das ExtJS Framework Online-Collaboration mit ExtJS13.02.2012 Realtime Web Apps und NFC 16
  • 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
  • Online Collaboration Browser jWebSocket Server WebSocket Client (js) ExtJSPlugIn Sencha/ExtJS (js)13.02.2012 Realtime Web Apps und NFC 18
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Online Collaboration Zusammenarbeit an Texten, Bildern, Zeichnungen etc. in Echtzeit im Web Shared Canvas Demo13.02.2012 Realtime Web Apps und NFC 31
  • 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
  • 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 Demo13.02.2012 Realtime Web Apps und NFC 34
  • 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
  • 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
  • Realtime Charting Realtime Charting basierend auf der Sencha/ExtJS Charting Engine Charting Demo13.02.2012 Realtime Web Apps und NFC 37
  • 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
  • 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-Demo13.02.2012 Realtime Web Apps und NFC 40
  • 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
  • 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-Demo13.02.2012 Realtime Web Apps und NFC 43
  • 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
  • Online Collaboration Browser jWebSocket Server WebSocket Client (js) jCaptcha Plug-in jQuery (js) jCaptcha Framework13.02.2012 Realtime Web Apps und NFC 45
  • Remote Control Hardware requests and controls via web based on Arduino and jWebSocket Arduino Demo13.02.2012 Realtime Web Apps und NFC 46
  • 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
  • Remote Control Browser jWebSocket Server Device ArduinoRemoteControl Arduino micro- WebSocket Client (js) PlugIn controller ArduinoConnection Device13.02.2012 Realtime Web Apps und NFC 48
  • Online Gaming Realtime Online- Gaming mit einer Vielzahl von Clients Ping-Pong Game13.02.2012 Realtime Web Apps und NFC 49
  • 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
  • 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 Artemisa13.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, @jWebSocket13.02.2012 Realtime Web Apps und NFC 54