Post on 22-Nov-2014
description
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