Real time coding with jWebSocket
1 like1,610 views
This document discusses real-time coding with jWebSocket. It introduces jWebSocket, which provides a standardized way for real-time web communication using WebSockets. It also covers how jWebSocket can be integrated with various client-side frameworks like jQuery, Sencha Touch, and Ext JS. Finally, it demonstrates how to build a sample user CRUD application in both Sencha Touch and jQueryMobile using jWebSocket.
Real time coding with jWebSocket
- 1. jWebSocket-1.0 Real-time coding with jWebSocket
- 2. 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
- 3. 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
- 4. 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
- 5. 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
- 6. 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
- 7. WebSocket vs HTTP You should use WebSocket here!!! → quicker → cheaper → more portable Real-time coding with jWebSocket slide 7 of 23
- 8. 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
- 9. jWebSocket Client Side Real-time coding with jWebSocket slide 9 of 23
- 10. jWebSocket Client Side Real-time coding with jWebSocket slide 10 of 23
- 11. 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
- 12. jWebSocket Client Side / Integration PlugIns Real-time coding with jWebSocket slide 12 of 23
- 13. 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 jWebSocketJQuery PlugIn-1.0 Real-time coding with jWebSocket slide 13 of 23
- 14. 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 jWebSocketSencha PlugIn-1.0 Real-time coding with jWebSocket slide 14 of 23
- 15. jWebSocket Client Side / Sencha Data Package Real-time coding with jWebSocket slide 15 of 23
- 16. jWebSocket Client Side / Ext JS Integration Real-time coding with jWebSocket slide 16 of 23
- 17. jWebSocket Client Side / Sencha Touch Integration Real-time coding with jWebSocket slide 17 of 23
- 18. 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
- 19. 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
- 20. 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
- 21. 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
- 22. 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
- 23. Questions, suggestions,...? Thank you for attention! Learn more: http://jwebsocket.org, @jWebSocket a.schulze@innotrade.de, vbarzana@jwebsocket.org