跨平台移动开发实战（八）------移动客户端网络通信

转自：http://blog.csdn.net/cutesource/article/details/7773366

服务器端搭建好后，移动客户端就需要基于HTTP和Websocket来和服务器端通信，HTTP就基于Ajax来实现，Websocket就得靠各个移动平台浏览器对Websocket的支持，基本的开发大家查查文档就比较容易掌握，这里我着重谈三点：

• Ajax安全策略
• 移动平台对Websocket的支持
• 文件传输

1）Ajax安全策略

大家都知道Ajax存在跨域的限制，而基于Phonegap的离线开发实际上是本地HTML向server端发起Ajax请求，同样会有安全限制，会导致你客户端拿不到server端的返回信息，解决方法就是在servlet向客户端写数据之前加上如下代码：

[java]  view plain copy

1. 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:
  
  [javascript]  view plain copy

  1. window.webkitRequestFileSystem(window.PERSISTENT, 30 * 1024 * 1024, function(fs){  
  2.     var xhr = new XMLHttpRequest();  
  3.     xhr.open('GET', "http://"+host+":"+httpPort+"/syncFile?token="+token+"&id="+id, true);  
  4.     xhr.overrideMimeType('text/plain; charset=x-user-defined');   
  5.     xhr.responseType = "arraybuffer"; // Part of XHR 2  
  6.     xhr.onreadystatechange = function () {  
  7.         if (xhr.readyState == 4) {  
  8.             fs.root.getFile(fileName, {create: true},  
  9.             function(fileEntry) {  
  10.                 fileEntry.createWriter(function(writer) {  // FileWriter  
  11.                   writer.onwrite = function(e) {   
  12.                       console.log("success download "+fileName);  
  13.                   };  // Success callback function  
  14.                   writer.onerror = function(e) {  
  15.                       console.log(e);  
  16.                   };  // Error callback function  
  17.                   var bb = new WebKitBlobBuilder();  
  18.                   bb.append(xhr.response);  
  19.                   writer.write(bb.getBlob("text/plain")); // The actual writing  
  20.                 }, errorHandler);  
  21.               });   
  22.         }  
  23.     };  
  24.     xhr.send();   
  25. },errorHandler);  
  需要注意这和HTML5标准的file system API是有差异的，都带有WebKit的前缀，这也许也是HTML5暂时没法在各个平台上得到统一的表现吧。
  
• Android和IOS
  Android和IOS可以基于Phonegap提供的Filesystem和file transfer插件来完成，具体细节可见如下Samples（完成上例子同样功能）:
  
  [javascript]  view plain copy

  1. window.requestFileSystem(  
  2.     LocalFileSystem.PERSISTENT, 0, function onFileSystemSuccess(fileSystem) {  
  3.         fileSystem.root.getDirectory(dirName, {create: true, exclusive: false}, function(dirEntry){  
  4.             var dirPath = dirEntry.fullPath;  
  5.             console.log(dirPath);  
  6.             var fileTransfer = new FileTransfer();  
  7.             var filePath = dirPath +"/"+ fileName;  
  8.             fileTransfer.download("http://"+host+":"+httpPort+"/syncFile?token="+token+"&id="+id, filePath,  
  9.                  function(theFile) {  
  10.                     console.log("download complete: " + theFile.toURI());  
  11.                  },  
  12.                  function(error) {  
  13.                      console.log("download error source " + error.source);  
  14.                      console.log("download error target " + error.target);  
  15.                      console.log("upload error code: " + error.code);  
  16.                  }  
  17.              );  
  18.         }, fail);  
  19.        },   
  20. fail);  
• Webos
  Webos需要通过mojo提供的service来完成：
  
  [javascript]  view plain copy

  1. navigator.service.Request('palm://com.palm.downloadmanager/', {  
  2.     method: 'download',  
  3.     parameters: {  
  4.         target: url,  
  5.         targetDir : "/media/internal/files/"+dirName,  
  6.         targetFilename : fileName,  
  7.         keepFilenameOnRedirect: false,  
  8.         subscribe: true  
  9.     },  
  10.     onSuccess : function (e){ console.log("Download success, results="+JSON.stringify(e)); },  
  11.     onFailure : function (e){ console.log("Download failure, results="+JSON.stringify(e)); }  
  12. });  

有关文件系统访问的细节我会单独拿出来分析。

另外，由于Websocket目前对二进制的数据传输的支持不够好，所以当需要server端向客户端推送二进制文件时，我的方案是server端通过websocket向客户端发一个文件下载的通知，客户端收到通知后再通过上述的相应方案来下载文件：

[javascript]  view plain copy

1. websocket.onmessage = function(e) {  
2.     console.log(e.data);  
3.     var token = getToken();  
4.     var r=eval("("+e.data+")");   
5.     if(r.type == 'syncList'){  
6.         for(var i=0;i<r.data.length;i++){  
7.             device.syncFile(token, r.data[i].id, r.data[i].name);  
8.         }  
9.     }  
10. }  

r.data[i].id和r.data[i].name是需要下载文件的标识，通过这个标识能对应到文件下载的URL，虽然这个方案不完美，但还比较健壮。不过，通过Websocket直接传输文件虽然想起来复杂，但肯定是走得通的，等这块实验成功后我再补充到这里。