我們目前的項(xiàng)目服務(wù)器端使用了Ice來構(gòu)建。Ice有一套自己的網(wǎng)絡(luò)協(xié)議，客戶端和服務(wù)器端可以基于此協(xié)議來交互。由于Ice使用Slice這種中間語言來描述服務(wù)器和客戶端的交互接口，所以它可以做到極大限度地屏蔽網(wǎng)絡(luò)協(xié)議這個(gè)細(xì)節(jié)。也就是說，我們只要借助Ice和Slice，我們可以輕松地編寫網(wǎng)絡(luò)程序。
然后，我們的后端現(xiàn)在需要一個(gè)運(yùn)行在Web瀏覽器上的客戶端。要與Ice做交互，如果使用TCP協(xié)議的話，得保證是長連接的。但HTTP是短連接的。而另一方面，我們還需要選擇一個(gè)Ice支持的和Web相關(guān)的語言來做這件事情。如果要在瀏覽器端直接與Ice服務(wù)建立連接，可供選擇的語言/平臺(tái)包括：
因?yàn)槲抑坝胑rlang簡單寫了個(gè)Ice的客戶端庫，所以我對Ice底層協(xié)議有一定了解，可以不一定使用Ice支持的語言，所以HTML5其實(shí)也是個(gè)選擇。此外，如果在瀏覽器端使用Applet，Java可能也是個(gè)選擇。
其實(shí)幾個(gè)月前在這塊的技術(shù)選擇問題上我就做過簡單的研究，當(dāng)時(shí)確定的方案是使用Flash。但是，后來人員招聘上遇到了問題，看起來要招一個(gè)會(huì)ActionScript和前端頁面技術(shù)的程序員來做我們這種項(xiàng)目，似乎大材小用，成本顯高了。
那么，考慮到團(tuán)隊(duì)里有現(xiàn)成的Java程序員，而且看起來招一個(gè)會(huì)用Java寫網(wǎng)站的程序員簡單又便宜，似乎是排除技術(shù)原因的最好選擇。但是，如果不在瀏覽器端直接連接服務(wù)器來做交互，而是讓W(xué)eb服務(wù)器端來做中轉(zhuǎn)的話，會(huì)面臨不少問題：
- 瀏覽器端操作結(jié)果的獲取問題，說白了就是非實(shí)時(shí)了，得用Ajax等等技術(shù)去模擬實(shí)時(shí)，代價(jià)就是不斷輪訓(xùn)，也就是通常說的poll
- Web服務(wù)器端需要編寫大量代碼：對用戶操作的映射，結(jié)果緩存等等
如果能用Flash包裝與服務(wù)器交互的部分，而把UI相關(guān)的東西留給HTML/JS/CSS去做，那是不是可行一點(diǎn)？如果只是用ActionScript編寫與服務(wù)器端的交互邏輯代碼，我就不需要花時(shí)間去系統(tǒng)學(xué)習(xí)ActionScript，甚至如何用Flash做界面，我甚至不用搞懂這些技術(shù)之間的關(guān)系。基本上看些Ice for ActionScript的例子代碼，就可以完成這件事情。
以下記錄一些主要的過程/方法：
ActionScript程序的開發(fā)
開發(fā)一個(gè)嵌入到網(wǎng)頁中的FLASH，只需要Flex SDK。SDK里自帶了一些編譯器相關(guān)工具。我不打算使用IDE，因?yàn)榭雌饋鞩DE更復(fù)雜。簡單的google之后，基本就可以構(gòu)建出一個(gè)Flash文件：
- 構(gòu)建基本的程序需要一個(gè)mxml文件，這個(gè)文件里主要用來捕獲Flash在頁面上初始化完成這個(gè)事件，以初始化內(nèi)部邏輯
- 編寫ActionScript源碼，看起來其文件、類的組織方式很像Java
-
使用Flex SDK中的mxmlc程序來編譯，生成swf文件，例如：
mxmlc myflexapp.mxml -library-path+=xxx.swc
嵌入到網(wǎng)頁中，簡單的做法可以借助swfobject.js這個(gè)庫，嵌入的方式：
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.play = "true";
params.quality = "high";
params.bgcolor = "white";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "asclient";
attributes.name = "asclient";
attributes.align = "middle";
swfobject.embedSWF("asclient.swf", "flashContent", "1", "1",
"0", "",
flashvars, params, attributes);
swfobject.createCSS("#flashContent", "display:none;");
</script>
自然，頁面中需加入flashContent這個(gè)div：
<div id="flashContent">
<p>no flash</p>
</div>
我的mxml文件也很簡單：
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
applicationComplete="doApplicationComplete()" >
<fx:Script>
<![CDATA[
import ASClient.Coordinator;
import flash.external.ExternalInterface;
private var _coordinator:Coordinator;
public function doApplicationComplete():void
{
trace("doApplicationComplete");
_coordinator = new Coordinator();
_coordinator.reg_methods();
ExternalInterface.call("as_ready");
}
]]>
</fx:Script>
</s:Application>
ActionScript日志
我通過日志來調(diào)試ActionScript代碼。最簡單的方式就是通過trace函數(shù)來輸出日志。要成功輸出日志包含以下步驟：
- 給瀏覽器安裝調(diào)試版本的Flash Player
-
日志是輸出到用戶目錄下的，并且需要手動(dòng)創(chuàng)建日志目錄(Administrator替換為用戶名)：
C:\Users\Administrator\AppData\Roaming\Macromedia\Flash Player\Logs
-
用戶目錄下新建配置文件mm.cfg：
AS3StaticProfile=0
AS3Verbose=0
TraceOutputFileEnable=1
TraceOutputBuffered=0
ErrorReportingEnable=1
AS3Trace=0
編譯DEBUG版本的Flash文件，可以修改flex sdk下的flex-config.xml文件，里面增加debug=true配置即可
在開發(fā)過程中需要注意瀏覽器緩存問題，當(dāng)編譯出新的Flash文件后，瀏覽器即使頁面刷新也可能使用的是緩存里的Flash。當(dāng)然，最重要的，是通過瀏覽器來訪問這個(gè)包含了Flash的網(wǎng)頁，Web服務(wù)器隨意。
Flash Policy文件
在Flash的某個(gè)版本后，F(xiàn)lash中如果要向外建立socket連接，是首先要取得目標(biāo)主機(jī)返回的policy文件的。也就是在建立連接前，F(xiàn)lash底層會(huì)先向目標(biāo)主機(jī)詢問得到一個(gè)描述訪問權(quán)限的文件。
簡單來說，目標(biāo)主機(jī)需要在843端口上建立TCP監(jiān)聽，一旦有網(wǎng)絡(luò)連接，就發(fā)送以下內(nèi)容，內(nèi)容后需添加0x00用于標(biāo)示結(jié)束。（當(dāng)然，具體細(xì)節(jié)還挺多，自行g(shù)oogle）
<cross-domain-policy>
<allow-access-from domain="*" to-ports="*" />
</cross-domain-policy>
最開始我使用的是朋友給的現(xiàn)成的Policy服務(wù)，雖然我寫的Flash可以成功連接我的Ice服務(wù)，但始終要等待2秒以上的時(shí)間。google Flash Policy相關(guān)內(nèi)容，可以發(fā)現(xiàn)確實(shí)存在一個(gè)延時(shí)，但那是因?yàn)槟繕?biāo)主機(jī)沒有在843端口服務(wù)。后來我自己用erlang寫了個(gè)Policy服務(wù)，延時(shí)就沒有了。猜測可能是他的Policy服務(wù)沒有添加0x00作為結(jié)束導(dǎo)致。
ActionScript與JavaScript的交互
既然我使用ActionScript來包裝與服務(wù)器的交互，那么JavaScript就必然需要和ActionScript通信。這個(gè)通信過程也就是在JavaScript中調(diào)用ActionScript中的函數(shù)，反過來亦然。這個(gè)過程很簡單：
在JavaScript中調(diào)用ActionScript函數(shù)：
首先是ActionScript需要注冊哪些函數(shù)可以被調(diào)用：
ExternalInterface.addCallback("service_loadall", loadAll);
通過ExternalInterface.addCallback注冊的函數(shù)，其實(shí)是個(gè)closure，所以在類中注冊自己的成員函數(shù)都可以（因?yàn)槌蓡T函數(shù)會(huì)使用this，形成了一個(gè)closure）。
然后在JavaScript中調(diào)用：
function asObject() {
// asclient是嵌入Flash時(shí)填入的name和(或?)id
return window.document.asclient;
}
var as = asObject();
as.service_loadall();
在ActionScript中調(diào)用JavaScript中調(diào)用則更簡單，一句話：
ExternalInterface.call("service_load_done", args);
至于在兩者之間的函數(shù)參數(shù)傳遞，其類型都可以自動(dòng)映射。但因?yàn)槲业膽?yīng)用里數(shù)據(jù)較為復(fù)雜，我就將數(shù)據(jù)轉(zhuǎn)換為JSON格式，在JavaScript這邊操作較為簡單。
頁面切換
這里我們需要的Web前端頁面，更像是一個(gè)管理系統(tǒng)，所以頁面切換是很有可能的。問題在于，當(dāng)出現(xiàn)頁面跳轉(zhuǎn)時(shí)，F(xiàn)lash對象會(huì)重新初始化，新的頁面無法使用前一個(gè)頁面建立好的網(wǎng)絡(luò)連接（或者能？）。為了解決這個(gè)問題，服務(wù)器當(dāng)然可以設(shè)計(jì)一種重登錄機(jī)制，方便客戶端以一種特殊的方式進(jìn)入系統(tǒng)，繞過正常的登錄環(huán)節(jié)。但是我們使用了Glacier2這個(gè)網(wǎng)關(guān)，在這個(gè)網(wǎng)關(guān)上有針對連接的超時(shí)管理，這樣反復(fù)建立新的連接對資源太浪費(fèi)了。
綜上，我想只能通過前端去規(guī)避這個(gè)問題。例如，前端開發(fā)人員依然可以分開設(shè)計(jì)很多頁面，頁面里也可以使用正常的鏈接。我們編寫一些JavaScript代碼，將頁面里的鏈接替換成對應(yīng)的JavaScript代碼，動(dòng)態(tài)載入新的頁面內(nèi)容，然后對頁面內(nèi)的部分內(nèi)容進(jìn)行替換，從而盡可能讓頁面設(shè)計(jì)人員編寫正常的網(wǎng)頁，同時(shí)也解決頁面切換問題。
這是個(gè)蹩腳的方法，但在我有限的前端知識(shí)體系下，似乎也只能這樣干了。