CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 15 Socket.IO & Sencha TouchMar 10, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Thursday, March 10, 2011References2Sencha Touch API Documentation, http://dev.sencha.com/deploy/touch/docs/, http://www.sencha.com/learn/Sencha_TouchSocket.IO, http://socket.io/Various web pages as noted on individual slides.Thursday, March 10, 20113Socket.IOThursday, March 10, 2011Problems with Ajax4Client has to request dataComet allows directional communicationWebSockets simplifies the bi-directional connectionsBut not available on all browsersThursday, March 10, 2011Socket.IO5JavaScript library for Client server communicationWebSocketAdobe® Flash® SocketAJAX long pollingAJAX multipart streamingForever IframeJSONP PollingDetects and uses the most capable transport supported by browserThursday, March 10, 2011Supported Browsers6Internet Explorer 5.5 - 8Safari 3 - 5Google Chrome 4 - 6Firefox 3-4Opera 10.61iPhone SafariiPad SafariAndroid WebKitWebOs WebKitThursday, March 10, 2011Client side communication7 var socket = new io.Socket(node_server_url); socket.connect();socket.send(message); // callback when connection is made socket.on('connect', function(){ … }) // callback on receiving messge from server socket.on('message', function(){ … }) // when disconnected socket.on('disconnect', function(){ … }) socket.disconnect();Thursday, March 10, 2011Async Communication8 var socket = new io.Socket(node_server_url); socket.connect();socket.send("Hi Mom"); socket.on('message', function(messageFromServer){alert(messageFromServer);}) Response to sendCome in on('message")Server can send messageanytimeThursday, March 10, 2011Server Side9Server has to be ready to handle variety of connectionsWebSocketAdobe® Flash® SocketAJAX long pollingAJAX multipart streamingForever IframeJSONP PollingThursday, March 10, 2011Servers Support in Socket.IO10Node.jsTornado (Python) https://github.com/MrJoes/tornadiosocketio-javaImplemented in Servletshttp://code.google.com/p/socketio-java/Gohttps://github.com/madari/go-socket.ioRack (Ruby Weberver)https://github.com/markjeee/Socket.IO-rackThursday, March 10, 2011Example11Client connects to ServerEvery second server sends integer - number messages sentThursday, March 10, 2011Client Side12<!doctype html><html> <head> <title>Timer client test</title> <script src="http://127.0.0.1:8080/json.js"></script> <script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script> </head> <body> <script> var socket = new io.Socket(null, {port: 8080}); socket.connect(); socket.on('message', function(message){ document.getElementById('text').value = message.announcement; }); </script> <h1>Sample client</h1> <input type="text" id="text"> </body></html>Thursday, March 10, 2011Server Side using Node.js13var http = require('http') , io = require('../'), url = require('url') , fs = require('fs') , timer = require('timers') , server; server = http.createServer(function(request, response){ var path = url.parse(request.url).pathname; switch (path){ case '/json.js': case '/chat.html': console.log("get file: " + path ); fs.readFile(__dirname + path, function(err, data){ if (err) return send404(res); response.writeHead(200, {'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'}) response.write(data, 'utf8'); response.end(); }); break; }}),server.listen(8080);Thursday, March 10, 2011Server Side using Node.js14var io = io.listen(server)var count = 1; io.on('connection', function(client){ client.send({ announcement: count++ }); client.broadcast({ announcement: client.sessionId + ' connected' }); count = 1;});timer.setInterval(clock, 1000);function clock() { io.broadcast({ announcement: "" + count++ });}Thursday, March 10, 201115Web verses Application development Thursday, March 10, 201116Web-based approachesjQuery Javascript & CSS libraries for WebjQuery Mobile, JQTouchJust Extend the libraries for Mobile browsersMobile Look and FeelPhoneGapNative application running Web viewJust web page in native appThursday, March 10, 2011Web-based approaches - Benefits17Use Web skills & developersCross platform Web app and native appDesigners & their toolsThursday, March 10, 2011Web-based approaches - Cons18PerformanceEmulate native widgetsHTML & CSS limitationsAccess to platform featuresDifferent style of developmentBrowser Interpreter for applicationsThursday, March 10, 2011Application-based Approaches 19Sencha TouchWebpages and mobile appsJavaScript developmentMVCJavaScript classes for WidgetsJavaScript create DOM objectsTitanium AppceleratorMobile apps onlyJavascript developmentMVC JavaScript UI widgetsControl native widgetsThursday, March 10, 2011Application-based Approaches 20More like traditional application developmentConstruct interface by creating objects Object interactLibrary of UI widgetsPanelsContaintersButtonsLayout managersThursday, March 10, 2011Button - jQuery Mobile21HTML button/elementCSS - looksJavaScript added to elementonclickThursday, March 10, 2011Button - Sencha Touch22HTML button/elementCSS - looksJavaScript Button objectCreates HTML buttonContains JavaScript logicInteracts with other JavaScript objectsCan use some native widgetsThursday, March 10, 2011Button - Appcelerator23Native ButtonJavaScript ButtonContains JavaScript logicInteracts with other JavaScript objectsThursday, March 10, 201124If you only have a hammer everything looks like a nailThursday, March 10, 201125Sencha TouchThursday, March 10, 2011Sencha Touch26http://www.sencha.com/products/touch/Supports iOS (iPhone, iPod Touch, iPad)AndroidBlackberry 6 (soon)Native iOS lookThemes for AndroidDocumentationhttp://www.sencha.com/learn/Sencha_TouchThursday, March 10, 2011The Sencha Touch Web Page27<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> <title>Button</title> <link rel="stylesheet" href="sencha-touch-debug.css" type="text/css"> <script type="text/javascript" src="sencha-touch-debug-w-comments.js"></script> <script type="text/javascript" src="index.js">
View Full Document