머드초보의 블로그

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/

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

열이 아빠님의 글을 보고 http://koko8829.tistory.com/575 삽질을 시작했습니다.
사실 Spring Bean을 BlazeDS에서 사용하는 것은 이미 다른 사람들이 많이 만들었죠^^ 근데 스프링소스에서 공식적으로 지원을 해주다니 대단합니다^^ 제가 한번 해봤습니다-_-; 스프링과 BlazeDS의 기본만 알고 있어서 하는데에는 무리가 없었습니다-_-;

환경 : JDK 6 U 10 + Tomcat 6.0.18 + BlazeDS 3.2.0.3978 + Spring BlazeDS Integration 1.0.0.M1 + Flex SDK 3.2 + Flex Builder 3.0.2 + SpringFramework 2.5.6

SpringFramework 2.5.6 Download
BlazeDS 3.2.3978 Download
Spring BlazeDS Integration Download

쉬운 개발환경을 위해 플렉스빌더에서.....
New Flex Project -> Project name은 SpringBlazeDS, Web application을 선택하고, Application server type은 J2EE로 합니다 ^^ Next를 하시면 Target runtime은 Tomcat 6.0, Flex WAR파일은 BlazeDS를 다운로드해서 blazeds.war파일을 선택합니다. Finish를 때려줍니다-_-;

프로젝트의 Properties에서 Flex Server에 보면 Context root부분이 /WebContent로 되어있는데, /SpringBlazeDS로 바꿔줍니다.

라이브러리는 Spring에서 spring.jar, spring-webmvc.jar, Spring BlazeDS Integration에서 org.springframework.flex-1.0.0.M1.jar를 WEB-INF/lib폴더에 복사하면 됩니다.

자바쪽 셋팅을 해봅시다.
Webcontent/WEB-INF/web.xml파일을 열어서 수정합니다.
기존에는 MessageBrokerServlet을 사용해서 하는데, Spring BlazeDS Integration에서는 Spring Servlet을 사용합니다. MessageBroker Servlet을 servlet-mapping과 함께 지워주고, Spring Servlet을 선언합니다.
web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>SpringBlazeDS</display-name>

    <context-param>
        <param-name>flex.class.path</param-name>
        <param-value>/WEB-INF/flex/hotfixes,/WEB-INF/flex/jars</param-value>
    </context-param>

    <!-- Http Flex Session attribute and binding listener support -->
    <listener>
        <listener-class>flex.messaging.HttpFlexSession</listener-class>
    </listener>

    <!--  Spring Dispatcher Servlet --> 
    <servlet>
        <servlet-name>spring</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>spring</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>
    
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

설정파일을 작성하기 전에 초간단 스프링 빈을 하나 만들어봅시다.
service패키지를 하나 만들고, HelloService라는 클래스를 만듭시다.

package service;

public class HelloService {
    public String sayHello(String name) {
        return name + "! 메리추석!";
    }
}

이제 /WebContent/WEB-INF/applicationContext.xml파일을 생성합니다.
applicationContext.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"
    xmlns:p="http://www.springframework.org/schema/p"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
    http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">
    
    <bean id="mySpringManagedMessageBroker"
        class="org.springframework.flex.messaging.MessageBrokerFactoryBean" />
        
    <!-- Maps request paths at /messagebroker to the BlazeDS MessageBroker -->
    <bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping"
        p:mappings="/*=mySpringManagedMessageBroker" />
    
    <!-- Dispatches requests mapped to a MessageBroker -->
    <bean class="org.springframework.flex.messaging.servlet.MessageBrokerHandlerAdapter"/>
    
    <bean id="helloService" class="service.HelloService" />
    
    <bean id="hello"
        class="org.springframework.flex.messaging.remoting.FlexRemotingServiceExporter" 
        p:messageBroker-ref="mySpringManagedMessageBroker"
        p:service-ref="helloService"/>
        
</beans>

기존 MessageBroker가 Spring에 의해 관리된 MesssageBroker로 들어있는 것 같습니다. 그래서 Remote요청이 들어오면 Spring MessageBroker가 해당 destination을 찾아서 해주는 것 같습니다. 그리고, Spring Bean인 helloService를 불러오는 방법은 FlexRemotingServiceExporter를 이용해서 하는 것 같습니다. 요청하고 싶은 Bean을 FlexRemotingServiceExporter에 DI를 해서 사용하는 것이군요.
이곳에서 FlexRemotingServiceExporter의 id가 destination입니다^^ 저기서 hello로 정의했으니 Flex에서는 destination을 hello로 맞춰주면 되겠죠? ^^
나중에 destination을 추가하는 것은 service-config.xml에서 하는 것이 아니라 이곳에서 해야겠죠.
제가 잘못 이해하고 있는 것이 좀 많은 것 같아서...원문을 참조하세요~ ^^

이제 service-config.xml에 추가해야할 부분이 있습니다.

<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>

아....중요합니다. default-channels를 추가해야합니다!

이제 클라이언트로 가봅시다.
SpringBlazeDS.xml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:RemoteObject id="srv" destination="hello" />
    <mx:TextInput id="inputName" />
    <mx:Button label="전송" id="btnConfirm" click="srv.sayHello(inputName.text)" />
    <mx:Label id="labelResult" text="{srv.sayHello.lastResult}" />
</mx:Application>

RemoteObject로 sayHello함수를 input에 입력해서 결과를 Label에 쓰는 간단한 프로그램입니다.
서버를 실행시키고 실행해봅시다.
로그도 자세히 남는군요.
2008. 12. 27 오전 2:31:42 org.springframework.flex.messaging.servlet.MessageBrokerHandlerAdapter handle
정보: Channel endpoint my-amf received request.

