• <ins id="pjuwb"></ins>
    <blockquote id="pjuwb"><pre id="pjuwb"></pre></blockquote>
    <noscript id="pjuwb"></noscript>
          <sup id="pjuwb"><pre id="pjuwb"></pre></sup>
            <dd id="pjuwb"></dd>
            <abbr id="pjuwb"></abbr>

            loop_in_codes

            低調做技術__歡迎移步我的獨立博客 codemaro.com 微博 kevinlynx

            使用ActionScript開發Ice Web客戶端

            我們目前的項目服務器端使用了Ice來構建。Ice有一套自己的網絡協議,客戶端和服務器端可以基于此協議來交互。由于Ice使用Slice這種中間語言來描述服務器和客戶端的交互接口,所以它可以做到極大限度地屏蔽網絡協議這個細節。也就是說,我們只要借助Ice和Slice,我們可以輕松地編寫網絡程序。

            然后,我們的后端現在需要一個運行在Web瀏覽器上的客戶端。要與Ice做交互,如果使用TCP協議的話,得保證是長連接的。但HTTP是短連接的。而另一方面,我們還需要選擇一個Ice支持的和Web相關的語言來做這件事情。如果要在瀏覽器端直接與Ice服務建立連接,可供選擇的語言/平臺包括:

            • Flash
            • Silverlight

            因為我之前用erlang簡單寫了個Ice的客戶端庫,所以我對Ice底層協議有一定了解,可以不一定使用Ice支持的語言,所以HTML5其實也是個選擇。此外,如果在瀏覽器端使用Applet,Java可能也是個選擇。

            其實幾個月前在這塊的技術選擇問題上我就做過簡單的研究,當時確定的方案是使用Flash。但是,后來人員招聘上遇到了問題,看起來要招一個會ActionScript和前端頁面技術的程序員來做我們這種項目,似乎大材小用,成本顯高了。

            那么,考慮到團隊里有現成的Java程序員,而且看起來招一個會用Java寫網站的程序員簡單又便宜,似乎是排除技術原因的最好選擇。但是,如果不在瀏覽器端直接連接服務器來做交互,而是讓Web服務器端來做中轉的話,會面臨不少問題:

            • 瀏覽器端操作結果的獲取問題,說白了就是非實時了,得用Ajax等等技術去模擬實時,代價就是不斷輪訓,也就是通常說的poll
            • Web服務器端需要編寫大量代碼:對用戶操作的映射,結果緩存等等

            如果能用Flash包裝與服務器交互的部分,而把UI相關的東西留給HTML/JS/CSS去做,那是不是可行一點?如果只是用ActionScript編寫與服務器端的交互邏輯代碼,我就不需要花時間去系統學習ActionScript,甚至如何用Flash做界面,我甚至不用搞懂這些技術之間的關系。基本上看些Ice for ActionScript的例子代碼,就可以完成這件事情。

            以下記錄一些主要的過程/方法:

            ActionScript程序的開發

            開發一個嵌入到網頁中的FLASH,只需要Flex SDK。SDK里自帶了一些編譯器相關工具。我不打算使用IDE,因為看起來IDE更復雜。簡單的google之后,基本就可以構建出一個Flash文件:

            • 構建基本的程序需要一個mxml文件,這個文件里主要用來捕獲Flash在頁面上初始化完成這個事件,以初始化內部邏輯
            • 編寫ActionScript源碼,看起來其文件、類的組織方式很像Java
            • 使用Flex SDK中的mxmlc程序來編譯,生成swf文件,例如:

              mxmlc myflexapp.mxml -library-path+=xxx.swc

            • 嵌入到網頁中,簡單的做法可以借助swfobject.js這個庫,嵌入的方式:

                 <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這個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日志

            我通過日志來調試ActionScript代碼。最簡單的方式就是通過trace函數來輸出日志。要成功輸出日志包含以下步驟:

            • 給瀏覽器安裝調試版本的Flash Player
            • 日志是輸出到用戶目錄下的,并且需要手動創建日志目錄(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配置即可

            在開發過程中需要注意瀏覽器緩存問題,當編譯出新的Flash文件后,瀏覽器即使頁面刷新也可能使用的是緩存里的Flash。當然,最重要的,是通過瀏覽器來訪問這個包含了Flash的網頁,Web服務器隨意。

            Flash Policy文件

            在Flash的某個版本后,Flash中如果要向外建立socket連接,是首先要取得目標主機返回的policy文件的。也就是在建立連接前,Flash底層會先向目標主機詢問得到一個描述訪問權限的文件。

            簡單來說,目標主機需要在843端口上建立TCP監聽,一旦有網絡連接,就發送以下內容,內容后需添加0x00用于標示結束。(當然,具體細節還挺多,自行google)

            <cross-domain-policy>
                 <allow-access-from domain="*" to-ports="*" />
            </cross-domain-policy>
            

            最開始我使用的是朋友給的現成的Policy服務,雖然我寫的Flash可以成功連接我的Ice服務,但始終要等待2秒以上的時間。google Flash Policy相關內容,可以發現確實存在一個延時,但那是因為目標主機沒有在843端口服務。后來我自己用erlang寫了個Policy服務,延時就沒有了。猜測可能是他的Policy服務沒有添加0x00作為結束導致。

            ActionScript與JavaScript的交互

            既然我使用ActionScript來包裝與服務器的交互,那么JavaScript就必然需要和ActionScript通信。這個通信過程也就是在JavaScript中調用ActionScript中的函數,反過來亦然。這個過程很簡單:

            在JavaScript中調用ActionScript函數:

            首先是ActionScript需要注冊哪些函數可以被調用:

            ExternalInterface.addCallback("service_loadall", loadAll);
            

            通過ExternalInterface.addCallback注冊的函數,其實是個closure,所以在類中注冊自己的成員函數都可以(因為成員函數會使用this,形成了一個closure)。

            然后在JavaScript中調用:

                function asObject() {
                    // asclient是嵌入Flash時填入的name和(或?)id
                    return window.document.asclient;
                }
                var as = asObject();
                as.service_loadall();
            

            在ActionScript中調用JavaScript中調用則更簡單,一句話:

            ExternalInterface.call("service_load_done", args);
            

            至于在兩者之間的函數參數傳遞,其類型都可以自動映射。但因為我的應用里數據較為復雜,我就將數據轉換為JSON格式,在JavaScript這邊操作較為簡單。

            頁面切換

            這里我們需要的Web前端頁面,更像是一個管理系統,所以頁面切換是很有可能的。問題在于,當出現頁面跳轉時,Flash對象會重新初始化,新的頁面無法使用前一個頁面建立好的網絡連接(或者能?)。為了解決這個問題,服務器當然可以設計一種重登錄機制,方便客戶端以一種特殊的方式進入系統,繞過正常的登錄環節。但是我們使用了Glacier2這個網關,在這個網關上有針對連接的超時管理,這樣反復建立新的連接對資源太浪費了。

            綜上,我想只能通過前端去規避這個問題。例如,前端開發人員依然可以分開設計很多頁面,頁面里也可以使用正常的鏈接。我們編寫一些JavaScript代碼,將頁面里的鏈接替換成對應的JavaScript代碼,動態載入新的頁面內容,然后對頁面內的部分內容進行替換,從而盡可能讓頁面設計人員編寫正常的網頁,同時也解決頁面切換問題。

            這是個蹩腳的方法,但在我有限的前端知識體系下,似乎也只能這樣干了。

            posted on 2013-06-10 21:30 Kevin Lynx 閱讀(2150) 評論(0)  編輯 收藏 引用 所屬分類: web

            久久免费99精品国产自在现线| 久久天堂AV综合合色蜜桃网| 久久e热在这里只有国产中文精品99| 久久久久久久综合日本| 日本WV一本一道久久香蕉| 韩国无遮挡三级久久| 7777久久久国产精品消防器材| 一本大道加勒比久久综合| 久久国产精品成人片免费| 中文字幕热久久久久久久| 久久精品国产亚洲AV香蕉| 久久久久久国产a免费观看不卡| 久久天天躁夜夜躁狠狠| 久久久久久久波多野结衣高潮 | 久久精品国产亚洲AV无码麻豆| 久久国产精品国产自线拍免费| 亚洲精品乱码久久久久久蜜桃 | 亚洲va久久久噜噜噜久久| 国产99久久久国产精品小说| 72种姿势欧美久久久久大黄蕉| 久久99精品国产| 久久精品国产99国产精品亚洲| 国产视频久久| 精品久久久久久久国产潘金莲| 婷婷久久综合九色综合98| 久久精品中文字幕久久| 色欲综合久久中文字幕网| 日批日出水久久亚洲精品tv| 欧美激情精品久久久久久久| 久久狠狠色狠狠色综合| 久久久久亚洲精品无码蜜桃 | 久久国产精品成人影院| 麻豆精品久久久久久久99蜜桃 | 久久久久国产精品熟女影院 | 久久人人爽人人爽人人av东京热| 国产精品日韩欧美久久综合| 国产精品一区二区久久| 久久精品国产秦先生| 国产精品一久久香蕉产线看| 99久久99久久精品国产| 久久天天躁狠狠躁夜夜av浪潮 |