開發工具 (FlashBuilder4.7)

程序類型（Adobe Air）

Flex Air做的桌面程序，效果還挺好看的。最主要是Socket這一塊，它也是異步的，而且在Flex中的事件機制比較強大（個人覺得）

有改一些樣式，又一次看看新的效果吧：

大致的實現方式：

在WindowedApplication中包括登陸窗體和主界面，用Flex中的狀態來切換，聊天窗體時Window組件。好友列表用樹菜單

實現好友分組。好友上線時改成在線圖標，收到消息時頭像抖動，聊天顯示實現圖文混排，系統托盤。其他貌似沒了。

看下client的詳細實現吧：

首先我們把Flex air的默認窗體樣式改一改

打開 （項目名稱-app.xml）文件，把凝視去掉相應改成例如以下
<systemChrome>none</systemChrome>
<transparent>true</transparent>
上面是把默認的樣式去掉了，然后新建一個WindowedApplication的皮膚。例如以下

WindowAppSkin.xml

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"alpha.disabledGroup="0.5" ><fx:Metadata>[HostComponent("spark.components.WindowedApplication")]</fx:Metadata><s:states><s:State name="normal" /><s:State name="disabled" stateGroups="disabledGroup" /><s:State name="normalAndInactive" stateGroups="inactiveGroup" /><s:State name="disabledAndInactive" stateGroups="disabledGroup, inactiveGroup" /></s:states><s:Rect width="100%" height="100%" alpha="0"></s:Rect><s:Rect horizontalCenter="0" verticalCenter="0" width="{this.width-20}" height="{this.height-20}"topLeftRadiusX="6" topRightRadiusX="6"><s:fill><s:SolidColor color="#EBF2F9"/></s:fill><!-- 邊框發光效果 --><s:filters><s:GlowFilter color="0x000000" alpha="0.6" blurX="7" blurY="7" strength="1" inner="false" quality="3" knockout="false"/></s:filters></s:Rect><!-- 主題內容 --><s:Group id="contentGroup" top="10" left="10" right="10" bottom="10"/> </s:SparkSkin>
然后在主程序中引用這個皮膚 skinClass=“WindowAppSkin” ,這個皮膚文件我們在聊天窗體文件也能夠用到

接下來看看主程序（WindowedApplication）的代碼。它包括了登陸窗體和主界面，然后通過狀態來切換界面顯示

chat.mxml

<?

xml version="1.0" encoding="utf-8"?

> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="com.bufoon.skins.WindowAppSkin" width="450" height="350" initialize="init(event)" xmlns:components="com.bufoon.components.*"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; .treeStyle{ /*去掉默認目錄圖標*/ folderClosedIcon: ClassReference(null); folderOpenIcon: ClassReference(null); /*去掉葉子節點圖標*/ defaultLeafIcon: ClassReference(null); textIndent:5; leading:5; /* defaultLeafIcon 指定葉圖標 disclosureClosedIcon 指定的圖標旁邊顯示一個封閉的分支節點。

默認的圖標是一個黑色三角形。 disclosureOpenIcon 指定的圖標旁邊顯示一個開放的分支節點。默認的圖標是一個黑色三角形。 folderClosedIcon 關閉指定的目錄圖標的一個分支節點。 folderOpenIcon 指定打開的目錄圖標的一個分支節點。 例：三角圖標改動例如以下代碼使用就可以換成自己的了： disclosureOpenIcon:Embed(source='images/a.png'); disclosureClosedIcon:Embed(source='images/b.png'); */ } </fx:Style> <fx:Script> <![CDATA[ import com.adobe.serialization.json.JSON; import com.bufoon.components.chatWindow; import com.bufoon.socket.CustomeSocket; import com.bufoon.socket.base.MessageType; import com.bufoon.socket.command.ParamHandle; import com.bufoon.socket.event.SocketEvent; import com.bufoon.socket.model.PackageHead; import com.bufoon.socket.util.DispatchEvent; import com.bufoon.util.StringUtils; import mx.events.FlexEvent; public var Stageheight:Number = flash.system.Capabilities.screenResolutionY; public var Stagewidth:Number = flash.system.Capabilities.screenResolutionX; public var clientSocket:CustomeSocket; public var selfUserName:String; public var selfUserNum:String; [Bindable] [Embed(source="assets/images/mhead_online.png")] public var manHeadOnline:Class; [Bindable] [Embed(source="assets/images/mhead_offline.png")] public var manHeadOffline:Class; [Bindable] [Embed(source="assets/images/whead_online.png")] public var womanHeadOnline:Class; [Bindable] [Embed(source="assets/images/whead_offline.png")] public var womanHeadOffline:Class; [Bindable] [Embed(source="assets/swf/mhead_active.swf")] public var manHeadActive:Class; [Bindable] [Embed(source="assets/swf/whead_active.swf")] public var womanHeadActive:Class; public var openWinUserNum:Array = new Array(); [Bindable] public var friendXML:XML = null; private function init(e:FlexEvent):void { this.move(Stagewidth/2-this.width/2,Stageheight/2-this.height/2); //（this當前窗口) this.showStatusBar = false; this.addEventListener(Event.ADDED_TO_STAGE, function(e:*):void { bgLogin.addEventListener(MouseEvent.MOUSE_DOWN, winMove); }); clientSocket = new CustomeSocket("127.0.0.1", 7073); DispatchEvent.getInstance().addEventListener(SocketEvent.CONNECT, socketHandle); //監聽Socket因錯誤連接失敗事件 DispatchEvent.getInstance().addEventListener(SocketEvent.IO_ERROR, socketHandle); DispatchEvent.getInstance().addEventListener(SocketEvent.NOTICE_RECEIVE , serverNotice); } private function serverNotice(event:SocketEvent):void{ var ph:PackageHead = PackageHead(event.data.ph); var jsonObj:Object = com.adobe.serialization.json.JSON.decode(ph.packageBodyContent); if(ph.messageCommand == MessageType.SEND_MESSAGE_ACK_NOTICE){ var messageXML:XML = friendXML.node.node.(@userNum == jsonObj.senderNum)[0]; if(messageXML != null && !this.isExitArray(jsonObj.senderNum)){ messageXML.@message = jsonObj.sendInfo; } } if(ph.messageCommand == MessageType.USER_ON_OFF_LINE_NOTICE){ var userNum:String = jsonObj.userNum; var status:String = jsonObj.status; var xml:XML = friendXML.node.node.(@userNum == userNum)[0]; if(xml != null){ xml.@isOnline = status; } } } private function isExitArray(str:String):Boolean{ var flag:Boolean = false; for(var i:int = 0; i <　openWinUserNum.length; i++){ if(openWinUserNum[i] == str){ flag = true; break; } } return flag; } private function winMove(e:MouseEvent):void { nativeWindow.startMove(); } protected function loginHandle(event:MouseEvent):void { this.initSocketConnect(); } /** 初始化連接socket **/ public function initSocketConnect():void{ //初始化socket連接 if(!clientSocket.connected){ clientSocket.connect(); } } private function socketHandle(e:com.bufoon.socket.event.SocketEvent):void{ if(!clientSocket.connected){ return; } var username:String = userTI.text; var password:String = passTI.text; var paramObj:Object = new Object(); paramObj.username = username; paramObj.password = password; var param:String = com.adobe.serialization.json.JSON.encode(paramObj); trace(param); var byteArray:ByteArray = ParamHandle.setSendData(MessageType.LOGIN_VERIFY, param); clientSocket.send(byteArray, doLoginReceive); } private function doLoginReceive(obj:Object):void{ var ph:PackageHead = PackageHead(obj); if(ph.messageCommand == MessageType.LOGIN_VERIFY_ACK){ var jsonObj:Object = com.adobe.serialization.json.JSON.decode(ph.packageBodyContent); if(jsonObj.status == "0"){ this.currentState = "stateMain"; this.move(Stagewidth-300,50); //（this當前窗口) this.width = 280; this.height = 550; username.text = jsonObj.username; selfUserNum = jsonObj.userNum selfUserName = jsonObj.username; trace(jsonObj.userVO); trace(jsonObj.userVO.username); //請求用戶列表 var paramObj:Object = new Object(); paramObj.userId = jsonObj.userVO.id; var param:String = com.adobe.serialization.json.JSON.encode(paramObj); var byteArray:ByteArray = ParamHandle.setSendData(MessageType.FRIEND_LIST, param); clientSocket.send(byteArray, doLoginReceive); } else { this.clientSocket.close(); } } //請求用戶列表響應 if(ph.messageCommand == MessageType.FRIEND_LIST_ACK){ var jsonArr:Array = com.adobe.serialization.json.JSON.decode(ph.packageBodyContent) as Array; var friendStr:String = "<root label='好友列表'> " for(var i:int = 0; i < jsonArr.length; i++){ var friend:Object = jsonArr[i]; friendStr += "<node id='" + friend.id + "' label='" + friend.name + "' isBranch='true'>" var list:Array = friend.list as Array; for(var j:int = 0; j < list.length; j++){ friendStr += "<node id='" + list[j].id + "' message='' label='" + list[j].username + "' userNum='" + list[j].userNum + "' categoryId='" + friend.id + "' sex='" + list[j].sex + "' isOnline='" + list[j].isOnline + "' signature='" + list[j].signature + "' />"; } friendStr += "</node>"; } friendStr += "</root>"; friendXML = new XML(friendStr); } } protected function tree_doubleClickHandler(event:MouseEvent):void { var node:XML = tree.selectedItem as XML; if(node == null || node.@isBranch == "true"){ return; } var cw:chatWindow = new chatWindow(); cw.chatName = node.@label; cw.chatNum = node.@userNum; cw.open(true); cw.initChatWIN(node.@message, node.@sex); openWinUserNum.push(node.@userNum); node.@message = ""; } //列表樹圖標處理函數 private function treeIconHandle(item:Object):Class{ var iconClass:Class; var xml:XML= XML(item); if(xml.@isBranch == "true"){ return null; } if(!StringUtils.getInstance().isEmpty(xml.@message)){ if(xml.@sex == "男"){ iconClass = manHeadActive; }else{ iconClass = womanHeadActive; } return iconClass; } if(xml.@sex == "男"){ if(xml.@isOnline == "0"){ iconClass = manHeadOnline; }else { iconClass = manHeadOffline; } } else{ if(xml.@isOnline == "0"){ iconClass = womanHeadOnline; }else { iconClass = womanHeadOffline; } } return iconClass; } ]]> </fx:Script> <s:states> <s:State name="stateLogin"/> <s:State name="stateMain"/> </s:states> <fx:Declarations> <!-- 將非可視元素（比如服務、值對象）放在此處 --> </fx:Declarations> <s:Group width="100%" height="100%" includeIn="stateLogin"> <s:Group width="100%" height="150" id="bgLogin"> <s:Rect id="background" left="0" right="0" top="0" bottom="0" topLeftRadiusX="4" topRightRadiusX="4"> <s:fill> <s:LinearGradient rotation="135"> <s:entries> <s:GradientEntry alpha="1" color="#09C6E6" ratio="0" /> <s:GradientEntry alpha="1" color="#069DD6" ratio="0.77"/> </s:entries> </s:LinearGradient> </s:fill> </s:Rect> <s:HGroup left="6" top="5" gap="4" verticalAlign="middle"> <s:Image source="assets/images/logo.png"/> <s:Label color="#464646" fontWeight="bold" text="BufoonChat"/> </s:HGroup> <s:HGroup right="0" top="0" gap="0"> <components:LocalButton click="minimize()" upIcon="@Embed(source='assets/images/normal_minimize.png')" downIcon="@Embed(source='assets/images/click_minimize.jpg')" overIcon="@Embed(source='assets/images/over_minimize.png')" disabledIcon="@Embed(source='assets/images/click_minimize.jpg')"/> <components:LocalButton click="exit()" upIcon="@Embed(source='assets/images/normal_close.png')" downIcon="@Embed(source='assets/images/close_down.jpg')" overIcon="@Embed(source='assets/images/close.jpg')" disabledIcon="@Embed(source='assets/images/click_minimize.jpg')"/> </s:HGroup> <s:Image source="assets/images/qq_login_head.png" verticalCenter="15" horizontalCenter="0"/> </s:Group> <s:HGroup top="170" horizontalCenter="0" gap="8"> <s:Image source="assets/images/qq.jpg"/> <s:VGroup gap="6" horizontalAlign="right"> <s:TextInput id="userTI" width="194" text="12345" borderAlpha="0.7" height="25" borderColor="#D1D1D1"/> <s:TextInput id="passTI" text="12345" borderAlpha="0.7" height="25" borderColor="#D1D1D1" width="194" displayAsPassword="true"/> <s:HGroup gap="0" verticalAlign="middle"> <components:LocalButton upIcon="@Embed(source='assets/images/check_normal.jpg')" downIcon="@Embed(source='assets/images/check_click.jpg')" overIcon="@Embed(source='assets/images/check_over.jpg')" disabledIcon="@Embed(source='assets/images/up.jpg')"/> <s:Label text="記住密碼" color="0x666666" fontSize="13" fontFamily="SimSun"/> </s:HGroup> <s:Group height="60"> <components:LocalButton upIcon="@Embed(source='assets/images/btn_login_normal.jpg')" downIcon="@Embed(source='assets/images/btn_login_click.jpg')" overIcon="@Embed(source='assets/images/btn_login_over.jpg')" disabledIcon="@Embed(source='assets/images/up.jpg')" verticalCenter="0" click="loginHandle(event)" top="10"/> </s:Group> </s:VGroup> </s:HGroup> <s:HGroup bottom="-2" height="40" verticalAlign="middle" left="10"> <s:Label text="注冊" color="#999999" fontFamily="Microsoft YaHei" fontSize="12"/> <s:Label text="|" color="#999999" fontFamily="Microsoft YaHei" fontSize="12"/> <s:Label text="關于" color="#999999" fontFamily="Microsoft YaHei" fontSize="12"/> </s:HGroup> </s:Group> <s:Group width="100%" id="bgMain" height="100%" includeIn="stateMain"> <s:Group id="mainGroup" mouseDown="nativeWindow.startMove();" width="100%" height="110"> <s:Rect left="0" right="0" top="0" bottom="0" topLeftRadiusX="4" topRightRadiusX="4"> <s:fill> <s:LinearGradient rotation="135"> <s:entries> <s:GradientEntry alpha="1" color="#09C6E6" ratio="0" /> <s:GradientEntry alpha="1" color="#069DD6" ratio="0.77"/> </s:entries> </s:LinearGradient> </s:fill> </s:Rect> <s:HGroup left="6" top="5" gap="4" verticalAlign="middle"> <s:Image source="assets/images/logo.png"/> <s:Label color="#464646" fontWeight="bold" text="AirQQ"/> </s:HGroup> <s:HGroup right="0" top="0" gap="0"> <components:LocalButton click="minimize()" upIcon="@Embed(source='assets/images/normal_minimize.png')" downIcon="@Embed(source='assets/images/click_minimize.jpg')" overIcon="@Embed(source='assets/images/over_minimize.png')" disabledIcon="@Embed(source='assets/images/click_minimize.jpg')"/> <components:LocalButton click="exit()" upIcon="@Embed(source='assets/images/normal_close.png')" downIcon="@Embed(source='assets/images/close_down.jpg')" overIcon="@Embed(source='assets/images/close.jpg')" disabledIcon="@Embed(source='assets/images/click_minimize.jpg')"/> </s:HGroup> <s:Image source="@Embed('assets/images/mhead_online.png')" bottom="20" left="5" width="50" height="50" scaleMode="zoom"/> <s:VGroup height="50" left="65" bottom="20" paddingTop="3"> <s:Label id="username" fontFamily="Microsoft YaHei" fontSize="14" fontWeight="bold"/> <s:Label text="不要輕言放棄。否則對不起自己" fontFamily="Microsoft YaHei" fontSize="13"/> </s:VGroup> </s:Group> <mx:Tree id="tree" top="110" bottom="50" width="100%" height="100%" borderVisible="false" contentBackgroundColor="#FEFEFE" iconFunction="treeIconHandle" dataProvider="{friendXML}" focusColor="#6EF5ED" selectedItem="{}" styleName="treeStyle" variableRowHeight="true" wordWrap="true" itemRenderer="com.bufoon.render.MyTreeItemRenderer" labelField="@label" selectionColor="#3DDDDB" showRoot="false" doubleClickEnabled="true" doubleClick="tree_doubleClickHandler(event)"> </mx:Tree> <s:BorderContainer height="50" width="100%" bottom="0" backgroundColor="0xCFE5F8" borderVisible="false"> <components:LocalButton upIcon="@Embed(source='assets/images/search_normal.jpg')" downIcon="@Embed(source='assets/images/search_click.jpg')" overIcon="@Embed(source='assets/images/search_over.jpg')" disabledIcon="@Embed(source='assets/images/click_minimize.jpg')" toolTip="加入好友" verticalCenter="0" left="15"/> </s:BorderContainer> </s:Group> </s:WindowedApplication>

再開聊天窗體（chatWindow.mxml）

<?xml version="1.0" encoding="utf-8"?

> <s:Window xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" systemChrome="none" transparent="true" resizable="false" showStatusBar="false" xmlns:mx="library://ns.adobe.com/flex/mx" width="470" height="490" close="window1_closeHandler(event)" initialize="window1_initializeHandler(event)" skinClass="com.bufoon.skins.WindowAppSkin" xmlns:components="com.bufoon.components.*"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; .receiveTaStyle{ color:#575AEC; fontSize: 14; fontWeight:bold; } .sendTaStyle{ color:#157528; fontSize: 14; fontWeight:bold; } </fx:Style> <fx:Script> <![CDATA[ import com.adobe.serialization.json.JSON; import com.bufoon.socket.base.MessageType; import com.bufoon.socket.command.ParamHandle; import com.bufoon.socket.event.SocketEvent; import com.bufoon.socket.model.PackageHead; import com.bufoon.socket.util.DispatchEvent; import com.bufoon.util.CustomEvent; import com.bufoon.util.DateUtil; import mx.core.FlexGlobals; import mx.events.FlexEvent; import mx.managers.PopUpManager; import spark.components.RichEditableText; import spark.layouts.VerticalAlign; import flashx.textLayout.elements.FlowLeafElement; import flashx.textLayout.elements.InlineGraphicElement; import flashx.textLayout.elements.ParagraphElement; import flashx.textLayout.elements.SpanElement; import flashx.textLayout.elements.TextFlow; [Bindable] public var chatName:String; [Bindable] public var chatNum:String; private var _chatSendTA:TextFlow; private var _chatReceiveTA:TextFlow; private function get chatSendTA():TextFlow { return RichEditableText(sendTA.textDisplay).textFlow; } private function get chatReceiveTA():TextFlow { return RichEditableText(receiveTA.textDisplay).textFlow; } protected function window1_initializeHandler(event:FlexEvent):void { // TODO Auto-generated method stub groupWin.addEventListener(MouseEvent.MOUSE_DOWN, function move(e:MouseEvent):void{ nativeWindow.startMove(); }); //監聽服務器通知 DispatchEvent.getInstance().addEventListener(SocketEvent.NOTICE_RECEIVE , serverNotice); sendTA.addEventListener(FocusEvent.FOCUS_IN, focusInHandlers); } private function focusInHandlers(event:FocusEvent):void { IME.enabled = true; } private function serverNotice(event:SocketEvent):void{ var ph:PackageHead = PackageHead(event.data.ph); if(ph.messageCommand == MessageType.SEND_MESSAGE_ACK_NOTICE){ var jsonObj:Object = com.adobe.serialization.json.JSON.decode(ph.packageBodyContent); if(jsonObj.senderNum != chatNum){ return; } var p:ParagraphElement = new ParagraphElement(); var span:SpanElement = new SpanElement(); p.lineHeight = 30; span.text = jsonObj.sender + "(" + jsonObj.senderNum + ") " + DateUtil.formatDate(); span.setStyle("color", 0x575AEC); span.setStyle("fontWeight", "bold"); span.setStyle("fontSize", "15"); p.addChild(span); chatReceiveTA.addChild(p); var sendInfo:String = jsonObj.sendInfo; var re:RegExp = /\/\d{1,3}\.swf/g; //加上g表示找到全部匹配的字符串 var receivePE:ParagraphElement = new ParagraphElement(); receivePE.lineHeight = 30; receivePE.textIndent = 25; if(re.test(sendInfo)){ //有圖片，進行解析 var faceArr:Array = sendInfo.match(re); for(var i:int = 0; i <faceArr.length; i++){ //先替換。好做切割 sendInfo = sendInfo.replace(faceArr[i], "ā" + faceArr[i] + "ā"); } var sendInfoArr:Array = sendInfo.split("ā"); for(var j:int = 0; j <sendInfoArr.length; j++){ var temp:String = sendInfoArr[j]; if(re.test(temp)){ //圖片 var img:InlineGraphicElement = new InlineGraphicElement(); img.source = "assets/swf/face" + temp; receivePE.addChild(img); } else{ //文字 var text:SpanElement = new SpanElement(); text.text = temp; text.setStyle("fontSize", 13); receivePE.addChild(text); } } } else { //沒圖片 var text1:SpanElement = new SpanElement(); text1.text = sendInfo; text1.setStyle("fontSize", 13); receivePE.addChild(text1); } chatReceiveTA.addChild(receivePE); } receiveTA.validateNow(); receiveTA.scroller.verticalScrollBar.value = receiveTA.scroller.verticalScrollBar.maximum; receiveTA.validateNow(); receiveTA.scroller.verticalScrollBar.value = receiveTA.scroller.verticalScrollBar.maximum; } protected function sendMessageHandle(event:MouseEvent):void { var re:RegExp = /^\s*$/; var msg:String = sendTA.text; if(re.test(msg)){//假設輸入的字符串僅包括空格、回車或者空。就不能發送信息 sendTA.setFocus(); return; } var p:ParagraphElement = input.deepCopy() as ParagraphElement; var arr:Array = p.mxmlChildren; var sendInfo:String = ""; for(var i:int = 0; i < arr.length; i++){ if(arr[i] is SpanElement){ sendInfo += (arr[i] as SpanElement).text; } if(arr[i] is InlineGraphicElement){ var temp:String = String((arr[i] as InlineGraphicElement).source); temp = temp.substr(temp.lastIndexOf("/")); sendInfo += temp; } } trace(sendInfo); //p.format = chatSendTA.hostFormat; p.textIndent = 25; p.setStyle("fontSize", 13); p.lineHeight=30; p.verticalAlign = VerticalAlign.MIDDLE; var p1:ParagraphElement = new ParagraphElement(); var span:SpanElement = new SpanElement(); span.text = "我(" + chatNum + ") " + DateUtil.formatDate(); span.setStyle("color", 0x157528); span.setStyle("fontWeight", "bold"); span.setStyle("fontSize", "15"); p1.lineHeight = 30; p1.addChild(span); chatReceiveTA.addChild(p1); chatReceiveTA.addChild(p); sendTA.text = ""; sendTA.setFocus(); var obj:Object = new Object(); obj.sender = FlexGlobals.topLevelApplication.selfUserName; obj.receiver = chatName; obj.sendInfo = sendInfo; obj.receiverNum = chatNum; obj.senderNum = FlexGlobals.topLevelApplication.selfUserNum var param:String = com.adobe.serialization.json.JSON.encode(obj); var byteArrays:ByteArray = ParamHandle.setSendData(MessageType.SEND_MESSAGE, param); trace(MessageType.SEND_MESSAGE); FlexGlobals.topLevelApplication.clientSocket.send(byteArrays, receiveHandle); if(receiveTA != null){ receiveTA.validateNow(); receiveTA.scroller.verticalScrollBar.value = receiveTA.scroller.verticalScrollBar.maximum; receiveTA.validateNow(); receiveTA.scroller.verticalScrollBar.value = receiveTA.scroller.verticalScrollBar.maximum; } } private function receiveHandle(obj:Object):void{ var ph:PackageHead = PackageHead(obj); if(ph.messageCommand == MessageType.SEND_MESSAGE_ACK){ trace("發送成功"); } } protected function emotionSelected(event:MouseEvent):void { var ep:FaceWindow = new FaceWindow(); ep.addEventListener(CustomEvent.EMOTION_INSERT, selectEmotionHandler); var point:Point = event.currentTarget.localToGlobal(new Point(ep.x, ep.y-190)); ep.x = point.x; ep.y = point.y; PopUpManager.addPopUp(ep, this); } private function selectEmotionHandler(evt:CustomEvent):void { var img:InlineGraphicElement = new InlineGraphicElement(); img.source = evt.data; var anchor:int = sendTA.selectionAnchorPosition; anchor = (anchor == -1) ?

0 : anchor; var leaf:FlowLeafElement = input.findLeaf(anchor); //獲取被拆分的span的子索引。并將表情圖標插入到本child后方 var index:int = input.getChildIndex(leaf); input.addChildAt(index + 1, img); //設置光標 sendTA.textDisplay.selectRange(anchor + 1, anchor + 1); } private function get input():ParagraphElement { return chatSendTA.getChildAt(0) as ParagraphElement; } protected function window1_closeHandler(event:Event):void { var arr:Array = FlexGlobals.topLevelApplication.openWinUserNum; for(var i:int; i < arr.length; i++){ if(arr[i] == chatNum){ arr.splice(i-1, 1); } } } public function initChatWIN(sendInfo:String, headType:String):void{ if(headType == "男"){ winHeadImg.source = FlexGlobals.topLevelApplication.manHeadOnline; }else{ winHeadImg.source = FlexGlobals.topLevelApplication.womanHeadOnline; } if(sendInfo == ""){ return; } var p:ParagraphElement = new ParagraphElement(); var span:SpanElement = new SpanElement(); p.lineHeight = 30; span.text = chatName + "(" + chatNum + ") " + DateUtil.formatDate(); span.setStyle("color", 0x575AEC); span.setStyle("fontWeight", "bold"); span.setStyle("fontSize", "15"); p.addChild(span); chatReceiveTA.addChild(p); var sendInfo:String = sendInfo; var re:RegExp = /\/\d{1,3}\.swf/g; //加上g表示找到全部匹配的字符串 var receivePE:ParagraphElement = new ParagraphElement(); receivePE.lineHeight = 30; receivePE.textIndent = 25; if(re.test(sendInfo)){ //有圖片，進行解析 var faceArr:Array = sendInfo.match(re); for(var i:int = 0; i <faceArr.length; i++){ //先替換，好做切割 sendInfo = sendInfo.replace(faceArr[i], "ā" + faceArr[i] + "ā"); } var sendInfoArr:Array = sendInfo.split("ā"); for(var j:int = 0; j <sendInfoArr.length; j++){ var temp:String = sendInfoArr[j]; if(re.test(temp)){ //圖片 var img:InlineGraphicElement = new InlineGraphicElement(); img.source = "assets/swf/face" + temp; receivePE.addChild(img); } else{ //文字 var text:SpanElement = new SpanElement(); text.text = temp; text.setStyle("fontSize", 13); receivePE.addChild(text); } } } else { //沒圖片 var text1:SpanElement = new SpanElement(); text1.text = sendInfo; text1.setStyle("fontSize", 13); receivePE.addChild(text1); } chatReceiveTA.addChild(receivePE); } ]]> </fx:Script> <fx:Declarations> <!-- 將非可視元素（比如服務、值對象）放在此處 --> </fx:Declarations> <s:Group id="groupWin" width="100%" height="70"> <s:Rect id="background1" left="0" right="0" top="0" bottom="0" topLeftRadiusX="4" topRightRadiusX="4"> <s:fill> <s:LinearGradient rotation="135"> <s:entries> <s:GradientEntry alpha="1" color="#09C6E6" ratio="0" /> <s:GradientEntry alpha="1" color="#069DD6" ratio="0.77"/> </s:entries> </s:LinearGradient> </s:fill> </s:Rect> <s:HGroup left="6" top="5" gap="4" verticalAlign="middle"> <s:Image id="winHeadImg"/> <s:Label color="#464646" fontWeight="bold" fontFamily="Microsoft YaHei" fontSize="14" text="與 {chatName}({chatNum}) 聊天中"/> </s:HGroup> <s:HGroup right="0" top="0" gap="0"> <components:LocalButton click="minimize()" upIcon="@Embed(source='assets/images/normal_minimize.png')" downIcon="@Embed(source='assets/images/click_minimize.jpg')" overIcon="@Embed(source='assets/images/over_minimize.png')" disabledIcon="@Embed(source='assets/images/click_minimize.jpg')"/> <components:LocalButton click="close()" upIcon="@Embed(source='assets/images/normal_close.png')" downIcon="@Embed(source='assets/images/close_down.jpg')" overIcon="@Embed(source='assets/images/close.jpg')" disabledIcon="@Embed(source='assets/images/click_minimize.jpg')"/> </s:HGroup> </s:Group> <s:VGroup width="100%" top="70"> <s:TextArea id="receiveTA" width="100%" height="240" editable="false" borderVisible="false"/> <s:BorderContainer width="100%" borderVisible="false" height="30" backgroundColor="0xD2D79A"> <s:Image source="@Embed('/assets/emotions/grin.png')" left="10" verticalCenter="0" click="emotionSelected(event)" buttonMode="true"/> <mx:LinkButton right="10" click="receiveTA.text=''" verticalCenter="0" label="清除消息" fontFamily="Microsoft YaHei" fontSize="14" color="0x3A11E1"/> </s:BorderContainer> <s:TextArea id="sendTA" fontSize="13" height="80" width="100%" borderVisible="false" focusAlpha="0"/> <s:BorderContainer borderVisible="false" backgroundColor="0xD2D79A" width="100%" height="32"> <components:LocalButton upIcon="@Embed(source='assets/images/send_normal.png')" downIcon="@Embed(source='assets/images/send_click.png')" overIcon="@Embed(source='assets/images/send_over.png')" disabledIcon="@Embed(source='assets/images/send_over.png')" right="10" verticalCenter="0" click="sendMessageHandle(event)" /> </s:BorderContainer> </s:VGroup> </s:Window>

另一個標膠基本的Socket類

CustomeSocket.as

package com.bufoon.socket {import com.bufoon.socket.base.BaseSocket;import com.bufoon.socket.command.ParamHandle;import com.bufoon.socket.event.SocketEvent;import com.bufoon.socket.model.PackageHead;import com.bufoon.socket.util.DispatchEvent;import flash.utils.ByteArray;import flash.utils.Endian;public class CustomeSocket{/**Socket實例**/private var socket:BaseSocket;/**主機地址的私有變量**/private var _host:String;/**端口的私有變量**/private var _port:int;/**接收到socket進行回調處理**/private var resultFunction:Function;/**是否已經讀取了消息頭**/private var isReadHead:Boolean = false;/**消息的最大長度**/private var msgMaxLength:int = 2048;/**消息頭長度**/private var headLength:int = 10;/**包體長度**/private var dataLength:int;/**暫時存儲byte數組的對象**/private var byteArray:ByteArray ;public function CustomeSocket(host:String , port:int){this._host = host;this._port = port;socket = new BaseSocket();byteArray = new ByteArray();DispatchEvent.getInstance().addEventListener(SocketEvent.READY , onResultFunction);DispatchEvent.getInstance().addEventListener(SocketEvent.RECEIEVED , onReceieveByteArray);}/**建立Socket連接**/public function connect():void{trace(_host + "," + _port)socket.connect(_host, _port);}/**獲取當前socket的連接狀態**/public function get connected():Boolean{return socket.connected;}/**斷開Socket連接**/public function close():void{socket.close();}/**發送clientSocket消息**通過ByteArray,啟用*/public function send(byteArray:ByteArray , rsFunction:Function):void{//假設未連接，則返回if(!socket.connected){return;}resultFunction = rsFunction;socket.writeBytes(byteArray);socket.flush();}/**處理指令工廠的回調數據**/private function onResultFunction(event:SocketEvent):void{var cmd:int = event.data.msgReceiveType;//將數據傳到resultFunctionresultFunction.call(resultFunction, event.data.ph);}/**接收server端的byteArray信息*用于和C的直接交互*/private function onReceieveByteArray(event:SocketEvent = null):void{//暫時用不到這個byteArray.clear();var ph:PackageHead; //包頭if(!isReadHead){ //是否已經讀取了消息頭if(socket.bytesAvailable >= headLength){//讀取包頭信息socket.endian = Endian.LITTLE_ENDIAN;ph = new PackageHead();ph.packageHeadLength = socket.readShort();ph.messageType = socket.readByte();ph.contentType = socket.readByte();ph.messageCommand = socket.readShort();ph.packageBodyLength = socket.readInt();dataLength = ph.packageBodyLength;isReadHead = true;}}if(dataLength <= msgMaxLength && isReadHead){if(ph == null || ph.packageHeadLength != 10){return; //包頭信息有誤，直接不處理}if(socket.bytesAvailable >= dataLength){ //讀取包體內容ph.packageBodyContent = socket.readUTFBytes(dataLength);//派發內容if(ph.messageType == 0){ //server推送通知ParamHandle.boardNotice(ph);}else{ //普通的基于請求響應ParamHandle.parseSocketData(ph);}isReadHead = false;}}//假設還有可讀字節，遞歸if(socket.connected){if(socket.bytesAvailable >= headLength){onReceieveByteArray();}}}}}
BaseSocket.as

/*** 自己定義一個主要的Socket繼承系統Socket*內部僅重寫和對server的響應做了簡單的推斷*@author bufoon**/ package com.bufoon.socket.base {import com.bufoon.socket.event.SocketEvent;import com.bufoon.socket.util.DispatchEvent;import flash.events.Event;import flash.events.IOErrorEvent;import flash.events.ProgressEvent;import flash.events.SecurityErrorEvent;import flash.net.ObjectEncoding;import flash.net.Socket;import flash.system.Security;import mx.core.FlexGlobals;import mx.logging.LogEventLevel;public class BaseSocket extends Socket{public function BaseSocket(){/**AMF3僅僅在寫Object時才會用到,用于約定通信協議**/this.objectEncoding = ObjectEncoding.AMF3;/**監聽Socket載入過程中的全部事件**/this.addEventListener(Event.CONNECT, onConnect);this.addEventListener(Event.CLOSE, onClose);this.addEventListener(IOErrorEvent.IO_ERROR, onIOError);this.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);this.addEventListener(ProgressEvent.SOCKET_DATA, onData);}/**重寫connect方法，當中增加策略文件的載入**/override public function connect(host:String , port:int):void{Security.loadPolicyFile("xmlsocket://" + host + ":" + 843);super.connect(host, port);}/**關閉當前socket連接**/override public function close():void{if(this.connected){super.close();}}/**對socket數據的更新進行監聽操作**/private function onData(e:ProgressEvent):void{DispatchEvent.getInstance().dispatchEvent(new SocketEvent(SocketEvent.RECEIEVED));}private function onConnect(e:Event):void{trace('連接socketserver成功！

'); DispatchEvent.getInstance().dispatchEvent(new SocketEvent(SocketEvent.CONNECT)); } private function onClose(e:Event):void { trace('斷開了和socketserver的連接。'); //Alert.show("已經斷開與Socketserver的連接"); DispatchEvent.getInstance().dispatchEvent(new SocketEvent(SocketEvent.CLOSE)); } private function onIOError(e:IOErrorEvent):void { trace('連接server失敗。請稍候操作'); //Alert.show("連接Socketserver失敗"); DispatchEvent.getInstance().dispatchEvent(new SocketEvent(SocketEvent.IO_ERROR)); } private function onSecurityError(e:SecurityErrorEvent):void { trace('發生沙箱安全錯誤！'); DispatchEvent.getInstance().dispatchEvent(new SocketEvent(SocketEvent.SECURITY_ERROR_EVENT)); } } }

ParamHandle.as

package com.bufoon.socket.command {import com.bufoon.socket.base.MessageType;import com.bufoon.socket.event.SocketEvent;import com.bufoon.socket.model.PackageHead;import com.bufoon.socket.util.DispatchEvent;import com.bufoon.util.StringUtils;import flash.events.EventDispatcher;import flash.utils.ByteArray;import flash.utils.Endian;/*** socket發送和接收參數處理類**/public class ParamHandle extends EventDispatcher{private var byteArray:ByteArray;/*** 設置發送的數據包**/public static function setSendData(messageCommand:int = -1, message:String = ""):ByteArray{var byteArray:ByteArray;byteArray = new ByteArray();byteArray.endian = Endian.LITTLE_ENDIAN; //字節序byteArray.writeShort(MessageType.HEAD_LENGTH); //包頭大小byteArray.writeByte(MessageType.MESSAGE_TYPE); //消息類型byteArray.writeByte(MessageType.CONTENT_TYPE); //內容類型byteArray.writeShort(messageCommand); //消息命令byteArray.writeInt(StringUtils.getInstance().convertStringToByteArray(message).length); //包體長度if(message.length != 0){byteArray.writeUTFBytes(message); //包體內容}return byteArray;}/*** 派發事件**/ public static function parseSocketData(ph:PackageHead):void{var type:int = ph.messageCommand;DispatchEvent.getInstance().dispatchEvent(new SocketEvent(SocketEvent.READY, {msgReceiveType:type, ph:ph}));}public static function boardNotice(ph:PackageHead):void{DispatchEvent.getInstance().dispatchEvent(new SocketEvent(SocketEvent.NOTICE_RECEIVE, {ph:ph}));}} }
注：主要就是這幾個界面組件和Socket的操作類，還有就是Flex air同一個應用程序不能開多個窗體，這點不知道為什么。要開多個窗體就是新建幾個項目名稱不一樣即可，還有就是導出air安裝包的時候將項目-app.xml文件里的ID。name。filename改掉，再安裝就能夠。

總結

以上是生活随笔為你收集整理的Mina airQQ聊天 client篇（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。