聂永的博客

记录工作/学习的点点滴滴。

为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 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修改后:

确保继承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

 

参考资料

  1. Phonegap:
     http://phonegap.com/
  2. WebSocket support in Android’s Phonegap apps
    http://anismiles.wordpress.com/2011/02/03/websocket-support-in-android%E2%80%99s-phonegap-apps/

  3. websocket-android-phonegap
    https://github.com/anismiles/websocket-android-phonegap


----------------------------------------------------------------------------
广而告之,让您自由畅游网络~
推荐一个我一直使用的VPN 翻*墙利器,平常正常谷歌搜索,登陆Gmail,闲时观看youtube等高清视频一点都不卡!
再超值提供一个近期2015年有效的9折优惠码:10off2015

作为码农,严重推荐!

posted on 2012-05-10 14:10 nieyong 阅读(24170) 评论(12)  编辑  收藏 所属分类: socket.io

评论

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2012-05-10 17:14 ge_star

animesh kumar 开发的websocket-android-phonegap项目只支持DRAFT75/76的协议~对于目前的很多服务器不支持,例如tomcat7,tomcat7采用RCFRFC 6455,所以需要自己改握手和通讯协议  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2012-05-11 08:33 tb

这个好啊 方便我们的手机开发  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2012-05-11 09:43 nieyong

@ge_star
采用Netty,或者http://socket.io,或者http://code.google.com/p/socketio-netty/
或者,直接增加对RCFRFC 6455的支持等。  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2012-06-07 17:52 josh

請教一下 我利用IFRAME 去崁入http://www.websocket.org/echo.html

語法如下:
<iframe src="http://www.websocket.org/echo.html" width="100%" height="100%" ></iframe>

但卻出現不支援 可否請教原因  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2012-06-11 09:09 nieyong

@josh
您是什么平台 ?若是android,默认的浏览器不支持websocket协议。  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择[未登录] 2012-07-26 17:14 jarry

socket.io client websocket 代码片段:最后一部分貌似有问题?module不存在。。。(
'undefined' != typeof io ? io.Transport : module.exports
, 'undefined' != typeof io ? io : module.parent.exports
, this
)  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2012-08-29 10:35 零度火云

感谢您详细的方案,正好需要  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2013-05-28 18:33 FreezeSoul

请问,为什么切换连接后会报超时,但我本地用chrome打开是可以
(注释websocket.js)

连接:http://192.168.23.1:9000/chat

异常:DroidGap: TIMEOUT ERROR! - calling webViewClient
  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2013-09-13 15:13 yimengyuanyun

链接不上服务器,不明白为什么
var s = new WebSocket("ws://127.0.0.1:8000/");
这个url是服务器的端口吗?为什么我这个就不可以呢  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2013-12-16 09:28 唐鑫

为什么报 has no method 'getintance'错呢?  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2014-07-02 16:19 马跃

为什么报 has no method 'getintance'错呢? 我也遇到了同样的问题  回复  更多评论   

# re: 为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 2014-07-02 16:20 马跃

有解决的帮下忙好吗  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

公告

所有文章皆为原创,若转载请标明出处,谢谢~

新浪微博,欢迎关注:

导航

<2012年5月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

统计

常用链接

留言簿(56)

随笔分类(125)

随笔档案(147)

个人收藏

最新随笔

搜索

最新评论

阅读排行榜

评论排行榜