Download as PDF, PPTX
Uploaded bySergi Almar i Graupera
Building Real-Time Applications with Android and WebSockets
The document outlines a workshop on building real-time applications using WebSockets, focusing on an Android client and a Node.js server. It covers architectural concepts, dependency injection in Android, WebSocket communication mechanics, and includes practical examples for a real-time chat app. Additionally, tools like Socket.io and express.js are discussed for server-side implementation, alongside client-side integration with an event bus library called Otto.
More Related Content
![History Of The Internet[1]](https://cdn.slidesharecdn.com/ss_thumbnails/historyoftheinternet1-091210182308-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Building Real-Time Applications with Android and WebSockets
Building Real-Time Applications with Android and WebSockets
- 1. Real Time applicationswith WebSockets / WorkShop Sergi Almar i graupera @sergialmar Romanian mobile systems community conference (mobos) November 2013 - cluj Napoca
- 2. Agenda • Part 1 -Architecture and Dependency Injection with Android • Part 2 - Building the Server in Node.js and Socket.io • Part 3 - Building the Android client
- 3. Collaborative Apps Multiplayer Games MultimediaChat Social Feeds Sports Updates Financial Tickets Clickstream Data Online Education Location-based Apps
- 4. Real-time data onthe web • Polling • Long polling / Comet • Flash
- 5. Problem Applications need two-waycommunication Too many connections and overhead with ajax / comet
- 6. WebSockets two-way real timecommunication
- 7. WebSockets • Real-time full duplexcommunication over TCP • Uses port 80 / 443 (URL scheme: ws:// and wss://) • Small overhead for text messages (frames) • • 0x00 for frame start, 0xFF for frame end (vs HTTP 1K) Ping / pong frames for staying alive
- 8. WebSocket Handshake GET /mychatHTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 Origin: http://example.com client sends a WebSocket handshake request HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat server response
- 9. WebSocket API var ws= new WebSocket('ws://www.romobos.com/ws'); ! // When the connection is open, send some data to the server ws.onopen = function () { ws.send('Ping'); // Send the message 'Ping' to the server }; ! // Log errors ws.onerror = function (error) { ws.log('WebSocket Error ' + error); }; ! // Log messages from the server ws.onmessage = function (e) { ws.log('Server: ' + e.data); };
- 10. What we aregonna build (real-time chat app) websoc kets w ckets ebso
- 11. Dependency Injection decouple components,flexible code, reduce boilerplate, testable code
- 12. Dependency Injection inAndroid • RoboGuice • Dagger • Transfuse • Android annotations
- 13. RoboGuice • Dependency Injection framework • UsesGoogle Guice as the backbone • Supports JSR-330
- 14.
- 15.
- 16. Injecting Resources @InjectResource(R.anim.my_animation) AnimationmyAnimation; ! @InjectResource(R.drawable.icon) ! Drawable icon; @InjectResource(R.string.app_name) String myName;
- 17. Injection POJOs @Singleton public classMyPojo { private String myField; ! public void myMethod() { ... } } @Inject private MyPojo myPojo;
- 18. Custom Binding public classMyModule implements Module { @Override public void configure(Binder binder) { binder.bind(IFoo.class).to(SimpleFoo.class); } } define a module public class App extends Application { ! ! @Override public void onCreate() { super.onCreate(); RoboGuice.setBaseApplicationInjector(this, RoboGuice.DEFAULT_STAGE, RoboGuice.newDefaultRoboModule(this), new MyModule()); } } let RoboGuice know about it
- 19. Traditional Approach class AndroidWayextends Activity { TextView name; ImageView thumbnail; LocationManager loc; Drawable icon; String myName; ! public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); name = (TextView) findViewById(R.id.name); thumbnail = (ImageView) findViewById(R.id.thumbnail); loc = (LocationManager) getSystemService(Activity.LOCATION_SERVICE); icon = getResources().getDrawable(R.drawable.icon); myName = getString(R.string.app_name); name.setText( "Hello, " + myName ); } }
- 20. RoboGuice Approach @ContentView(R.layout.main) class RoboWayextends RoboActivity { @InjectView(R.id.name) @InjectView(R.id.thumbnail) @InjectResource(R.drawable.icon) @InjectResource(R.string.app_name) @Inject ! TextView name; ImageView thumbnail; Drawable icon; String myName; LocationManager loc; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); name.setText( "Hello, " + myName ); } }
- 21.
- 22. Part II Building theServer with NodeJS and Socket.io
- 23. Node.js event driven, non-blockingserver side JS
- 24. Google V8 Engine • Opensource JS engine by Google (used in Google Chrome) • No JIT, all JS compiled to assembler • Optimisations like inlining, elision of runtime properties… • Improved garbage collector
- 25. CommonJS • Set of specificationsfor JS outside the browser • Node.js implements some specifications • i.e modules • There should be a function called require • There should be a var called exports
- 26. Modules • Node.js provides somecore modules like http, tcp, fs, sys… • will look for the module in the node_modules dir hierarchically • if not found, will look in the paths outlined in NODE_PATH var http = require('http');
- 27. Module Example var PI= Math.PI; exports.area = function (r) { return PI * r * r; }; exports.circumference = function (r) { return 2 * PI * r; }; module definition in myModule.js var myModule = require('./myModule.js'); include myModule.js in some other file
- 28. Dependency Management Node packetmanager (npm) express (routing), socket.io (websockets)… Sergis-MacBook-Air:tmp salmar$ npm install express npm http GET https://registry.npmjs.org/express npm http 200 https://registry.npmjs.org/express npm http GET https://registry.npmjs.org/express/-/express-3.4.4.tgz npm http 200 https://registry.npmjs.org/express/-/express-3.4.4.tgz npm http GET https://registry.npmjs.org/connect/2.11.0 npm http GET https://registry.npmjs.org/commander/1.3.2 npm http GET https://registry.npmjs.org/methods/0.1.0 npm http GET https://registry.npmjs.org/range-parser/0.0.4 npm http GET https://registry.npmjs.org/mkdirp/0.3.5 npm http GET https://registry.npmjs.org/cookie/0.1.0 npm http GET https://registry.npmjs.org/buffer-crc32/0.2.1 npm http GET https://registry.npmjs.org/fresh/0.2.0 npm http GET https://registry.npmjs.org/cookie-signature/1.0.1 npm http GET https://registry.npmjs.org/send/0.1.4 npm http GET https://registry.npmjs.org/debug npm http 200 https://registry.npmjs.org/methods/0.1.0 npm http 304 https://registry.npmjs.org/range-parser/0.0.4 npm http GET https://registry.npmjs.org/methods/-/methods-0.1.0.tgz npm http 200 https://registry.npmjs.org/commander/1.3.2 npm http GET https://registry.npmjs.org/commander/-/commander-1.3.2.tgz npm http 304 https://registry.npmjs.org/cookie/0.1.0 … ! express@3.4.4 node_modules/express ├── methods@0.1.0 ├── range-parser@0.0.4 ├── cookie-signature@1.0.1 ├── fresh@0.2.0 ├── debug@0.7.4 ├── buffer-crc32@0.2.1 ├── cookie@0.1.0 ├── mkdirp@0.3.5 ├── commander@1.3.2 (keypress@0.1.0) ├── send@0.1.4 (mime@1.2.11) └── connect@2.11.0 (methods@0.0.1, uid2@0.0.3, pause@0.0.1, qs@0.6.5, raw-body@0.0.3, bytes@0.2.1, negotiator@0.3.0,
- 29. package.json { "name": "Mobos Chat", "version":"1.0.0", "description": "Real time chat", "author": "salmar", "scripts": { "start": "node app.js" }, "dependencies": { "socket.io": "latest", "express": "latest", "jade": "latest" } } npm install
- 30. Web Server inNodeJS var http = require('http'); ! http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(1337, '127.0.0.1'); ! console.log('Server running at http://127.0.0.1:1337/');
- 31. Running the app Sergis-MacBook-Air:tmpsalmar$ node app.js Server running at http://127.0.0.1:1337/
- 32. Express.js sinatra inspired webframework for node.js
- 33. Express.js var express =require('express'); var app = express(); ! app.get('/', function(req, res){ res.send('Hello World'); }); ! app.listen(3000);
- 34. Socket.io abstraction layer forWebSockets
- 35.
- 36. Socket.io • Abstraction layer forWebSockets • Fallback to: • Flash socket • AJAX Long-polling • AJAX multi-part streaming • JSONP polling • iFrame
- 37. Handling Events io.sockets.on('connection', function(socket){}); initial connection from client socket.on('message', function(message) {}) message handler triggered when message is received socket.on('disconnect', function() {}) triggered when socket disconnects socket.on('custom_event', function(data) {}) event handler for custom event
- 38. Sending messages socket.send(JSON.stringify({user:'sergi', message: 'Welcometo Mobos'}) ); sends a message to the connected client socket.broadcast.send(JSON.stringify({user:’sergi', message: 'Welcome to Mobos'}) ); sends a message to all clients except the owner of the socket
- 39. Emitting Events socket.emit('user:join', {name:'sergi'}); triggers a custom event socket.broadcast.emit('user:joined', data); sends a message to all clients except the owner of the socket
- 40. Attach information tothe socket socket.set('nickname', data.name, <optional_callback>);
- 41.
- 42. Part III Building theAndroid client with Socket.io
- 43. Otto enhanced event buswith emphasis on Android support
- 44.
- 45. Otto • Forked from Guava’sEventBus • Lightweight - 19k • Fast, optimised for Android
- 46. Publishing Bus bus =new Bus(); creates the bus (better use dependency injection) bus.post(new ServerMessage("This is awesome")); publish the message synchronous delivery
- 47. Subscribing @Subscribe public void receiveMessage(ServerMessageserverMessage) { // TODO: React to the event somehow! }
- 48. Otto API • register(), unregister(),post() • @Subscribe, @Produce • Thread confinement • Easy to test
- 49. SocketIO for Android • There’sno official library, but there are community libraries, sometimes buggy :( • • https://github.com/fatshotty/socket.io-java-client Server-like API
- 50. Callbacks ! ! ! ! ! public void onMessage(JsonElementjson, IOAcknowledge ack) { } public void onMessage(String data, IOAcknowledge ack) { } public void onError(SocketIOException socketIOException) { } public void onDisconnect() { } public void onConnect() { } public void on(String event, IOAcknowledge ack, JsonElement... args) { }
- 51.
- 52.