머드초보의 블로그

플렉스로 만들기는 했지만, 뭐 모든 클라이언트 플랫폼에서 쉽게 만들 수 있습니다.

요아래에 있는 RESTful Web Service를 구축하셨다면 그것을 이용한 클라이언트가 필요할 것입니다.

게시판용 RESTful WebService만들기
http://mudchobo.tomeii.com/tt/345
http://mudchobo.tomeii.com/tt/346

그래서 구현해봤습니다.
우선 5가지 요청을 합니다.

1. 게시물 리스트를 받아오는 것(GET)
2. 게시물 1개의 데이터를 받아오는 것(GET)
3. 게시물 쓰기(POST)
4. 게시물 삭제(DELETE)
5. 게시물 수정(PUT)

핵심은 RESTful요청이 가능한 라이브러리입니다. 요아래를 참고하세요~

[Flex/AIR] RESTful WebService를 위한 Flex RestService Library!

이 라이브러리를 통해 RESTService요청을 합니다. (기존 Flex에 있는 HTTPService는 DELETE와 PUT이 안됩니다.)
[code]
<rest:RESTService id="boardService" method="GET"
        rootURL="http://localhost/BoardWS/resources/wsboards/" port="9080"
        result="resultBoardHandler(event)" fault="faultHandler(event)"/>
[/code]
이런식으로 요청하면 되겠죠? ^^

아래는 구현체 소스입니다.
허접해서 도움이 될지는 모르겠지만....-_-; 어쨌든 저의 삽질의 결정체니....-_-;

저 위에서 구현한 WebService를 띄워놓고, 이 클라이언트로 접속하면 잘 될겁니다.

이건뭐 설명이 필요없네요.
아까 전시간에 만든 WebService를 호출해봅시다.

전시간에 만들어 놓은 웹서비스
http://mudchobo.tomeii.com/tt/328

플렉스빌더를 실행합니다.
Air로 프로젝트를 하나 만듭니다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
           
            private function callWebService():void
            {
                helloWebService.sayHello(input.text);
            }
           
            private function resultHandler(event:ResultEvent):void
            {
                Alert.show(event.result.toString());   
            }
           
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.message);   
            }
        ]]>
    </mx:Script>
   
    <mx:WebService id="helloWebService"
        wsdl="http://localhost:9080/HelloWebApp/HelloService?WSDL"
        useProxy="false"
        result="resultHandler(event)"
        fault="faultHandler(event)" />
       
    <mx:TextInput id="input" enter="callWebService()"/>
    <mx:Button id="button" label="Button" click="callWebService()"/>
       
</mx:WindowedApplication>
[/code]
wsdl부분에서만 주소를 WSDL파일 주소로 써주세요.
그 외에는 RemoteObject나 HTTPService와 같이 같은 방식으로 해주면 돼요.

다음엔 RESTful이 뭔지 좀 알아봐야겠습니다.

Toad나 GOLDEN32를 사용하기 위해서는 오라클 클라이언트를 설치해야하는데 이걸 설치하고 GOLDEN32로 접속해서 쿼리를 날려서 검색하면 한글이 나와야 하는 부분이 ???로 나오게 됩니다.


원래 2008년 7월 12일 이라고 나와야하는데-_-; 안 나옵니다.
이게 서버쪽 케릭터셋이랑 클라이언트 케릭터셋이 안맞아서 그런데요. 서버는 한글이 된다면 KOREAN_KOREA.KO16KSC5601이걸로 되어있을껍니다-_-; 저도 오라클은 잘 모르지만 이게 맞는 것 같습니다.
그래서 클라이언트쪽에도 맞춰줘야합니다.

윈도우에 설치하셨다면 NLS_LANG을 추가하면 됩니다. 어디다가 하냐면 레지스트리에다가 합니다.
시작 -> 실행 -> regedit 실행

HKEY_LOCAL_MACHINE\SOFTWARE\ORACLE
여기로 찾아가서 ORACLE에 오른쪽 버튼 누르고, 새로만들기 -> 문자열값 하고
NLS_LANG이라고 씁시다.
더블클릭해서 값을 KOREAN_KOREA.KO16KSC5601이라고 합시다.

시도는 안해봤는데 환경변수로 지정해도 될 듯 합니다.
NLS_LANG=KOREAN_KOREA.KO16KSC5601



오....한글이 나와요!!!!

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

참고로 예제로 배우는 플렉스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을 활용합시다-_-;