Realtime Web Applications with jWebSocket

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

Alexander Schulze Innotrade GmbH, Germany jwebsocket.org

Real-time Web Applications

Agenda

• Einführung: Realtime Apps und WebSockets

• Integration in Frameworks (ExtJS)

• Demos: NFC & Smart-Cards, SMS, Remote Control & Monitoring, Online-Collaboration, Online-Gaming

• Diskussion

Heutige Session

Realtime Web Apps und NFC 2 13.02.2012

Information Interaktion

Real-time Applikationen


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

Web 1.0

Web 2.0

Web 3.0

Web im Wandel


Zauberwort

WebSockets

W3C/IETF TCP Kommunikations Protokoll

Real-time Web


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


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


Nachher

Neues Paradigma

Request/Response für Dokumente

bidirektionale Realtime- Kommunikation für Applikationen

WebSockets


Neue Strukturen

dynamisch skalierbare Cluster gemanagte Service-Knoten

starre Client/Server Strukturen


WebSockets

Warum sollte ich?

bis zu 1/1000 des HTTP Overheads,

TCP Verbindung

nur rund 1/3 der Latenz,

permanente Verbindung


WebSockets

Lohnt sich das?

nur ein TCP Port spart 50% serverseitiger Ressourcen

standardisiert durch IETF/W3C

sichert Investitionen!


WebSockets

Im Vergleich zu http...

schneller billiger portabler


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


WebSockets

WebSockets bringen

User zusammen! der verschiedenen

Plattformen


WebSockets

Tool-Support?

enge Integration in bestehende Frameworks


WebSockets

Sencha/ExtJS Integration

Integration von Realtime-Kommunikation in das ExtJS Framework


Online-Collaboration mit ExtJS

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


Online Collaboration



Sencha/ExtJS (js)

Browser

WebSocket Client (js) ExtJSPlugIn

jWebSocket Server

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


WebSockets – Models

jWebSocket Framework

TCP NIO

JBoss Netty

Glass- Fish

Eclipse Jetty

System Plug-In

Custom App

3rd-Party App

Custom Plug-In


• austauschbare Engines

• stand-alone oder eingebetteter Betrieb

• Plug-ins und WebSocket Apps

• vollständig offen



XML JSON

jWebSocket Tokens

• 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“


Token-Processor

Native Client

Browser Client


WebSockets – Interoperability


WebSocket Services

WebSocket Apps

Cross-Browser-Kompatibilität

• nativer Support für Chrome 4+, FF 4+, IE 10, Safari 5+, Opera 11+,

• Flash-Fallback für ältere Browser

• Long-Polling oder Comet Fallback



WebSocket Services

WebSocket Apps

WebSockets – Interoperability

Cross-Plattform-Kompatibilität

• Android

• iPad/iPhone

• Symbian/BlackBerry

• Windows Phone

• weitere in Planung (z. B. Bada)

• Java, C#, Python...


jWebSocket Sicherheit

• Verschlüsselung

• SSL/TLS

• ws:// and wss://

• Authentifizierung und Autorisierung

• Filter


wss://


In System-Filter Out

Client

In Custom-Filter Out




Collab. Suite Online-Game

Channel 2 „WorkTogether“

Channel 1 „PlayTheGame“

Player 1 Player 2 Collab. Memb1

Collab. Memb2

jWebSocket Channels

• Publish/subscribe

• privat/öffentlich

• Authentifizierung

• separate Applikationen


jWebSocket Events

• Event-Driven Programming using the Observable Pattern

• Publish/Subscribe-Mechanismus

WebSocket – Event Model

Sub

scri

be

Pu

blish

Observer 1

( Client ) Observer 2

( Client )

ws://

Observable (Server)


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

WebSocket – Plug-ins


Smartcards und NFC

Authentifizierung in Web Apps über Smart Cards und jWebSocket

NFC und Smart Card Demo


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


Smartcards und NFC


Smart Cards und NFC

Custom Application Middleware

jWebSocket Server

Middleware Operation Manager

Java Applet (bridge)

Browser

WebSocket Client (js)

Custom Application

Card Reader

Card


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

Shared Canvas Demo


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





jQuery (js)

Browser

WebSocket Client (js) SharedCanvasPlugIn

jWebSocket Server

Remote Monitoring


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

Monitoring Demo

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


Remote Monitoring


Remote Monitoring

Bindows Gauges

JavaScript

Browser


Sigar Library

jWebSocket Server

Monitoring Plug-in

jQuery (js)

WebSocket

Realtime Charting


Realtime Charting basierend auf der Sencha/ExtJS Charting Engine

Charting Demo

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


Realtime Charting


Remote Charting

jWebSocket Sencha Plug-in (Extjs)

Charting Demo (App)

Browser


Server Database

MongoDB

Sigar Library

jWebSocket Server

Monitoring Plug-in (java)

Automatisierter SMS-Versand

SMS-Gateway: • Chaptcha geschützt • Beliebiger Provider

integrierbar • SMS und MMS

SMS-Demo



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




HTTP WebSocket

jQuery (js)

Browser


Server Database

SMS trade SMS Plug-in

jWebSocket Server

Captcha

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


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


Remote Monitoring



jQuery (js)

Browser


jCaptcha Framework

jWebSocket Server

jCaptcha Plug-in

Remote Control

Hardware requests and controls via web based on Arduino and jWebSocket Arduino Demo


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


Remote Control


Remote Control

Browser


Device

Device ArduinoConnection

jWebSocket Server

ArduinoRemoteControlPlugIn

Arduino micro-controller

Online Gaming

Realtime Online- Gaming mit einer Vielzahl von Clients

Ping-Pong Game


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


Online Gaming


Online Gaming

jws-plugin-1.0 (js)

jQuery (js)

Browser


Server Database

MongoDB PingPongPlugIn

jWebSocket Server


Besonderen Dank an alle jWebSocket Comitter der

Facultad Regional Mártires de Artemisa

Fragen & Antworten Alexander Schulze

[email protected]

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

Danke für Ihre Aufmerksamkeit!


Realtime Web Applications with jWebSocket

Technology

Transcript of Realtime Web Applications with jWebSocket