머드초보의 블로그

다운로드는 여기서....-_- adobe.com 사이트에 가입하셔야 합니다.

플래시 빌더4 Beta 2 다운로드

BlazeDS버전이 4.X대여야 잘 됩니다. 3.X대면 안되더군요.
그리고 BlazeDS버전이 4.x의 Beta1버전이 있는데, 이걸로 하면 요런 에러가 뜹니다.

그냥 막 하면 잘 안되더군요. 구글링을 해보니 여러 블로그에서 이런 시도를 한 흔적들이 있었습니다-_- App Engine이 자바를 지원한다고 할 때부터 외국에서는 다양한 시도를 하나봅니다-_- 이번 Spring BlazeDS Integration도 누가 먼저 시도를 한 흔적이 있었네요.

이번 Spring BlazeDS Integration 1.0.1릴리즈 기념과 Spring교육 끝난 기념으로 간만에 삽질해봤습니다.
하지만, messaging 등의 심화적인 것은 못해보구요. 우선 서비스를 가져오는지만 해봤습니다.

삽질환경

- IDE
Eclipse3.5와 구글앱앤진 플러그인 - http://code.google.com/intl/ko-KR/eclipse/docs/download.html
Flex Builder 3.0.2
JDK 1.6.0 U14
- 라이브러리
Spring Framework 2.5.6
BlazeDS 3.2.0.3978
Spring BlazeDS Integration 1.0.1
Jackson 1.2.0
Cglib 2.1.3

1. App Engine 프로젝트 생성
프로젝트 생성하고 나서 라이브러리들을 다 복사합니다. 저는 아래와 같이 라이브러리를 복사했습니다.
기존App Engine lib, spring.jar, spring-webmvc.jar, blazeds.war에 있는 lib, jackson-core-lgpl-1.2.0.jar, jackson-mapper-lgpl-1.2.0.jar, cglib-nodep-2.1_3.jar, org.springframework.flex-1.0.1.RELEASE.jar
그리고, appengine-web.xml파일에 한줄 추가합니다.

<sessions-enabled>true</sessions-enabled>

이거 필요한건지는 잘 모르겠군요-_-
WEB-INF폴더아래 blazeds.war파일에 들어있는 flex폴더를 복사합니다(*-config.xml의 파일이 있는 것)

2. 서비스 클래스 생성
이제 서비스를 만들어봅시다. 초간단 헬로우서비스를-_-
src폴더에 만들어봅시다. 전 com.mudchobo.springblazedsserver.service패키지에 HelloService클래스를 생성했음!
HelloService.java

package com.mudchobo.springblazedsserver.service;

public class HelloService {

    public String sayHello(String name) {
        return "Hello, " + name;
    }
}

3. 설정파일 생성 및 설정
스프링관련 설정을 해야해요. web.xml에서 디폴트로 설정된 servlet설정을 지우고 아래를 추가
web.xml

