| 플래시 플레이어가 커뮤니케이션 서버와 연결하는 방법에는 이미 언급했던 것처럼 SimpleConnect 컴포넌트를 이용하는 방법과 서버측 객체인 NetConnection()을 이용하는 방법이 있다. 간단한 UI 컴포넌트(SimpleConnect)가 있음에도 불구하고 서버와의 연결을 위해 액션스크립트를 사용하는 이유는 유연한 제어를 위해서이다. 서버와의 통신을 통해 액션스크립트를 사용하게 되면 SimpleConnect 컴포넌트에서는 구현하지 못하는 다양한 방식으로 서버를 제어할 수 있다. 이번 포스트에서는 NectConnection 객체를 이용하여 서버에 연결하는 방법을 소개하고자 한다.
NetConnection() 클래스 플래시 플레이어는 NetConnection() 객체를 이용하여 커뮤니케이션 서버에 연결한다. NetConnection() 객체는 RTMP를 통해 서버와 지속적인 연결을 유지한다. 메크로미디어사는 NetConnection() 객체를 '플래시 커뮤니케이션 서버와 플래시 리모팅 MX 서버 사이의 다방향성 통신을 관리하는 객체'라고 정의하고 있다. NetConnection은 클라이언트와 서버 사이의 터널이라 생각하면 된다. NetConnection() 메소드(method)·속성(property)·이벤트(event) 메소드(행동)는 객체 속성(특징)에 영향을 미치는 객체 내부의 함수이다. 속성(특징)은 객체를 설명하는 값을 가지는 변수이다. 이벤트는 특정 액션이나 입력사항에 응답하여 객체를 변화시켜 주는 리스너와 유사한 역할을 한다. 1. NetConnection() 객체의 메소드에는 다음과 같은 것들이 있다 1) connect(): 클라이언트와 서버간의 연결을 설정한다. 이 메소드에 의해 연결이 설정되면 서버에서는 Application.onConnect()라는 이벤트를 발생시킨다. 2) close(): 클라이언트와 서버간의 연결을 해제한다. 이 메소드에 의해 연결이 해제되면 서버에서는 Application.onDisconnect()라는 이벤트를 발생시킨다. 3) call(): 응용 프로그램에 정의되어 있는 서버 메소드를 호출한다. 서버 메소드는 main.asc 파일에 정의되어 있다. 2. NetConnection() 객체의 속성에는 다음과 같은 것들이 있다. 1) isConnected: 서버와 연결되어 있는 경우 true를 반환, 연결되어 있지 않은 경우에는 false를 반환. connect() 메소드와 close() 메소드에 의해 반환해 주는 값들이 바뀌게 된다. 2) uri: 연결에 사용되는 URI(Uniform Resource Indicator) 연결 문자열을 반환해준다. 이 속성을 통해 정확하게 연결 주소를 입력했는지 알아낼 수 있다. NetConnection() 이벤트에는 onStatus가 있다. 에러가 발생하거나 서버와의 연결이 설정되거나 서버로부터의 연결이 종료되는 것과 같이 서버의 상태를 변화할 때, onStatus 이벤트가 바로 호출된다. NetConnection() 객체에 대한 보다 자세한 설명은 플래시 커뮤니케이션 서버가 설치되어 있는 폴더의 flashcom_help\html 의 도움말 파일 중 서버측 액션스크립트 사전(Server-Side Communication ActionScript Dictionary)을 참조하거나 매크로미디어사의 플래시 커뮤니케이션에 대한 도움말 페이지에서 찾아 볼 수 있다. 매크로미디어사의 도움말 주소는 아래와 같다. 예제 1. 액션스크립트와 NetConnection()을 이용하여 서버 연결 1) 윈도우 탐색기를 이용하여 서버의 애플리케이션 폴더를 연다. applications 폴더에 netConnection 이라는 폴더를 생성한다. "netConnection" 플래시 커뮤니케이션 서버 애플리케이션의 이름이다. 2) netConnection 폴더에 텍스트 편집기를 이용하여 main.asc파일을 생성한다. 서버측 컴포넌트들을 로딩하기 위해 다음과 같은 코드를 작성한다. load("components.asc"); 3) 플래시 MX에서 접속 정보를 확인할 수 있는 ConnectionLight 컴포넌트와 접속한 사람들의 목록을 리스트할 수 있는 PeopleList 컴포넌트를 스테이지에 추가한다. 4) 프로퍼티 인스펙터를 통해 ConnectionLight 컴포넌트에는 connectionLight_mc라는 인스턴스 이름을 주고 PeopleList 컴포넌트의 인스턴스 이름은 peopleList_mc라고 정해준다. 5) 1) ~ 4)에 대한 좀더 자세한 설명을 원하면 플래시 커뮤니케이션 서버[2] 포스트를 참조하기 바란다. 이제 처리할 일들을 액션스크립트로 작성하는 과정이 남았다. 4) NetDebug 클래스 파일을 삽입하여 NetConnectionDebuger를 사용할 수 있도록 한다. 플래시 MX의 Layer1의 1번 프레임에 다음과 같은 코드를 작성한다. //디버그 클래스 파일을 삽입 #include "NetDebug.as" 5) NectConnection의 인스턴스를 생성한다. NetConnection 인스턴스의 이름을 정할 때 코드 힌트를 이용하기 위해서는 접미사 "_nc" 붙여준다.
//NetConnection 객체로부터 새로운 인스턴스를 생성 myConnection_nc = new NetConnection(); 6) 연결이 성공적으로 이루어졌는지 확인하기 위해 연결상태를 trace 액션을 이용하여 출력하도록 하겠다. trace 액션은 액션스크립트를 작성하는 동안 디버깅을 하는데 유용하게 이용할 수 있다. 7) onStatus 이벤트는 서버로부터 서버의 상태 메시지가 전달되었을 경우 발생하는 이벤트다. 기본적으로 메소드 재정의(method over riding)을 이용하여야 한다.
//서버로부터 전달되는 상태변화나 응답에 대한 이벤트 처리 myConnection_nc.onStatus = function(info) { trace("LEVEL: " +info.level+" CODE : "+info.code); }; 8) 서버의 이름과 포트 번호, 애플리케이션, 인스턴스와 사용자 이름을 지정하여 서버와 연결해보도록 하겠다. 먼저 connect 메소드를 이용하여 서버에 명령을 보낸다. connect 메소드에는 커뮤니케이션 서버의 위치 정보를 매개변수로 사용해준다. //서버와의 연결을 설정한다. myConnection_nc.connect("rtmp://compstat.chonbuk.ac.kr/netConnection?myInstance","munks"); 9) 앞에서 추가해준 두 개의 UI 컴포넌트는 각 컴포넌트의 connect() 메소드를 이용하여 NetConnection과 연결해주도록 한다. //새로 설정된 연결에 UI 컴포넌트 peopleList_mc.connect(myConnection_nc); connectionLight_mc.connect(myConnection_nc); 1)~9) 단계까지를 마친 후 저장한 다음 컴파일해보면 ConnectionLight 컴포넌트의 색깔이 연두색으로 되어 있는 것을 볼 수 있다. 그러나 PeopleList 컴포넌트에는 접속한 사용자의 이름을 볼 수 없다. 연결에 관련된 몇 가지 서버측 스크립트를 추가해 주기 전까지는 사용자 이름이 나타나지 않는 것은 당연하다. 이제 필요한 서버측 스크립트를 작성해 보자 10) 자주 사용하는 텍스트에디터나 플래시 MX에서 2)에서 정의한 main.asc 파일을 연다. 11) Application 객체의 onConnect 이벤트를 재정의한다. 플래시 플레이어가 연결을 요청할 때마다 Application.onConnect 이벤트가 발생한다.main.asc 파일의 load 명령 아래에 다음과 같이 이벤트를 정의해 주는 코드를 추가해준다. application.onConnect=function(newClient, newUserName){ .... } 12) 연결요청을 받아들인다. acceptConnection() 메소드는 연결을 요청한 플레이어에게 연결이 설정될 수 있다는 것을 통지한다. //사용자의 연결 요청을 받아들인다. application.acceptConnection(newClient); 13) UI 컴포넌트에 사용자 이름을 등록해준다. 커뮤니케이션 UI 컴포넌트가 사용하는 프레임워크의 userName 변수를 설정해 주는 것으로 다음과 같다.
//UI 컴포넌트에서 이용하게 되는 글로벌 username 변수 설정 gFrameworkFC.getClientGlobals(newClient).username=newUserName; 14) 애프리케이션 인스펙터의 라이브 로그 창을 통해 username 변수의 값을 trace해준 다음, 함수를 닫아준다. 서버측 액션스크립트의 trace 액션의 사용법은 플래시 MX에서 사용하는 방법과 같다. 서버측 trace 액션 결과는 커뮤니케이션 애플리케이션 인스펙터 응용 프로그램의 인스턴스에 나타나게 된다. trace("Hello There,"+ newUserName); 15) 배포 및 테스트: 배포 후 아래 주소에서 최종 결과를 확인해 보자. http://compstat.chonbuk.ac.kr/flashcom/netConnection/netConnection.html 3. 여러 사용자가 접속할 수 있도록 해주기 1) 예제1에서 작성했던 플래시 다큐먼트 파일을 multiConnect.fla 라는 이름으로 저장한다. 2) 새로운 커뮤니케이션 애플리케이션을 만든다. 애플리케이션 이름을 multiConnection이라 하고 예제 1에서 작성했던 main.asc 파일을 복사해 둔다. 3) 플래시 다규먼트 파일에서 다음과 같이 새로운 항목들을 추가한다. ① 텍스트 1개: 사용자 이름을 입력하도록 하는 문구가 들어간다. ② 입력 텍스트 필드 1개: login_txt라는 인스턴스 이름을 갖는다. ③ PushButton UI 컴포넌트 1개: 로그인 버튼으로 사용할 것이므로 "Login"이라는 레이블을 붙여준다. 속성 패널에서 Click Handler를 appLoginㅇ로 정해준다. appLogin 함수는 사용자 이름을 이용하여 서버와의 연결을 설정해 주는 함수로 뒤에서 작성하게 될 것이다. 4) 액션패널에서 appLogin 함수에 대한 정의를 한다. 전체적인 코드는 다음과 같다. //디버그 클래스 파일을 삽입 #include "NetDebug.as" //NetConnection 객체로부터 새로운 인스턴스를 생성 myConnection_nc = new NetConnection(); //서버로부터 전달되는 상태변화나 응답에 대한 이벤트 처리 myConnection_nc.onStatus = function(info) { trace("LEVEL: " +info.level+" CODE : "+info.code); }; //로그인 버튼을 클릭하면 애플리케이션이 서버에 연결된다. appLogin = function () { //서버와의 연결을 설정한다. myConnection_nc.connect("rtmp://compstat.chonbuk.ac.kr/multiConnection/myInstance", login_txt.text);
//새로 설정된 연결에 UI 컴포넌트 peopleList_mc.connect(myConnection_nc); } connectionLight_mc.connect(myConnection_nc); 5) 배포 및 테스트 ① 작성한 플래시 다큐먼트 파일을 저장한 후에 publish 해 보자. 사이트를 방문했을 때, ConnectionLight의 색이 주황색인 것을 확인할 수 있다. 이름을 입력하고 접속되었을 때 연두색으로 바뀌는 것을 볼 수 있다. 최종적인 결과는 아래 주소에서 확인할 수 있다. http://compstat.chonbuk.ac.kr/flashcom/netConnection/multiConnection.html 참고문헌: 1) 플래시에 날개를 다는 플래시 커뮤니케이션 서버 MX 2) http://livedocs.macromedia.com/flashcom/mx2004/ |