为Phonegap Android平台增长websocket支持，使默认成为socket.io首选通

为Phonegap Android平台增长websocket支持，使默认成为socket.io首选通道选择

广而告之

使用socket.io做为跨浏览器平台的实时推送首选，经测试在各个主流浏览器上测试都确实具备良好的下实时表现。这里为推广socketio-netty服务器端实现哈，作次广告，同时预热一下：

socketio-netty : 又一款socket.io服务器端实现，兼容0.9-1.0版本~

 

示范目的

 

咱们要构建一个在市面上常见浏览器上均可以正常运行的集体聊天应用，保证在IE6+，Firefox，Chrome，Safari，Opear，IOS，Android等能够正常运转，根据具体环境自动选择最佳的通讯通道。

嗯，既然是跨浏览器平台，那天然选择socket.io(客户端js) 了。它也是本文的重心，本文的最终是让socket.io(客户端js) 版本在Phonegap包装的Android Apk程序中可使用Websocket协议，以达到快速交换数据的目的，提升交换性能。

同时也保证咱们的示范应用尽量的作到编写一次，处处运行哈。

还好，有了socket.io(客户端js) + socketio-netty（socket.io服务器端JAVA实现） + Phonegap, 咱们构建各类交互性很是强的的跨浏览器、跨移动应用的HTML应用，是个不错的选择。

另，本文示范项目为仅仅为演示其功能，不保证样式。

 

Phonegap

官网

官网定义为：

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores.

中文翻译为：

PhoneGap是一个开源的开发框架，使用HTML，CSS和JavaScript来构建跨平台的的移动应用程序

可以使用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具备没法超越的速度优点，同时双向数据传输通道，经过观察能够很明显的感受到。

 

原由

1. 个人android系统是2.3的，其原生的浏览器不支持websocket通讯协议（ucweb,qq,opear mini 等都支持较为完整的HTML5规范）。
2. Phonegap转换的APK包，会调用android内置浏览器，所以致使websocket没法使用。
3. 据调研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等，但有开源实现，再也不闭门造车。

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修改后：

确保继承DroidGap，而且指定绑定语句：

 // 绑定websocket支持 

 appView.addJavascriptInterface(new WebSocketFactory(appView), 

 "WebSocketFactory"); 

JAVA端设定完毕。

2. 客户端的修改

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

websocekt.js的初始化代码：

须要注意其初始化代码：

// window object
var global = window;

// WebSocket Object. All listener methods are cleaned up!
var WebSocket = global.WebSocket = function(url)

......

 

socket.io client websocket 代码片断：

看一下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