jWebSocket-1.0Real-time coding with jWebSocket

Real-time coding with jWebSocket

About us

* Alexander Schulze → jWebSocket Founder → a.schulze@innotrade.de → http://jwebsocket.org

→ @jWebSocket

* Victor Antonio Barzana Crespo → jWebSocket Web Developer → vbarzana@jwebsocket.org → @vbarzana

slide 2 of 23

Topics

Introduction to jWebSocket

Application development concept

Sencha Touch && Ext JS integration

jQuery && jQueryMobile integration

Live coding

Real-time coding with jWebSocket slide 3 of 23

Status of Web Communication

* HTTP Protocol

→ Designed for document transmission

→ Cumbersome, nearly real-time tricks → Polling, Long-Polling → Reverse-AJAX, Comet etc.

→ Ultimately non-standardized hacks

→ Remains a Request/Response mechanism

Real-time coding with jWebSocket slide 4 of 23

WebSockets - Technology

* WebSocket Protocol → Permanent TCP connections, bidirectional, full-duplex → 4oo times less overhead → ⅓ of latency → Standardized in HTML5 by W3C and IETF → protects investments → Single TCP Port

→ saves 50% server resources

Real-time coding with jWebSocket slide 5 of 23

WebSockets - Technology

* WebSocket Protocol → No Rules for Content → Text/Binary Frames, Chunking/Compression → Encryption (SSL/TLS)

→ No Limits for Formats/Sub-Protocols → protects investments

→ No Restrictions for Processing → Responsible for Logic, Security

Real-time coding with jWebSocket slide 6 of 23

WebSocket vs HTTP

You should use WebSocket here!!!

→ quicker → cheaper → more portable

Real-time coding with jWebSocket slide 7 of 23

jWebSocket - Tokens Abstraction

→ Endpoints are stupid → Common language to

understand messages → Dataformats* JSON, XML or CSV

Solution: → Abstract Data

Objects, in jWebSocket Token

Endpoint Endpoint Browser Native client

STOMP JMS WebSocket WebSocket

csv JSON JSON XML

jWebSocket EnginesJMS Gateway

csv JSON JSON XML

Message Abstraction Layer(Token-Processors, extendable)

Token

Message Security Layer(Token-Filters, extendable)

jWebSocket Core

App App App Plug-in Plug-in Plug-in

Real-time coding with jWebSocket slide 8 of 23

jWebSocket Client Side

Real-time coding with jWebSocket slide 9 of 23

jWebSocket Client Side

Real-time coding with jWebSocket slide 10 of 23

jWebSocket Client Side / JavaScript

* Lightweight* WebSocket Object Oriented JavaScript framework

* WebSocket events flow

* Support for all browsers

* Integrable with any JS Technology

Some characteristics

jWebSocket.js

Real-time coding with jWebSocket slide 11 of 23

jWebSocket Client Side / Integration PlugIns

Real-time coding with jWebSocket slide 12 of 23

jWebSocket Client Side / jQuery Integration

$.jws

- fTokenClient: jWebSocketTokenClient

+open():void

+send(aNS, aType, aArgs, aCallbacks,...): void

+close():void

+processToken(aToken):void

+getConnection():jWebSocketTokenClient

+isConnected():Boolean

+addPlugIn(aPlugIn: Object):void

jWebSocketJQueryPlugIn-1.0

Real-time coding with jWebSocket slide 13 of 23

jWebSocket Client Side / Sencha Integration

Ext.jws.Client

- fTokenClient: jWebSocketTokenClient

+open():void

+send(aNS, aType, aArgs, aCbs, aScope): void

+close():void

+processToken(aToken):void

+getConnection():jWebSocketTokenClient

+isConnected():Boolean

+addPlugIn(aPlugIn: Object):void

jWebSocketSenchaPlugIn-1.0

Real-time coding with jWebSocket slide 14 of 23

jWebSocket Client Side / Sencha Data Package

Real-time coding with jWebSocket slide 15 of 23

jWebSocket Client Side / Ext JS Integration

Real-time coding with jWebSocket slide 16 of 23

jWebSocket Client Side / Sencha Touch Integration

Real-time coding with jWebSocket slide 17 of 23

jWebSocket 1.0 mobile web development strategy

Application development concept

jQueryMobile Sencha Touch➔ Complete integration

plug-in

➔ JavaScriptMVC + Models

based in jWebSocket

➔ Load jQueryMobile pages

with EJS template engine

➔ jWebSocket reached a complete

integration with Sencha

➔ Create comprehensible

applications for any kind of

user

➔ New communication mechanism

for Sencha Touch && Ext JS

slide 18 of 23

Applications can be totally generated from command line

Creating our first application

The Admin Client application will manage all the information of the jWebSocket users. This module will be accessible only by administrator users.

* Administrator Login/Logout List all users Add user Remove user Edit user

Use case:

Requirements:

Real-time coding with jWebSocket slide 19 of 23

First application: Sencha Touch User CRUD

Live coding session, Sencha Touch-jWebSocket* Include jWebSocketSenchaPlugIn* jWebSocket listeners* Connect/Disconnect* Login/Logout (Keep logged in using the session)* Ext.jws.Proxy* Form submit* Server notifications

Real-time coding with jWebSocket slide 20 of 23

slide 21 of 23

First application: jQueryMobile User CRUD

Download the required libraries → jQuery 1.9.1-min → jquery.mobile-1.3.1-min → Personalize the download of jQueryMX → Download StealJS to manage application dependencies

./steal/js steal/generate/app jwsUserCrud

Generating the app from the command line

Real-time coding with jWebSocket slide 21 of 23

Live coding session, jQueryMobile-jWebSocket

First application: jQueryMobile User CRUD

* Include the requirements* Connect/Disconnect* jWebSocket listeners* Login/Logout (Keep logged in using the session)* jWebSocket Models

- save- findAll- destroy- update

* Submit forms

Real-time coding with jWebSocket slide 22 of 23

Questions, suggestions,...?

Thank you for attention!

Learn more: http://jwebsocket.org, @jWebSocketa.schulze@innotrade.de, vbarzana@jwebsocket.org