Eirene's Blog ~ AIR와 웹 애플리케이션간 로컬 커넥션 통신하기 ~

문제점 : 웹 애플리케이션에서 AIR 애플리케이션의 메소드를 호출하고 싶다.

해결책 : 로컬 커넥션을 사용해 두 애플리케이션간 통신하도록 하면 된다.

사실 누군가가 처음 내게 이 질문을 했을 때

난 별 생각없이, "물론, 로컬커넥션을 사용하면 웹 애플리케이션이랑 AIR 애플리케이션이

서로 통신할 수 있지"라고 대답했다.

그런데 가만 생각해 보니, 웹 애플리케이션은 플래시 플레이어에서 구동되고

AIR 애플리케이션은 AIR 런타임에서 구동되는데, 둘이 통신할 수 있다는 게

말이 안되는 거 같았다. 그래서 나는 대답을 보류했고, 한참 동안 관련 레퍼런스를

찾아서 결국 로컬 커넥션을 통한 통신이 가능하다는 것을 알아 냈다.

일단 웹 애플리케이션에서 AIR 애플리케이션에 접근하려면 다음 문법을 따라야 한다.

(이 때 lc는 LocalConneciton 인스턴스라고 가정한다)

lc.send("app#"+AIR 애플리케이션 ID+"."+AIR 애플리케이션 제작자(publisher) ID+":"+AIR 애플리케이션 로컬 커넥션 네임,"메소드 명", 파라미터)

얼핏 봐도 복잡해 보인다.

한편 반대로 AIR 애플리케이션에서 웹 애플리케이션의 메소드를 호출하려면

다음과 같이 해야 한다.

lc.send(웹 애플리케이션 도메인+":"+웹 애플리케이션 로컬 커넥션 네임,"메소드 명", 파라미터)

이 때 웹 애플리케이션 도메인은 로컬에 있을 때는 localhost,

웹 도메인에 있을 때는 도메인명(예를 들어,www.joshy21.com)이 된다.

사실 웹 애플리케이션과 AIR 애플리케이션 사이의 로컬 커넥션 통신을 통한 연동은

활용 범위가 엄청나게 넓다. 예를 들어, ActionScript 2와 AIR와의 통신도 가능하고

간단한 로컬 커넥션 핼퍼 클래스를 작성해 연동 부분만 처리하면,

웹 애플리케이션에서 launchApplication() 메소드를 통해 AIR 애플리케이션이 (실행중이 아니면) 실행시키고

서로 통신하면서 온갖 "쇼"를 다 할 수도 있을 것이다.

그래서 나는 다음과 같은 LocalConnection Info 클래스와 Manager 클래스를 만들어

AIR 애플리케이션과 웹 애플리케이션 사이의 연동이 정말 쉬워질 수 있도록 했다.

먼저 LCInfo 클래스의 소스는 다음과 같다.

package com.joshy21.localconnection
{
	import mx.core.Application;
	import mx.core.Singleton;
	
	public class LCInfo
	{
		public function LCInfo()
		{
			
		}
		private var _domain:String ="localhost";
		private var _air_connection:String ="connection";
		private var _web_connection:String ="web_connection";
		private var _isAirApp:Boolean = false;
		private var _appId:String;
		private var _publisherId:String;
		
		public function set domain(value:String):void {
			_domain = value;
		}
		public function get domain():String {
			return _domain;
		}	
		public function set air_connection(value:String):void {
			_air_connection = value;
		}	
		public function get air_connection():String {
			return _air_connection;
		}
		public function set web_connection(value:String):void {
			_web_connection = value;
			
		}
		public function get web_connection():String {
			return _web_connection;
		}
		public function set isAirApp(value:Boolean ):void {
			_isAirApp = value;
		}
		public function get isAirApp():Boolean {
			return _isAirApp;
		}
		public function set appId(value:String):void {
			_appId = value;
		}
		public function get appId():String {
			return _appId;
		}
		public function set publisherId(value:String):void {
			_publisherId = value;
		}
		public function get publisherId():String {
			return _publisherId;
		}
	}
}

이 클래스는 domain, air_connection, web_connection, isAirApp, appId, publisherId

속성을 가지고 있는데, 각각의 속성은 다음과 같다.

domain - 웹 애플리케이션이 있는 도메인 위치. 기본값은 localhost

air_connection - AIR 애플리케이션의 로컬 커넥션 네임

web_connection - 웹 애플리케이션의 로컬 커넥션 네임

isAirAipp - 해당 애플리케이션이 웹 애플리케이션인지 AIR 애플리케이션인지 여부

appId - (웹 애플리케이션인 경우에만) AIR 애플리케이션의 애플리케이션 ID

publisherId - (웹 애플리케이션인 경우에만) AIR 애플리케이션의 제작자 ID

이어서 이 클래스를 활용하는 메니저 클래스의 소스를 살펴보면 다음과 같다.

