Android版添加phonegap--websocket客户端插件教程

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>

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

    }

7. 客户端的修改

需要在html页面端做些手脚，优先加载websocket.js进行一些环境变量的设定，这样socket.io就可以检测websocket的支持。

websocekt.js的初始化代码：

(function(){    

var global = window;

var WebSocket = global.WebSocket = function(url) {

com.strumsoft.websocket.WebSocketFactory.java)

this.socket = WebSocketFactory.getInstance(url);

if(this.socket) {

WebSocket.store[this.socket.getId()] = this;

} else {

throw new Error('Websocket instantiation failed! Address might be wrong.');

    }

    };

WebSocket.store = {};

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

    }

WebSocket.prototype.send = function(data) {

this.socket.send(data);

    }

 

WebSocket.prototype.close = function() {

this.socket.close();

    }

WebSocket.prototype.getReadyState = function() {

this.socket.getReadyState();

    }

WebSocket.prototype.onopen = function(){

throw new Error('onopen not implemented.');

 };

WebSocket.prototype.onmessage = function(msg){

throw new Error('onmessage not implemented.');

 };

8.看一下websocket的检测函数：

WS.check = function () {

return (‘WebSocket’ in global && !(‘__addTask’ in WebSocket))

        || ‘MozWebSocket’ in global;

};

很自然的，自定义的websocket.js与socket.io两者就能衔接在一起了。

9.因此，必须的页面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>去除掉），上传到云构建平台自动构建即可。

KeyMob移动平台,是中国最优秀的随意自由切换平台,基于强大的技术支持、优质的服务。通过整合广告主、应用开发者和移动营销资源,为广告主提供精准的效果和品牌推广服务,为应用开发者创造更大的收益。