爲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