package com.joshy21.localconnection
{
	import flash.events.EventDispatcher;
	import flash.events.StatusEvent;
	import flash.net.LocalConnection;
	
	public class LCManager extends EventDispatcher
	{
		public function LCManager(singleton:Singleton)
		{
			
		}
		private var sender:LocalConnection;
		
		private var receiver:LocalConnection;
		
		private var lcInfo:LCInfo = new LCInfo();
		
		private static var instance:LCManager;
		
		public static function getInstance():LCManager {
			if (!instance) instance = new LCManager(new Singleton());
			return instance;
		}
		public function init(client:Object=null,domain:String="localhost",
                            webCon:String=null,airCon:String=null,isAirApp:Boolean=false):void {
			instantiate();
			if (webCon) lcInfo.web_connection = webCon;
			if (airCon) lcInfo.air_connection = airCon;
			if (domain != "localhost") lcInfo.domain = domain;
			lcInfo.isAirApp = isAirApp;
			var connName:String = isAirApp?lcInfo.air_connection:lcInfo.web_connection;
			try {
				receiver.client = client;
				receiver.allowDomain("*");
				receiver.connect(connName);
			} catch (e:Error) {
				
			}
		}
		private function instantiate():void {
			receiver = new LocalConnection();
			sender = new LocalConnection();
			sender.addEventListener(StatusEvent.STATUS,statusHandler,false,0,true);
		}
		private function getReceiverConName():String {
			var receiverConName:String="";
			if (lcInfo.isAirApp) {
				receiverConName = lcInfo.domain+":"+lcInfo.web_connection;
			} else {
				receiverConName = "app#"+lcInfo.appId+"."+lcInfo.publisherId+":"+lcInfo.air_connection;
			}
			return receiverConName;
		}
		public function send(method:String,... args):void {
			var params:Array = args;
			params.unshift(getReceiverConName(),method);
			sender.send.apply({},params);
		}
		private function statusHandler(event:StatusEvent):void {
			dispatchEvent(event);
		}
		public function set appId(value:String):void {
			lcInfo.appId = value;
		}
		public function set publisherId(value:String):void {
			lcInfo.publisherId = value;
		}
	}
}
class Singleton {
	public function Singleton() {
		
	}
}

이 클래스는 싱글턴 패턴을 따르고 있고 LCInfo 클래스 인스턴스를

속성으로 가지고 있다 (has-a 관계).

하는 일은 애플리케이션이 웹 애플리케이션인지 AIR 애플리케이션인지

init() 메소드를 통해 알게 된 후

자동으로 상대편 애플리케이션에 로컬 커넥션의 send() 메소드를 통해

접근할 커넥션 네임을 생성해 주고

LCManager.getInstance().send() 메소드를 통해

굳이 로컬 커넥션 객체에 접근해 일일히 커넥션 네임을 할당하지

않아도 상대편 애플리케이션과 통신할 수 있도록 해 주는 기능이다.

그럼 이어서 예제를 보도록 하자.

AIR 애플리케이션 예제

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" layout="vertical" creationComplete="init();">
	<mx:Script>
		<![CDATA[
			import com.joshy21.localconnection.LCManager;
			import mx.controls.Alert;
			
			private var timer:Timer;
			private function init():void {
				LCManager.getInstance().init(this,"localhost","web_connection","connection",true);
				LCManager.getInstance().addEventListener(StatusEvent.STATUS,statusHandler,false,0,true);
				startSendingID();
			}
			public function startSendingID():void {
				timer = new Timer(500);
				timer.addEventListener(TimerEvent.TIMER,timerHandler,false,0,true);
				timer.start();
			}
			
			private function timerHandler(event:TimerEvent):void {
				sendID();
			}
			public function stopTimer():void {
				timer.stop();
				timer.removeEventListener(TimerEvent.TIMER,timerHandler);
			}
			public function showAlert(value:String):void {
				mx.controls.Alert.show(value);
			}
			
			private function statusHandler(event:StatusEvent):void {
				txt.text +=event.level + "\n";
			}
			private function sendID():void {
				LCManager.getInstance().send("getID",this.applicationID,this.nativeApplication.publisherID);
			}
		]]>
	</mx:Script>
	<mx:HTML id="html" location="LC_Web.html"  width="100%" height="100%" />
	<mx:TextArea id="txt" width="100%" height="100" />
</mx:WindowedApplication>

웹 애플리케이션 예제

이 두 예제에서 하는 일은 다음과 같다.

AIR 애플리케이션에서는 LCManager 클래스를 통해 로컬 커넥션을

생성하고 웹 애플리케이션쪽으로 애플리케이션 ID와 publisher ID를

타이머를 통해 전송해 준다.

웹 애플리케이션에서는 역시 LCManager 클래스를 통해 로컬 커넥션을

생성하고 AIR 애플리케이션에서 호출하는 getID 메소드를 통해

AIR 애플리케이션의 ID와 publisher ID를 동적으로 전달받는다.

이렇게 전달받은 애플리케이션 ID와 publisher ID를 바탕으로

웹 애플리케이션은 AIR 애플리케이션의 stopTimer() 메소드를

LCManager 클래스를 통해 호출하고

AIR 애플리케이션의 타이머는 멈추게 된다. 또 test 버튼을 클릭하면 AIR 애플리케이션의 showAlert 메소드에 파라미터를 넘겨서 AIR 애플리케이션의 메소드를 파라미터와 함께 호출하도록 한다.

웹 애플리케이션 메소드

AIR 애플리케이션 메소드

액션스크립트 원리 : LocalConnection 객체를 사용하면 서로 다른 도메인의 두 swf간 통신은 물론 AIR 애플리케이션과 웹 애플리케이션, AIR 애플리케이션과 또 다른 AIR 애플리케이션 간의 통신이 가능하다. 하지만 로컬 커넥션은 하나의 커넥션 네임당 하나의 애플리케이션만 허용되는 점, 호출할 메소드가 public으로 선언되어야 한다는 점 등 몇 가지 제약이 따르니 사용시에는 항상 주의가 필요하다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.