In this talk, given at First European Conference on Titanium (http://ticonf.eu), we present an overview of the approaches to implement realtime apps over HTTP and introduce the benefit of WebSockets. Later we introduce Node.ACS and Socket.IO to demonstrate how we built a realtime survey system that works on iOS, Android and HTML5 browsers with Titanium.

1. Real time mobile apps
with Titanium,
Node.ACS and WebSockets
Dr. Antonio Calanducci
TiConf 2013, Valencia, February 23rd

2. Outline
Approaches for real time apps over HTTP
HTML 5 WebSockets
socket.io
Node.ACS overview
MVC Framework
DEMO (please download http://bit.ly/ticonf )
implement a real time survey system with
Node.ACS and Titanium
www.etnatraining.it

3. About me
Founder of
first Italian Appcelerator Training Partner
we run Titanium classes in 8 cities in Italy
Titanium and Apple Certified Trainer
Researcher at the National Institute of Nuclear
Physics
Contact me :
antonio@etnatraining.it; @tcaland / @etnatraining
www.etnatraining.it

4. Problem: Real Time apps over HTTP
Build (event-driven) web/mobile apps that
communicates with the server
Hard to implement with the HTTP protocol:
HTTP is half duplex
HTTP requires establishing a TCP connection
latency, overhead
sending a request / getting a response
800b ~ 1.5kb
www.etnatraining.it

5. AJAX polling
client makes a request every n seconds
server returns immediately a response
www.etnatraining.it

6. COMET (long polling)
aka reverse AJAX, AJAX push, HTTP server push
client makes a request to server for updates
wait at the server (held the connection)
returns the response when the server event occurs
www.etnatraining.it

7. Other approches
Java Applets
Silverlight duplex
Flash WebSockets
requires a proprietary runtime installed
not proxy and firewall friendly
they use proprietary ports
www.etnatraining.it

8. Entering WebSockets
provides a bidirectional and full-duplex
communication channel servers and (web) clients
it works over a single TCP connection
shares port with HTTP (80) and HTTPS (443)
proxy and routers friendly / cross-origin
API stardardized by W3C and IETF protocol (part
of HTML5)
lightweight (2bytes header per message exchange)
only one connection is established (latency low)
www.etnatraining.it

9. WebSocket API
www.etnatraining.it

10. WebSockets browser support
www.etnatraining.it

11. Socket.io
Not all browsers support WebSockets (at least older
ones)
we could use fallbacks
Socket.io: javascript library that uses behind the
scene different transport mechanisms:
WebSocket
Adobe Flash Socket
AJAX long polling/multipart streaming
Forever IFrame / JSONP Polling
www.etnatraining.it

12. Node.js
Build Backends/Web Servers with JavaScript
Based on Google V8
Asyncronous I/O
non blocking
event driven
Lightweight and efficient
WORKSHOP 2: “An introduction and primer to
Node.JS” - by Dave Mackintosh
www.etnatraining.it

13. Socket.io in Node.JS
Node.js provides a socket.io module
Client:
www.etnatraining.it

14. WebSockets/Socket.io in Titanium?
Contributed open source Modules
Both for iOS and Android:
https://github.com/iamyellow/tiws
https://marketplace.appcelerator.com/apps/
2825?793640832
https://marketplace.appcelerator.com/apps/
3158?365421049
support for pure WS events, socket.io and now.js
www.etnatraining.it

15. Introducing Node.ACS
Appcelerator Node.JS hosting solution
Build custom services to extend the existing
Appcelerator Cloud Services (ACS)
Host your existing node.js app/service on the
Appcelerator Cloud
Create Node.ACS apps directly from Titanium Studio
or from CLI
can interact with ACS (see Javier presentation on ACS)
Actually in Developer Preview state
www.etnatraining.it

16. Architecture
www.etnatraining.it

17. Development Flow
www.etnatraining.it

18. Node.ACS MVC
Express 3.x based
provides a MVC framework like
Sinatra/RubyOnRails
you define routes, filters,
websockets event handlers
that map to controllers
it takes care for you all the
details of configuring the
environment
you focus on the app’s
features
www.etnatraining.it

19. Node.ACS MVC: config.json
path: URL to map; method: [get | post | put | delete ..]
callback: <controllers/filename.js>#<function_name>
event: name of the event emitted
www.etnatraining.it

20. Node.MVC: controllers example
/controllers/users.js
/websockets/chat.js
www.etnatraining.it

21. DEMO TIME
http://www.etnatraining.it/ticonf-demo/

22. Real time Survey
Node.ACS on the server side
with socket.io
Titanium on the client side to build:
iOS
Android
HTML5 Mobile App front-end
yes, socket.io supported there too!
Code Walkthrough
www.etnatraining.it

23. References
https://github.com/EtnaTraining/ticonf-demo
https://github.com/EtnaTraining/ticonf-demo-node.acs-
server
http://socket.io/
https://github.com/LearnBoost/socket.io/wiki/
http://nodejs.org
https://github.com/iamyellow/tiws
http://nodeacs.cloud.appcelerator.com/guides/quickstart
http://nodeacs.cloud.appcelerator.com/guides/mvc
www.etnatraining.it