이번에는 클라이언트를 보겠습니다.

참고로 예제로 배우는 플렉스2에 있는 CODE7_13을 참고했습니다.
(틀만 가져다가 썼습니다 ^^)
FLEX3 BETA2에서 테스트해봤습니다.




클라이언트(FLEX)

ChatClient_Flex.mxml
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 creationComplete="initApp()">
 
 <mx:Script>
  <![CDATA[
   private var socket:Socket = new Socket();
   [Bindable]
   public var userId:String;
   
   private function initApp():void {
    currentState = "logon";
   }
   
   public function logon():void {
    socket = new Socket("127.0.0.1", 10001);
    socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
    userId = tUserId.text;
    socket.writeUTFBytes(userId + "\n");
    socket.flush();
    currentState = "chat";
   }
   
   private function socketDataHandler(event:ProgressEvent) :void {
          var str:String = socket.readUTFBytes(socket.bytesAvailable);         
          trace(str);
          trace("음");
          var trimstr:String = str.substr(0, str.indexOf("\r\n"));
          log.text += trimstr + "\n";
      }
        
   public function send():void {
    socket.writeUTFBytes(msg.text + "\n");
                socket.flush();
                msg.text = "";
                
   }
  ]]>
 </mx:Script>
 
 <mx:Panel id="panel" width="100%" height="100%" verticalAlign="middle"
  horizontalAlign="center">
  <mx:ControlBar id="cb" height="44" />
 </mx:Panel>
 
 <mx:states>
 
  <mx:State name="logon">
   <mx:AddChild relativeTo="{panel}">
    <mx:HBox>
     <mx:Label text="User Id:" />
     <mx:TextInput id="tUserId" enter="logon()" />
     <mx:Button label="Logon" click="logon()" />
    </mx:HBox>
   </mx:AddChild>
  </mx:State>
 
  <mx:State name="chat">
   <mx:SetProperty target="{panel}" name="title"
    value="접속자 ID : [{userId}]" />
   <mx:AddChild relativeTo="{panel}">
    <mx:TextArea id="log" width="100%" height="100%" editable="false"/>
   </mx:AddChild>
   <mx:AddChild relativeTo="{cb}">
    <mx:HBox width="100%" paddingTop="0" paddingBottom="0">
     <mx:TextInput id="msg" enter="send()" width="100%" />
    </mx:HBox>
   </mx:AddChild>
  </mx:State>
 
 </mx:states>
 
</mx:Application>
[/code]
처음에 소켓이 조금 헷깔렸는데-_-; 이제 좀 알것같네요.
우선 아이디를 입력하고 로그인을 클릭하면 logon함수를 실행하는데 socket에 이벤트리스너를 등록해요.
socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
이거를 등록하게 되면, 서버쪽에서 데이터를 받게 되면 이벤트가 발생되는데 socketDatahandler라는 함수를 호출하라는 얘기죠.
서버가 데이터를 던져주게되면 저함수를 호출해서 readUTFBytes를 호출하면 데이터를 받아올 수 있죠.

※readMultiByte(socket.bytesAvailable, "euc-kr") 이렇게하면
서버쪽에서 UTF-8로 안만들어도 되는데요.
UTF-8이 대세기때문에-_-; UTF-8을 활용합시다-_-;


사용자 삽입 이미지

사용자 삽입 이미지



서버
http://mudchobo.tomeii.com/tt/152
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon chichs 2008.03.26 17:29  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~
    블로그에 막 입성한 초보블로거라서 잘몰라 요래저래 하다보니 트랙백이 갔네요;;
    요새 플렉스를 열심히 배우고 있어서..ㅎㅎ
    이 글을 고대로 퍼가려다가;; (그런건안데나;;)

    암튼.. 좋은정보 감사하구요~ 앞으로 자주 올께요^^

    • 머드초보 2008.03.27 08:28  댓글주소  수정/삭제

      안녕하세요 ^^ 반갑습니다 ^^
      저도 시작한지 이제 겨우 9개월밖에 안되서 ^^
      저는 트랙백거는거 한 3달만에 터득한 것 같은데 대단하십니다 ^^
      글 퍼가셔도 되는데 출처만 남기시면 돼요 ^^
      그럼 앞으로 블로그를 잘 이끌어나가세요 ^^

  2. 낭만공돌이 2008.05.01 01:40  댓글주소  수정/삭제  댓글쓰기

    적어주신 예제. 간단하고 이해하기 쉬워서 너무 잘 보았습니다!
    다만 한가지 질문이 있는데.
    client 단에서 첫번째로 보낸 메시지를 userID 로 받아서 "접속한 사용자의 ID는 xxx 입니다."
    라고 뿌려주시는 것 같은데.

    저는 아무래도 그 첫번째 메시지가 계속
    <policy-file-request/>
    인 것 같습니다.
    덕분에 첫번째 채팅 메시지가 ID로 인식되는군요 ㅠ

    이거 어떻게 해야 해결될까요..

    인터넷을 뒤져서
    classdomain.xls 파일을 만들라는 조언도 봤는데, 그대로 해도 잘 안되는군요;;;;
    ㅠㅠ

    혹시 도와주실 수 있을까요...ㅠ

    • 머드초보 2008.05.07 18:07  댓글주소  수정/삭제

      아....무슨얘기인지 잘 모르겠네요-_-;
      접속한 아이디라면...아이디를 그냥 서버에 넘겨주면 될듯한데요
      서버단에서 처리해야할 듯 합니다 ^^

  3. jun 2008.06.02 18:53  댓글주소  수정/삭제  댓글쓰기

    crossdomain 문제입니다 ..

    서버단에서 크로스 도매인 문서를 보내주고

    서버에서 접속을 끊어야 합니다

  4. calmtot 2009.03.06 16:42  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 잘 보고 갑니다~~ 고마워요 ^^ ㅋ

  5. 김경순 2009.03.10 16:02  댓글주소  수정/삭제  댓글쓰기

    고맙습니다. 저도 플랙스 채팅 프로그램을 Client/Server로 만드는 중인데 좋은 자료여서
    참고하도록 하겠습니다. 감사합니다.

    • 머드초보 2009.03.13 12:12  댓글주소  수정/삭제

      아넵 도움이 되셨다니 다행이네요^^
      방문해주셔서 감사해요~ ^^

  6. 쿨해요 2010.07.18 19:37  댓글주소  수정/삭제  댓글쓰기

    굿입니다.