DOC PREVIEW
SDSU CS 696 - Socket.IO & Sencha Touch

This preview shows page 1-2-3-20-21-22-41-42-43 out of 43 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 43 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

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

SDSU CS 696 - Socket.IO & Sencha Touch

Download Socket.IO & Sencha Touch
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Socket.IO & Sencha Touch and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Socket.IO & Sencha Touch 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?