ActionScript 3的HTTPTunnel的实现
ActionScript 3是Adobe公司开发的用于编写Flash的脚本语言。Adobe新推出的Adobe Flex的Rich Internet Application开发平台同样支持Action Script。ActionScript编写的Flex Data Service提供了丰富的数据处理功能,也包括实现了通过建立HTTPChannel的数据实时更新功能,例如聊天室,股市行情等。本文将使用ActionScript 3.0编写HTTPTunnel Client取代Flex Data Service的HTTPChannel, 用开源的Java HTTPTunnel作为Server,实现数据实时更新。
1 架构
<group id="_x0000_s1026" style="WIDTH: 252.1pt; HEIGHT: 161.95pt; mso-position-horizontal-relative: char; mso-position-vertical-relative: line" coordsize="4291,2776" coordorigin="2279,5367" editas="canvas"><lock aspectratio="t" v:ext="edit"></lock><shapetype id="_x0000_t75" stroked="f" filled="f" path="[email protected]@[email protected]@[email protected]@[email protected]@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_s1027" style="LEFT: 2279px; WIDTH: 4291px; POSITION: absolute; TOP: 5367px; HEIGHT: 2776px" o:preferrelative="f" type="#_x0000_t75"><font size="3"><fill o:detectmouseclick="t"></fill><path o:connecttype="none" o:extrusionok="t"></path><lock v:ext="edit" text="t"></lock></font></shape><shapetype id="_x0000_t202" path="m,l,21600r21600,l21600,xe" o:spt="202" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><path o:connecttype="rect" gradientshapeok="t"></path></shapetype><shape id="_x0000_s1028" style="LEFT: 2739px; WIDTH: 1225px; POSITION: absolute; TOP: 6446px; HEIGHT: 771px" type="#_x0000_t202"><textbox inset="5.85pt,.7pt,5.85pt,.7pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #ece9d8; BORDER-TOP: #ece9d8; BORDER-LEFT: #ece9d8; BORDER-BOTTOM: #ece9d8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span lang="EN-US" style="FONT-FAMILY: SimSun; mso-fareast-language: ZH-CN"><font size="3">Flash<p></p></font></span></p> <p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span lang="EN-US" style="FONT-FAMILY: SimSun; mso-fareast-language: ZH-CN"><font size="3">Web Browser</font></span></p> </div> </td> </tr></tbody></table></textbox></shape><shape id="_x0000_s1029" style="LEFT: 5343px; WIDTH: 1227px; POSITION: absolute; TOP: 6446px; HEIGHT: 771px" type="#_x0000_t202"><textbox inset="5.85pt,.7pt,5.85pt,.7pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #ece9d8; BORDER-TOP: #ece9d8; BORDER-LEFT: #ece9d8; BORDER-BOTTOM: #ece9d8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span lang="EN-US" style="FONT-FAMILY: SimSun; mso-fareast-language: ZH-CN"><font size="3">JHTTPTunnel <p></p></font></span></p> <p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span lang="EN-US" style="FONT-FAMILY: SimSun; mso-fareast-language: ZH-CN"><font size="3">Server<p></p></font></span></p> <p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span lang="EN-US"><p><font face="Century" size="3"></font></p></span></p> </div> </td> </tr></tbody></table></textbox></shape><shapetype id="_x0000_t38" filled="f" path="m,[email protected],[email protected],[email protected],[email protected],[email protected],21600,21600,21600e" o:spt="38" coordsize="21600,21600" o:oned="t"><formulas><f eqn="mid #0 0"></f><f eqn="val #0"></f><f eqn="mid #0 21600"></f></formulas><path o:connecttype="none" fillok="f" arrowok="t"></path><handles><h position="#0,center"></h></handles><lock v:ext="edit" shapetype="t"></lock></shapetype><shape id="_x0000_s1030" style="LEFT: 4653px; WIDTH: 1px; POSITION: absolute; TOP: 5145px; HEIGHT: 2604px; rotation: 270; flip: y" type="#_x0000_t38" adj="-7776000,-46412,63979200" o:connectortype="curved"><stroke endarrow="block"><font face="Century" size="3"></font></stroke></shape><shape id="_x0000_s1031" style="LEFT: 4653px; WIDTH: 1px; POSITION: absolute; TOP: 5916px; HEIGHT: 2604px; rotation: 90" type="#_x0000_t38" adj="7776000,-52765,-130075200" o:connectortype="curved"><stroke endarrow="block"><font face="Century" size="3"></font></stroke></shape><shape id="_x0000_s1032" style="LEFT: 3658px; WIDTH: 2604px; POSITION: absolute; TOP: 7680px; HEIGHT: 309px" stroked="f" filled="f" type="#_x0000_t202"><textbox inset="5.85pt,.7pt,5.85pt,.7pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #ece9d8; BORDER-TOP: #ece9d8; BORDER-LEFT: #ece9d8; BORDER-BOTTOM: #ece9d8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span lang="EN-US" style="FONT-FAMILY: SimSun; mso-fareast-language: ZH-CN"><font size="3">3 HTTPHeader+Content Data</font></span></p> </div> </td> </tr></tbody></table></textbox></shape><shape id="_x0000_s1033" style="LEFT: 3964px; WIDTH: 1226px; POSITION: absolute; TOP: 5367px; HEIGHT: 617px" stroked="f" filled="f" type="#_x0000_t202"><textbox inset="5.85pt,.7pt,5.85pt,.7pt"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr> <td style="BORDER-RIGHT: #ece9d8; BORDER-TOP: #ece9d8; BORDER-LEFT: #ece9d8; BORDER-BOTTOM: #ece9d8; BACKGROUND-COLOR: transparent"> <div> <p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span lang="EN-US" style="FONT-FAMILY: SimSun; mso-fareast-language: ZH-CN"><font size="3">1 Post <p></p></font></span></p> <p class="MsoNormal" style="MARGIN: 0mm 0mm 0pt"><span lang="EN-US" style="FONT-FAMILY: SimSun; mso-fareast-language: ZH-CN"><font size="3">2 Get</font></span></p> </div> </td> </tr></tbody></table></textbox></shape><wrap type="none"></wrap><anchorlock></anchorlock></group>
1. Flash客户端连接HTTP Server并向HTTP Server发送Post命令。
2. Flash客户端连接HTTP Server并向HTTP Server发送Get命令。
3. HTTP Server向Flash不断发送遵循HTTP协议的数据,直到Flash客户端发送Close命令关闭连接。
4.Flash客户端解析接受到的数据并更新界面。
2.实现
2.1 客户端
MXML-类似于XML语言,用于部署Flash界面,可被Flex SDK编译为Flash文件。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="620" height="341"
creationComplete="Refresh()">
<mx:Script>
<![CDATA[
import org.colimas.http.*;
import mx.collections.*;
[Bindable]
public var initDG:ArrayCollection;
var host:String="localhost";
var hport:int=8888;
var jhtc:HttpTunnelClient=new HttpTunnelClient(host, hport);
private var DGArray:Array = [
{ corp:'IBM', last:79.99},
{ corp:'MS', last:30.99}];
private function Refresh():void {
trace("start...");
Data1.text="Started";
Data2.text="Yes!";
jhtc.setInBound(new InTunnelSocket());
jhtc.setOutBound(new OutTunnelSocket());
initDG=new ArrayCollection(DGArray);
jhtc.connect();
jhtc.Register(initDG);
jhtc.close();
var myTimer:Timer=new Timer(300);
myTimer.addEventListener("timer", timerHandler);
myTimer.start();
}
public function timerHandler(event:TimerEvent):void {
initDG.refresh();
}
]]>
</mx:Script>
<mx:Text x="41" y="38" text="Text1" width="62" height="28" id="Data1"/>
<mx:Text x="124" y="38" text="Text2" width="62" height="28" id="Data2"/>
<mx:DataGrid x="39" y="86" width="542" editable="false" id="Stock" dataProvider="{initDG}">
<mx:columns>
<mx:DataGridColumn headerText="Corp." dataField="corp"/>
<mx:DataGridColumn headerText="Last" dataField="last"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
界面显示如下:
<shape id="_x0000_i1026" style="WIDTH: 4in; HEIGHT: 239.25pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME~1%5C%E8%B6%99%E7%A3%8A%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image002.png"></imagedata></shape>
Refresh()函数实现数据刷新。org.colimas.http.HttpTunnelClient类用ActionScript语言编写,实现HTTPTunnel客户端,完成连接HTTPTunnel并接受数据任务。
org.colimas.http.HttpTunnelClient实现:
数据发送OutTunnel类的实现