解决方式

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 kumar的websocket-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支持