服务器端搭建好后,移动客户端就需要基于HTTP和Websocket来和服务器端通信,HTTP就基于Ajax来实现,Websocket就得靠各个移动平台浏览器对Websocket的支持,基本的开发大家查查文档就比较容易掌握,这里我着重谈三点:
- Ajax安全策略
- 移动平台对Websocket的支持
- 文件传输
1)Ajax安全策略
大家都知道Ajax存在跨域的限制,而基于Phonegap的离线开发实际上是本地HTML向server端发起Ajax请求,同样会有安全限制,会导致你客户端拿不到server端的返回信息,解决方法就是在servlet向客户端写数据之前加上如下代码:
response.setHeader("Access-Control-Allow-Origin", "*");
2)移动平台对Websocket的支持
网上有很多关于各大移动平台的浏览器对Websocket的支持情况,而就我目前的实际测试来看,桌面Chrome、iphone/ipad上的safari、Webos和桌面firefox对Websocket支持都不错,基本标准的API写的程序都运行良好,但Android的chrome却不支持Websocket,更麻烦的是phonegap也没提供websocket的支持,因此在android需要写phonegap plugin来支持websocket,不过有人做了这个事儿,https://github.com/anismiles/websocket-android-phonegap,需要做的是基于phonegap
plugin的规范,加入这个插件即可。
3)文件传输
这里说的文件传输不是基于浏览器默认的下载行为,而是通过JS,由程序自行通过IO流把二进制文件从server端down到移动端的文件系统中。而这一点需要在不同的平台上采取不同的方案:
- 桌面chrome
可以基于Webkit对IO和文件系统的支持来完成,具体细节可见如下samples:
window.webkitRequestFileSystem(window.PERSISTENT, 30 * 1024 * 1024, function(fs){
var xhr = new XMLHttpRequest();
xhr.open('GET', "http://"+host+":"+httpPort+"/syncFile?token="+token+"&id="+id, true);
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.responseType = "arraybuffer"; // Part of XHR 2
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
fs.root.getFile(fileName, {create: true},
function(fileEntry) {
fileEntry.createWriter(function(writer) { // FileWriter
writer.onwrite = function(e) {
console.log("success download "+fileName);
}; // Success callback function
writer.onerror = function(e) {
console.log(e);
}; // Error callback function
var bb = new WebKitBlobBuilder();
bb.append(xhr.response);
writer.write(bb.getBlob("text/plain")); // The actual writing
}, errorHandler);
});
}
};
xhr.send();
},errorHandler);
需要注意这和HTML5标准的file system API是有差异的,都带有WebKit的前缀,这也许也是HTML5暂时没法在各个平台上得到统一的表现吧。
- Android和IOS
Android和IOS可以基于Phonegap提供的Filesystem和file transfer插件来完成,具体细节可见如下Samples(完成上例子同样功能):
window.requestFileSystem(
LocalFileSystem.PERSISTENT, 0, function onFileSystemSuccess(fileSystem) {
fileSystem.root.getDirectory(dirName, {create: true, exclusive: false}, function(dirEntry){
var dirPath = dirEntry.fullPath;
console.log(dirPath);
var fileTransfer = new FileTransfer();
var filePath = dirPath +"/"+ fileName;
fileTransfer.download("http://"+host+":"+httpPort+"/syncFile?token="+token+"&id="+id, filePath,
function(theFile) {
console.log("download complete: " + theFile.toURI());
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code: " + error.code);
}
);
}, fail);
},
fail);
- Webos
Webos需要通过mojo提供的service来完成:
navigator.service.Request('palm://com.palm.downloadmanager/', {
method: 'download',
parameters: {
target: url,
targetDir : "/media/internal/files/"+dirName,
targetFilename : fileName,
keepFilenameOnRedirect: false,
subscribe: true
},
onSuccess : function (e){ console.log("Download success, results="+JSON.stringify(e)); },
onFailure : function (e){ console.log("Download failure, results="+JSON.stringify(e)); }
});
有关文件系统访问的细节我会单独拿出来分析。
另外,由于Websocket目前对二进制的数据传输的支持不够好,所以当需要server端向客户端推送二进制文件时,我的方案是server端通过websocket向客户端发一个文件下载的通知,客户端收到通知后再通过上述的相应方案来下载文件:
websocket.onmessage = function(e) {
console.log(e.data);
var token = getToken();
var r=eval("("+e.data+")");
if(r.type == 'syncList'){
for(var i=0;i<r.data.length;i++){
device.syncFile(token, r.data[i].id, r.data[i].name);
}
}
}
r.data[i].id和r.data[i].name是需要下载文件的标识,通过这个标识能对应到文件下载的URL,虽然这个方案不完美,但还比较健壮。不过,通过Websocket直接传输文件虽然想起来复杂,但肯定是走得通的,等这块实验成功后我再补充到这里。
分享到:
相关推荐
资源名称:跨平台的移动Web开发实战 HTML5 CSS3资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
本书系统介绍了微软新一代高效、跨平台的应用平台.NET Core 1.0。借助.NET Core,原本只能运行在Windows 上的.NET 应用可以运行在Linux、OS X...使用Cordova开发跨平台移动应用,使用Xamarin开发跨平台移动应用等内容。
├─1113_AM_React-basic-1.mp4 ├─1113_AM_React-basic-2.mp4 ├─1113_AM_React-basic-4.mp4 ├─1113_PM_React-basic-3.mp4 ├─1114_AM_React-basic-5.mp4 ├─1114_AM_React-basic-6.mp4 ...
比较几款跨平台移动端开发app框架hybrid app flutter React WeeX不看好这个 kotlin也不看好 cordova phoneGap ionic hbuilder(uni-app) HERO
windows linux—unix 跨平台通信集成控制系统,c、c++编写完成客户端文件信息等的收集传输等工作。远程cmd命令执行,文件上传下载,等功能。带有基本注释。详细参照...
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、微信小程序等多个平台。该资源有自己独到的见解,适合小白使用,有vue或小程序开发经验者更容易上手。
移动跨平台开发工具 Project Mira-Objective-C and Swift.pdf
Delphi 7跨平台控件开发与应用(清晰版),经典的编程好书。共五个分卷。这是第三个。
跨平台的ICQ客户端climm-0.6.2 有研究或探讨或开源的请加群:37424970 或联系本人MSN或邮箱:zhuseahui@yahoo.com.cn
Delphi 7跨平台控件开发与应用(清晰版),经典的编程好书。共五个分卷。这是第四个。
jQuery Mobile是目前*流行的跨平台移动开发框架,本书以实例驱动讲解的方式,让零基础的读者也能轻松掌握jQuery Mobile下的应用开发。本书分为4篇,*篇是移动开发入门篇,介绍了jQuery Mobile、HTML 5和移动开发的...
Delphi 7跨平台控件开发与应用(清晰版),经典的编程好书。 共五个分卷。这是第一个。
REACT NATIVE跨平台移动项目实战参考:现实中,Android和iOS两大移动操作系统分庭抗礼的局面决定了注定会有类似RN这样跨平台移动开发框架的出现,只不过各家实现的思路不同而已。
Delphi 7跨平台控件开发与应用(清晰版)ooH无加密 第二分卷
由于基于C++和STL特点使其广泛应用于游戏开发、移动互联网产品开发,目前最新版本为3.0alpha,由于其代码的开源特性和跨平台支持,可以快速开发移动游戏并部署到Android、iOS等平台,已经有超过百款的Ccoos2d-x的...
《构建跨平台APP:Phonegap移动应用实战》是一本APP实战书,包含20多个APP实例和3个APP项目,还结合了HTML5移动开发。本书面向移动开发入门人员,低门槛,浅阅读,最适合移动APP创业小白。
构建跨平台APP-jQuery.Mobile移动应用实战
Flutter 跨平台移动应用开发实战.zip
包括移动开发和入门, jQuery Mobile控件、布局、跨平台开发和实战,发布和推广应用等
Delphi 7跨平台控件开发与应用(清晰版),经典的编程好书。共五个分卷。这是第五个。