https://skydrive.live.com/?cid=cf7746837803bc50&id=CF7746837803BC50%211278&authkey=!AKImvowSw7Ab2bE
可使用HTML + CSS + Javascript构建跨平台的移动引用,确实很不错,值得推荐。
更棒的,可以利用其云构建服务(https://build.phonegap.com/apps ) ,本机编写好应用之后(保证首页为index.html,涉及到的css/js存放在一起),打包成zip,上传,自动会为我们自动构建不同平台下的部署包,十分方便。
表面上看,一切都很完美,但部署到Android系统之后,发现socket.io无法使用websocket双向的通道,socket.io默认采用xhr-long polling通信模式。有些无奈。
在实时交互数据量很大的情况下,相比xhr-long polling, jsonp polling,Websocket/Flashsocket具有无法超越的速度优势,同时双向数据传输通道,通过观察可以很明显的感觉到。
起因
- 我的android系统是2.3的,其原生的浏览器不支持websocket通信协议(ucweb,qq,opear mini 等都支持较为完整的HTML5规范)。
- Phonegap转换的APK包,会调用android内置浏览器,因此导致websocket无法使用。
- 据调研Android 2/3.* 原生浏览器不支持websocket,至于Android 4.*,没有测试过。
如何确认浏览器对html5的支持情况, 浏览器访问 http://html5test.com 即可查询对HTML5的支持情况,以及跑分等。
嗯,据传言,Phonegap会在2.0版本之后,添加对Android的websocket支持,但目前版本为1.7。
解决方式
animesh kumar 开发的websocket-android-phonegap项目,已经做到了让Phonegap支持websocket客户端协议,使用java nio编写websocket客户端协议连接,同时Phonegap支持自定义组件,支持JS和JAVA代码的相互调用开放架构,这样就促成了伪装的webscoket.js。
其有些DWR的味道,但更为灵活。
另外还有一个单纯的socket.io android客户端实现:
https://github.com/koush/android-websockets#readme
有兴趣者,可以参考一下。
本打算使用Netty构建一个websocket客户端,然后结合js等,但有开源实现,不再闭门造车。
- 在Eclipse中新建Android Project项目chatdemo
- 把animesh kumar的websocket-android-phonegap项目java文件打成phonegap-websocket-support.jar包,存放在 android project的libs目录下
- 把websocket.js存放在 assets/www/js目录下
- 修改项目启动类App.java
- 添加<script src="js/websocket.js"></script>
简单说明
1. App.java修改后:
package com.yongboy.chatdemo;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import com.strumsoft.websocket.phonegap.WebSocketFactory;
/**
*
* @author yongboy
* @time 2012-5-10
* @version 1.0
*/
public class App extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
// 绑定websocket支持
appView.addJavascriptInterface(new WebSocketFactory(appView),
"WebSocketFactory");
}
}
|
确保继承DroidGap,并且指定绑定语句:
// 绑定websocket支持
appView.addJavascriptInterface(new WebSocketFactory(appView),
"WebSocketFactory");
JAVA端设定完毕。
2. 客户端的修改
需要在html页面端做些手脚,优先加载websocket.js进行一些环境变量的设定,这样socket.io就可以检测websocket的支持。
websocekt.js的初始化代码:
(function() {
// window object
var global = window;
// WebSocket Object. All listener methods are cleaned up!
var WebSocket = global.WebSocket = function(url) {
// get a new websocket object from factory (check com.strumsoft.websocket.WebSocketFactory.java)
this.socket = WebSocketFactory.getInstance(url);
// store in registry
if(this.socket) {
WebSocket.store[this.socket.getId()] = this;
} else {
throw new Error('Websocket instantiation failed! Address might be wrong.');
}
};
// storage to hold websocket object for later invokation of event methods
WebSocket.store = {};
// static event methods to call event methods on target websocket objects
WebSocket.onmessage = function (evt) {
WebSocket.store[evt._target]['onmessage'].call(global, evt);
}
WebSocket.onopen = function (evt) {
WebSocket.store[evt._target]['onopen'].call(global, evt);
}
WebSocket.onclose = function (evt) {
WebSocket.store[evt._target]['onclose'].call(global, evt);
}
WebSocket.onerror = function (evt) {
WebSocket.store[evt._target]['onerror'].call(global, evt);
}
// instance event methods
WebSocket.prototype.send = function(data) {
this.socket.send(data);
}
WebSocket.prototype.close = function() {
this.socket.close();
}
WebSocket.prototype.getReadyState = function() {
this.socket.getReadyState();
}
///////////// Must be overloaded
WebSocket.prototype.onopen = function(){
throw new Error('onopen not implemented.');
};
// alerts message pushed from server
WebSocket.prototype.onmessage = function(msg){
throw new Error('onmessage not implemented.');
};
// 其它原型函数,省略......
})();
|
需要注意其初始化代码:
// window object
var global = window;// WebSocket Object. All listener methods are cleaned up!
......
var WebSocket = global.WebSocket = function(url)
socket.io client websocket 代码片段:
(function (exports, io, global) {
exports.websocket = WS;
function WS (socket) {
io.Transport.apply(this, arguments);
};
io.util.inherit(WS, io.Transport);
WS.prototype.name = 'websocket';
WS.prototype.open = function () {
var query = io.util.query(this.socket.options.query)
, self = this
, Socket
if (!Socket) {
Socket = global.MozWebSocket || global.WebSocket;
}
this.websocket = new Socket(this.prepareUrl() + query);
this.websocket.onopen = function () {
self.onOpen();
self.socket.setBuffer(false);
};
this.websocket.onmessage = function (ev) {
self.onData(ev.data);
};
this.websocket.onclose = function () {
self.onClose();
self.socket.setBuffer(true);
};
this.websocket.onerror = function (e) {
self.onError(e);
};
return this;
};
WS.prototype.send = function (data) {
this.websocket.send(data);
return this;
};
WS.prototype.payload = function (arr) {
for (var i = 0, l = arr.length; i < l; i++) {
this.packet(arr[i]);
}
return this;
};
WS.prototype.close = function () {
this.websocket.close();
return this;
};
WS.prototype.onError = function (e) {
this.socket.onError(e);
};
WS.prototype.scheme = function () {
return this.socket.options.secure ? 'wss' : 'ws';
};
WS.check = function () {
return ('WebSocket' in global && !('__addTask' in WebSocket))
|| 'MozWebSocket' in global;
};
WS.xdomainCheck = function () {
return true;
};
io.transports.push('websocket');
})(
'undefined' != typeof io ? io.Transport : module.exports
, 'undefined' != typeof io ? io : module.parent.exports
, this
);
|
看一下websocket的检测函数:
WS.check = function () {
return ('WebSocket' in global && !('__addTask' in WebSocket))
|| 'MozWebSocket' in global;
};
很自然的,自定义的websocket.js 和 socket.io两者就能够很自然的衔接在一起了。
因此,必须的页面JS加载顺序为:
<!--android平台需要添加,其它移动平台,比如ios则不需要 -->
<!--一定要放在socket.io.min.js前面 -->
<script src="js/websocket.js"></script>
<script src="js/socket.io.min.js"></script>
在HTML页面端,我们仅仅需要添加一行<script src="js/websocket.js"></script>引用,就做到了让android平台下socket.io优先选择websocket,很简单,也很使用。
至于其它平台,则不需要考虑这么,仅仅把/chatdemo/assets/www目录下打包成zip包(切记把<script src="js/websocket.js"></script>去除掉),上传到云构建平台自动构建即可。
小总结
Phonegap下让android平台支持websocket,步骤很简单:
- 在eclipse下搭建android project
- 拷贝jar以及socekt.js到相应目录
- 修改App.java(其它android启动类,方法名不一样,但方法体一致)
- 在首页或者需要的页面,在 socket.io js医用的前面,添加<script src="js/websocket.js"></script>引用即可
示范代码
- socket.io 框架内置的chat聊天示范和socketio-netty所提供聊天示范完全一致,除了服务器端实现不同
- 简单包装成android项目,仅用于演示使用,因此界面有些大
- 需要一个服务器端,socket.io或者socketio-netty的都可以
- 本文Android示范chat下载 下载
- phonegap-websocket-support.jar
转自:http://www.blogjava.net/yongboy/archive/2012/05/10/377787.html
相关推荐
android PhoneGap websocket 插件
phonegap+websocket+tomcat实现移动终端推送功能 ,android版
websocket-android-phonegap
5.android默认的项目是针对native app的,所以要用web app(cordova)的话,必须修改它的引用文件。 5.1引用加载cordova-1.7.0.jar,这时候可以按F5刷新工程。 5.2去掉import部分的import android.app.Activity;并...
FreakDev-PhoneGap-Android-HTML5-WebSocket
websocket-android-phonegap-master
PhoneGap Android PhoneGap Android is an Android application library that allows for PhoneGap-based projects to be built for the Android Platform. PhoneGap-based applications are, at the core, an ...
phoneGap-android实现拍照和选择图库中的图片功能。绝对可以运行。
phonegap android在线更新插件,兼容android7.0下载后安装闪退的问题;详细使用见README.md文件。
实现android平台phonegap登录例子,内容简单,适合初学者.
使用指南:PhoneGap的CordovaWebView组件在Android原生项目中使用. 1.下载phonegap2.0, 1.1 从解压文件中“phonegap-phonegap-2dbbdab\lib\android”中可以看到以下文件: cordova-2.0.0.jar、cordova-2.0.0.js和...
android+Phonegap开发环境搭建android+Phonegap开发环境搭建android+Phonegap开发环境搭建android+Phonegap开发环境搭建
android之PhoneGap入门实例http://blog.csdn.net/beifengdelei/article/details/7702461
android+js+css+html+jquery实现的android程序。详细见代码
android平台搭建PhoneGap.pdf
phonegap in android.
行业分类-设备装置-基于Android平台的PhoneGap跨平台媒体扩展框架
phonegap在android的录音照相录像demo,功能简单易懂,主要看懂html里的就行,小白笔记大神勿喷
phoneGAP就是Cordova,据说执行起来比网页快, Android, ios通吃
PhoneGap android的Toast插件,使用方法不用介绍了,用phoneGap开发android应用的人都知道,希望对大家有帮助。