젠장......어느카테고리에 넣어야 하지-_-; Spring에 넣자-_-;

자바스크립트와 Flex와 통신을 해주는 FABridge라는 놈은.....
우선 처음에 접하게 되면 혈압을 약 50%를 상승시켜주는 효과를 가져다 줍니다.

그 이유는 로컬에서는 테스트를 할 수 없습니다-_-;
즉, file:///D:/workspace/flex/~~~ 요런 경로에서는 실행할 수 없습니다.
처음에 그냥 flex builder에서 실행할 때에는 아무런 경고가 뜨지 않습니다. 하지만, export해서 build release를 한다음에 bin-release에 있는 html파일을 실행하면 요런 에러가 뜹니다-_-; 이걸로 혈압이 10%상승했죠.
아놔...그렇구나....-_-; 그래서 꼼수로....톰캣과 blazeds를 이용합니다-_-;
프로젝트를 생성할 때 ProjectName에 FABridgeTest로 하고, Web application으로 하고, Application ServerType을 J2EE로합니다. 톰캣을 사용하는 겁니다. 이렇게 생성한 놈은 실행할 때 http://localhost:8080/프로젝트명/프로젝트명.html로 실행해주기 때문에 테스트를 할 수 있습니다.
Next를 하고, Target runtime에 tomcat을 설정해주고, Flex War파일에는 blazeds.war파일을 선택합니다. Finish를 선택하여 프로젝트를 만듭니다.

기존에 있던 index.templete.html은 FABridge사용에 문제가 좀 있어서 다시 생성만들어야합니다.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html
여기에 가면 templete을 만들어 놓은 것이 있는데 다운받고 압축을 풀면, html-template폴더가 있는데, 기존의 html-template폴더 날려버리고, 이걸로 대체합니다.

이제 필요한 것은 FABridge.js파일인데, 이 파일은 기존의 것을 사용하면 swfobject 2.1에서는 사용할 수 없습니다. 그래서 수정한 버전이 필요합니다. 기존것으로 하려다 혈압이 약 20%상승한 듯 합니다.
http://www.swffix.org/swfobject/swfobject_flex3/
이곳에 가면 예제와 FABridge.js와 history.js파일이 있는데 이걸 html-templete폴더와 ./history폴더에 각각 복사합니다.
예제를 만들어봅시다.
index.templete.html파일을 열어서 bridgeName을 지정해줍니다.

var flashvars = {
    bridgeName: "mudchobo"
};

지정해주지 않으면 flash가 디폴트가 됩니다.
html-templete폴더에 test.js파일을 만들어서 테스트를 만들어봅시다.
test.js

var flexApp;

FABridge.addInitializationCallback( "mudchobo", function() {
    flexApp = FABridge.mudchobo.root();
    var callback = function() {
        alert('flex로 호출한 javascript메소드');
    }
    flexApp.getMyButton().addEventListener("click", callback);
});

function callFlexFunction() {
    flexApp.flexFunction('javascript로 호출한 flex메소드');
}

FABridge.addInitializationCallback함수는 birdge이름이 mudchobo인 flash가 초기화가 다 되면 호출이 되는 듯합니다. 로드가 다 된 상태면 저 뒤에 함수를 호출하게 되는 듯합니다.
window.onload에다가 때려박으면 FABridge.mudchobo가 undefined가 되더라구요. 이걸로 혈압이 약 10%상승했습니다.
javascript에서 flex버튼 이벤트가 발생했을 때 이벤트를 걸 수 있습니다. getMyButton()네이밍 룰은 flex에서 버튼 id가 myButton이면 getMyButton으로 해당 컴포넌트를 가져올 수 있습니다. id가 mudchobo면 getMudchobo()가 되겠죠. addEventListener에 click시 callback함수를 호출하도록 이벤트를 추가합니다.

그리고, callFlexFunction이라는 메소드를 추가해서 이것은 flex메소드를 호출하는 겁니다.
flexApp객체를 통해 그냥 함수명을 호출하면 호출이 됩니다.

index.templete.html에다가는 head부분에다가

<script type="text/javascript" src="FABridge.js"></script>
<script type="text/javascript" src="test.js"></script>

body부분에다가 button을 추가

<div>
    <input type="button" id="javascriptButton" value="callFlex" onclick="callFlexFunction();"/>
</div>

이제 flex코드로 가봅시다. 우선 FABridge.as파일이 필요합니다. 이 파일은 C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.0.0\frameworks\javascript\fabridge\src에 있습니다. 아주 꼭꼭 숨겨두셨어요-_-;

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:bridge="bridge.*" width="300" height="150">
    
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function flexFunction(data:String):void
            {
                Alert.show(data);
            }
        ]]>
    </mx:Script>
    
    <mx:Button id="myButton" label="callJavaScript" />
    
    <bridge:FABridge />
</mx:Application>

중요한 점은 xmlns:bridge="bridge.*"랑 <bridge:FABridge /> 입니다.
이제 실행을 해봅시다.
아...여기서 이제 html-templete내용의 js파일을 고쳤는데 파폭에서 열고 소스보기하면 안바뀌어 있을 때가 있습니다. 그때는 Flex메뉴에서 Project -> clean을 해주면 되더라구요. 이걸로 혈압 10%상승!

실행하면 localhost로 뜨기 때문에 잘 될 겁니다. 소스파일입니다.

다음시간엔 실제 ajax를 요청해봐야겠다-_-;