欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

为Phonegap Android平台增加websocket支持

Android开发 夜阑小雨 2175℃ 0评论

 

 

解决方式

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等,但有开源实现,不再闭门造车。

  1. 在Eclipse中新建Android Project项目chatdemo
  2. animesh kumarwebsocket-android-phonegap项目java文件打成phonegap-websocket-support.jar包,存放在 android project的libs目录下
  3. websocket.js存放在 assets/www/js目录下
  4. 修改项目启动类App.java
  5. 添加<script src="js/websocket.js"></script>

 

简单说明

1. App.java修改后:

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");

}

 

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.');

};

 

// 其它原型函数,省略......

})();

 

 

看一下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,步骤很简单:

  1. 在eclipse下搭建android project
  2. 拷贝jar以及socekt.js到相应目录
  3. 修改App.java(其它android启动类,方法名不一样,但方法体一致)
  4. 在首页或者需要的页面,在 socket.io js医用的前面,添加<script src="js/websocket.js"></script>引用即可
示范代码
  1. socket.io 框架内置的chat聊天示范和socketio-netty所提供聊天示范完全一致,除了服务器端实现不同
  2. 简单包装成android项目,仅用于演示使用,因此界面有些大
  3. 需要一个服务器端,socket.io或者socketio-netty的都可以
  4. 本文Android示范chat下载 下载
  5. phonegap-websocket-support.jar

转载请注明:夜阑小雨 » 为Phonegap Android平台增加websocket支持

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址