<context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>
            /WEB-INF/config/*-context.xml
        </param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    
    <!--  SpringDispatcherServlet -->
    <servlet>
        <servlet-name>flex</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>flex</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>

flex라는 이름의 서블릿을 만들었으니 스프링 설정파일이름인 flex-servlet.xml을 생성합니다.
flex-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:flex="http://www.springframework.org/schema/flex"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
        http://www.springframework.org/schema/flex 
        http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">
    
    <flex:message-broker />
    
    <flex:remoting-destination ref="helloService"/> 
</beans>

flex라는 네임스페이스를 제공하는데요. <flex:message-broker />이 한줄로 모든 설정이 되어버립니다. M1 삽질했을 때에는 네임스페이스 없어서 bean써주고, 다 설정했던 기억이 나네요. 네임스페이스로 한줄로-_-

remoting-destination태그는 destination을 설정하는 건데, 해당 bean을 ref하면 해당 bean이름으로 destination으로 flex에서 가져올 수 있어요.
그럼 서비스를 설정할 설정파일을 생성해봅시다. configlocation을 /config/*-context.xml을 잡았는데, /config/services-context.xml파일을 만들어봅시다^^
services-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd">

    <bean id="helloService" class="com.mudchobo.springblazedsserver.service.HelloService" />
    
</beans>

방금 만든 HelloService를 bean으로 설정.

마지막으로 flex/services-config.xml에서 default-channels를 추가합시다.

<services>
        <service-include file-path="remoting-config.xml" />
        <service-include file-path="proxy-config.xml" />
        <service-include file-path="messaging-config.xml" />
        <default-channels>
            <channel ref="my-amf"/>
        </default-channels>        
    </services>

그리고 이것도 추가해야해요.

<system>
        <manageable>false</manageable>
            ....
       </system>

이거 추가안하면 앱엔진에서 이런 에러로그를 뿜음-_-
org.springframework.beans.factory.BeanCreationException: Error creating bean with name '_messageBrokerDefaultHandlerMapping': Initialization of bean failed; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name '_messageBroker': Invocation of init method failed; nested exception is org.springframework.beans.factory.BeanInitializationException: MessageBroker initialization failed; nested exception is java.lang.NoClassDefFoundError: java.lang.management.ManagementFactory is a restricted class. Please see the Google App Engine developer's guide for more details.

관리자 기능이라고 하는 것 같은데, 정확히 뭔지는 잘 모르겠지만, 끄면 잘 됩니다-_-

4. 클라이언트 프로젝트 생성
flex project를 생성할 때 이렇게 생성해주면 편합니다.
Flex Project선택 -> Project name쓰고, Application server type은 J2EE, Create combined Java~~는 체크해제, Use remote object access service는 체크하고, Next.
그 다음 Serverlocation 셋팅을 Root folder는 AppEngine의 war폴더를 지정해주면 되구요.
Root URL은 앱엔진 기본 실행 경로인 http://localhost:8080하면 되구요. Context root는 /로 지정하면 됩니다.
그러면 디버그나 Run시에 localhost:8080/프로젝트명/프로젝트명.html로 실행이 돼요.
코드는
SpringBlazeDSClient.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:RemoteObject id="srv" destination="helloService" />
    <mx:TextInput id="inputName" />
    <mx:Button label="전송" id="btnConfirm" click="srv.sayHello(inputName.text)" />
    <mx:Label id="labelResult" text="{srv.sayHello.lastResult}" />
    
</mx:Application>

이 코드 너무 활용하는 것 같아-_- 암튼 destination은 helloService로 설정했기 때문에 이걸로 지정하면 됩니다.

5. 이제 배포 및 실행
이제 swf파일도 appengine프로젝트에 생성하고, AppEngine을 배포하고 실행하면 또다른 에러를 보실 수 있습니다-_-
[RPC Fault faultString="Detected duplicate HTTP-based FlexSessions, generally due to the remote host disabling session cookies. Session cookies must be enabled to manage the client connection correctly." faultCode="Server.Processing.DuplicateSessionDetected" faultDetail="null"]
와....미쳐버립니다. 이건 뭔가....검색해보니 앱엔진이 여러 서블릿배포할 때 1개의 클라이언트 정보를 동일하게 배포를 해서 어쩌구 라고 번역기를 돌리니 써있네요-_- 이걸 픽스한 jar파일이 돌아다닙니다-_-
기존 flex-messaging-core.jar파일을 위 파일로 교체해주면 되더군요.

이제 실행하면 잘 될겁니다.
실행주소입니다.
http://mudchobo1.appspot.com/SpringBlazeDSClient/SpringBlazeDSClient.html


messaging이나 security적용한 것도 한번 해봐야겠네요.

참고사이트
http://www.adobe.com/jp/devnet/flex/articles/google_app_eng_w_beazeds_p2.html
http://martinzoldano.blogspot.com/2009/04/appengine-adobe-blazeds-fix.html

PHP는 HTTPService말고 방법이 없을까 하고 찾아보니, Zend에서 AMF를 이용하여 개발한게 있군요. Adobe의 공식 지원으로 만들어진거라 빠르리라고 생각합니다^^ (적어도 HTTPService보단 빠르겠죠!)

암튼, BlazeDS를 하셨다면 그리 어렵지 않군요.
이번에도 간단하게 소녀시대예제를 통해...접근해봅시다-_-;

간단히 데이터를 불러오고, 저장도 해보는 그런 애플리케이션을 만들어봅시다.

우선 Eclipse에서 php가 가능하도록 해야하는데요. 뭐 그냥 editplus에서 해도 상관없습니다. Zend홈페이지에 가면 자기네들 IDE깔라고 합니다-_-; Zend Studio라는 게 있네요. 뭐 php단은 netbeans를 이용해서 개발하셔도 되고, 이클립스에 있는 PDT를 추가하셔서 해도 상관없어요~ ^^ 전 NetBeans를 선호합니다. 좋아요!

DB입니다.

DROP TABLE IF EXISTS `sosi`.`sosi`;
CREATE TABLE  `sosi`.`sosi` (
  `idx` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `sosiname` varchar(45) NOT NULL,
  `height` int(10) unsigned NOT NULL,
  `blood` varchar(45) NOT NULL,
  PRIMARY KEY (`idx`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

INSERT INTO `sosi` (`idx`,`sosiname`,`height`,`blood`) VALUES 
 (1,'윤아',166,'B'),
 (2,'수영',170,'O'),
 (3,'효연',160,'AB'),
 (4,'유리',167,'AB'),
 (5,'태연',162,'O'),
 (6,'제시카',163,'B'),
 (7,'티파니',162,'O'),
 (8,'써니',158,'B'),
 (9,'서현',168,'A');

우선 Flex Project를 만듭니다.
여기서 Application server type을 php로 하세요~ php로 하게 되면 설정된 폴더로 swf를 바로 위치시킬 수 있어요!
Project name은 ZendAmfTest -> Web root는 아파치가 돌아가는 폴더를 지정하면 됩니다.
저는 C:\Program Files\Apache Software Foundation\Apache2.2\htdocs여기군요.
Root URL은 http://localhost/ Finish때려주면 ZendAmfTest-debug폴더에 swf가 생기죠.

요 아래 주소에서 ZendAMF를 받을 수 있습니다.
http://framework.zend.com/download/amf
받은 다음에 압축을 풀면 library폴더 안에 Zend라는 폴더가 있는데 통채로 복사해서 src폴더 아래에 놓습니다.

그리고 php파일을 하나 만드세요. ValueObject입니다. Java에서 bean같은..-_-;
SosiVo.php

<?php
class SosiVo {
    public $idx;
    public $sosiname;
    public $height;
    public $blood;
}
?>

이제 서비스를 하나 만들어봅시다. SosiService입니다.
SosiService.php

<?php
require_once 'SosiVo.php';

//conection info
define("DATABASE_SERVER", "localhost");
define("DATABASE_USERNAME", "root");
define("DATABASE_PASSWORD", "mudchobo");
define("DATABASE_NAME", "sosi");

class SosiService {
    public function getData() {
        $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME,
            DATABASE_PASSWORD);
        mysql_select_db(DATABASE_NAME);
        $query = "SELECT idx, sosiname, height, blood FROM sosi";
        $result = mysql_query($query);

        $ret = array();
        while ($row = mysql_fetch_object($result)) {
            $tmp = new SosiVo();
            $tmp->idx = $row->idx;
            $tmp->sosiname = $row->sosiname;
            $tmp->height = $row->height;
            $tmp->blood = $row->blood;
            $ret[] = $tmp;
        }
        mysql_free_result($result);
        return $ret;
    }
}
?>

php의 array는 ActionScript3의 array와 호환됩니다.
서비스를 만들었으니 EndPoint페이지를 만들어줘야합니다.
amf.php

<?php
require_once 'Zend/Amf/Server.php';
require_once 'SosiService.php';

$server = new Zend_Amf_Server();
$server->setClass("SosiService");
$server->setClassMap("SosiVo", "SosiVo");
echo($server -> handle());
?>

이제 이것을 연결시켜줄 service-config.xml파일을 만들어야합니다.

<?xml version="1.0" encoding="UTF-8"?>
<services-config> 
    <services> 
        <service id="amfphp-flashremoting-service" 
            class="flex.messaging.services.RemotingService" 
            messageTypes="flex.messaging.messages.RemotingMessage">
            <default-channels>
                   <channel ref="my-zend"/>
            </default-channels> 
            <destination id="zend">
                <properties> 
                    <source>*</source> 
                   </properties> 
               </destination>
        </service> 
    </services> 
    <channels> 
        <channel-definition id="my-zend" 
            class="mx.messaging.channels.AMFChannel"> 
            <endpoint uri="http://localhost/ZendAmfTest-debug/amf.php" 
                class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition> 
    </channels>
</services-config>

우선 default로 my-zend라는 채널을 잡았는데, my-zend는 endpoint uri가 ~~/amf.php입니다. 우리가 좀전에 작성했던 endpoint죠. 새로운 서비스가 추가되어 새로운 endpoint를 작성하게 될 때 endpoint파일을 amf1.php라고 했을 때 이곳에 추가해서 channel에 기입할 수도 있고, <mx:RemoteObject>에서 endpoint를 해당 uri로 바꿔주는 방법 2가지가 있습니다.

그럼 이제 Flex쪽으로 넘어가봅시다.
ZendAmfTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical"
    creationComplete="creationCompleteHandler()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            
            private function creationCompleteHandler():void
            {
                roSosi.getData();    
            }
            
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show(event.message.toString());
            }
            
            private function resultGetDataHandler(event:ResultEvent):void
            {
                dgSosi.dataProvider = event.result as Array;
            }
        ]]>
    </mx:Script>
    
    <mx:RemoteObject id="roSosi" fault="faultHandler(event)" destination="zend" source="SosiService">
        <mx:method name="getData" result="resultGetDataHandler(event)" />
    </mx:RemoteObject>
   
    <mx:DataGrid id="dgSosi" width="100%" height="100%">
        <mx:columns>
            <mx:DataGridColumn headerText="아이디" dataField="idx"/>
            <mx:DataGridColumn headerText="소녀시대이름" dataField="sosiname"/>
            <mx:DataGridColumn headerText="신장" dataField="height" />
            <mx:DataGridColumn headerText="혈액형" dataField="blood" />
        </mx:columns>
    </mx:DataGrid>
    
</mx:Application>

만약 다른 서비스를 추가하게 된다면, <mx:RemoteObject>에서 endpoint를 다른 url로 잡아주면 됩니다.

<mx:RemoteObject id="roAnother" fault="faultHandler(event)" 
        destination="zend" source="AnothorService" 
        endpoint="http://localhost/ZendAmfTest-debug/another_amf.php">

아님 service-config.xml에서 channel을 다르게 해서 destination을 다르게 설정해도 되구요.

ps1. 다른 예제에서는 2개의 service를 이용한 예제가 없더라구요. 그래서 사실 저렇게 하는 게 맞는지 잘 모르겠습니다. 다른 방법이 있을 수도 있구요^^ 암튼, 제가 삽질한 바로는 서비스당 1개의 php파일을 만들어야 하더라구요.

ps2. PHP를 시작한지 얼마 안되었는데, DB연동 시 한글이 깨지더라구요. 인코딩을 my.ini과 php.ini에 utf-8로 맞췄는데, ???로 인식해서 나오는 경우가 있더라구요. php파일에서 db정보를 출력하니 이상하게 그냥 로컬에서 쳤을 때에는 utf-8로 나오는데, php파일이 출력한 db정보는 latin으로 나올 때가 있더라구요. 이 경우 my.ini파일에 이 부분을 추가해주면 됩니다.
[mysqld] 아래에
character-set-client-handshake = FALSE
client 인코딩으로 강제 셋팅하는거라고 하더라구요. 저는 처음에 ??? 뜨길래 이걸로 해결봤습니다-_-;
아 또 다른 방법으로 쿼리날리기 전에 set names 'utf8'이라고 먼저 날려줘도 됩니다.

mysql_query("SET NAMES 'utf8'");

ps3. 이런...생각해보니 client에서 VO를 안만들어줬군요-_-;

참고자료
http://corlan.org/2008/11/13/flex-and-php-remoting-with-zend-amf/

덧. 채널 못찾는 에러는 아래 주너니님의 댓글을 참조하세요~ 컴파일옵션을 추가해야합니다^^
주너니님 감사합니다 ^^