ServerSocket이라는 것이 Adobe AIR 2에서 생겼는데요.
뭐 특별히 제약사항같은 것은 없는 것 같군요. 그냥 서버소켓 만들어서 쓰면 됩니다.

우선 Adobe AIR 2 셋팅Flash Builder를 다운로드

서버소켓 생성하는 방법은
new ServerSocket();
serverSocket.bind(포트, "아이피");
serverSocket.listen();
하면 서버소켓이 생성됩니다.

Event.Connect를 이벤트 추가하면 상대방이 연결해왔을 때 호출이 됩니다.
보통 Java에서는 Thread를 통해서 하게 되는데, Actionscript3는 특성상 이벤트기반이기에... 그냥 여러개가 연결이 되도 이벤트가 발생하고, 그 발생한 이벤트객체에서 socket이 들어있어서 그걸 이용하면 되구요.

그 소켓에 다시 이벤트를 걸어주면 됩니다. 그 소켓은 client와 연결된 소켓! 기존 client소켓처럼 쓰면 됩니다^^
데이터는 read, write로 주고 받으면 되죠.

아래는 간단한 예제를....-_-
ServerSocketTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
applicationComplete="windowedapplication_applicationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.events.ServerSocketConnectEvent;
import flash.net.ServerSocket;
import flash.net.Socket;

import mx.events.FlexEvent;

private var socketPolicyUtil:SocketPolicyUtil;

private var serverSocket:ServerSocket;
private var listSocket:Vector.<Socket>;

protected function windowedapplication_applicationCompleteHandler(event:FlexEvent):void
{
socketPolicyUtil = new SocketPolicyUtil();

// 소켓리스트 초기화
listSocket = new Vector.<Socket>;

serverSocket = new ServerSocket();

serverSocket.addEventListener(Event.CONNECT, connectHandler);
serverSocket.addEventListener(Event.CLOSE, onClose);

serverSocket.bind(10000, "127.0.0.1");

serverSocket.listen();
trace("Listening on " + serverSocket.port);
}

private function connectHandler(event:ServerSocketConnectEvent):void
{
// The socket is provided by the event object
var socket:Socket = event.socket as Socket;
listSocket.push(socket);

socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
socket.addEventListener(Event.CLOSE, onClientClose);
socket.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

socket.writeUTFBytes("Connected.");
socket.flush();

trace("Sending connect message");
}

private function socketDataHandler(event:ProgressEvent):void
{
var socket:Socket = event.target as Socket;

// Read the message from the socket
var message:String = socket.readUTFBytes(socket.bytesAvailable);
trace("Received: " + message);

// 등록된 소켓에 모두 전송
for each (var s:Socket in listSocket)
{
s.writeUTFBytes(message);
s.flush();
}
}

private function onClientClose(event:Event):void
{
trace("Connection to client closed");
var socket:Socket = event.target as Socket;

// 등록된 소켓 삭제
var i:int = 0;
for each(var s:Socket in listSocket)
{
if (s == socket)
{
trace("같음");
listSocket.splice(i, 1);
return;
}
i++;
}
}

private function onIOError(event:IOErrorEvent):void
{
trace("IOError: " + event.text);
}

private function onClose(event:Event):void
{
trace("Server socket closed by OS.");
}
]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>

그냥 코드만 봐도 그리 어렵지 않아요.
서버소켓을 생성하고, 연결되는 소켓들은 list(Vector)에 추가해서 관리하게 되고, 끊어지면 list에서 빼버리고, 대화요청이 들어오면 받아서 모두에게 뿌려주면 돼요.

여기서 제가 만든 클래스가 하나 있는데요. SocketPolicyUtil클래스인데, 크로스 도메인을 위한 클래스입니다. 아래에서 설명을....-_-


크로스 도메인 설정 클래스
여기서 제가 보안샌드박스를 위한 클래스를 하나 만들었는데요. 크로스도메인에서 socket요청이 들어온 경우에는 crossdomain.xml을 넘겨줘야하는데, 그것도 air에서 다 할 수 있습니다.
타 도메인에서 요청하는 경우, 클라이언트 측에서는 843포트를 통해 crossdomain.xml을 요청하게 되어있습니다. 물론 클라이언트에서 843이 아닌 다른 포트로 요청을 원하면 바꿀 수 있지요.
 클라이언트 측에 이런 코드를 넣으면 되죠. 그러면 10001로 포트를 요청하죠.
Security.loadPolicyFile("xmlsocket://127.0.0.1:10001");

SocketPolicyUtil.as
package
{
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.events.ServerSocketConnectEvent;
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import flash.net.ServerSocket;
import flash.net.Socket;

public class SocketPolicyUtil
{
private var serverSocket:ServerSocket;

public function SocketPolicyUtil(port:int = 843)
{
serverSocket = new ServerSocket();
serverSocket.bind(port, "127.0.0.1");
serverSocket.listen();
serverSocket.addEventListener(Event.CONNECT, connectHandler);
serverSocket.addEventListener(Event.CLOSE, onClose);
}

private function connectHandler(event:ServerSocketConnectEvent):void
{
var socket:Socket = event.socket as Socket;

socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
socket.addEventListener(Event.CLOSE, onClientClose);
socket.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

trace("Policy Connected.");
}

private function socketDataHandler(event:ProgressEvent):void
{
var socket:Socket = event.target as Socket;

var message:String = socket.readUTFBytes(socket.bytesAvailable);
trace("Policy received : " + message);

var file:File = new File(File.applicationDirectory.nativePath + File.separator + "policy.xml");
var stream:FileStream = new FileStream();
stream.open(file, FileMode.READ);
var data:String = stream.readUTFBytes(stream.bytesAvailable);
trace("policy data = " + data);
socket.writeUTFBytes(data);
socket.writeByte(0);
socket.flush();
}

private function onClientClose(event:Event):void
{
trace("Policy close");
removeClientSocketEvent(event.target as Socket);
}

private function onIOError(event:IOErrorEvent):void
{
trace("ioerror = " + event.text);
}

private function onClose(event:Event):void
{
trace("Server socket closed by OS.");
}

private function removeClientSocketEvent(socket:Socket):void
{
socket.removeEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
socket.removeEventListener(Event.CLOSE, onClientClose);
socket.removeEventListener(IOErrorEvent.IO_ERROR, onIOError);
}
}
}

중요한 점은 policy.xml파일 날릴 때 마지막에 writeByte(0)으로 끝을 맺어줘야한다는...
이 클래스를 보면 policy.xml파일은 File.applicationDirectory에서 찾고 있으니 이걸 src폴더에다가 넣어버리고 패키지할 때 같이 묶어버리면 됩니다. 그리고 그냥 843포트로 열어서 crossdomain.xml파일을 그냥 전송해주기만 하면 되죠. *는 권장사항이 아니니...-_- 해당 도메인이랑 포트번호를 정확히 입력하는게...-_-
policy.xml
<?xml version='1.0' encoding='UTF-8'?>
<cross-domain-policy>
<allow-access-from domain='*' to-ports='*'/>
</cross-domain-policy>


아래는 클라이언트 코드
ClientSocketTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"
applicationComplete="application1_applicationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;

private var socket:Socket;

protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
//Security.loadPolicyFile("xmlsocket://127.0.0.1:10001");
}

protected function btnDisconnect_clickHandler(event:MouseEvent):void
{
if (inputId.text.length < 1)
{
Alert.show("아이디를 입력하세요");
return;
}
socket = new Socket("127.0.0.1", 10000);
socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
currentState = "connect";
labelId.text = inputId.text;
}

protected function btnConenct_clickHandler(event:MouseEvent):void
{
socket.close();
currentState = "disconnect";
}


private function socketDataHandler(event:ProgressEvent):void
{
var message:String = socket.readUTFBytes(socket.bytesAvailable);
trace("message = " + message);
taChat.text += message + "\n";
}

protected function inputChat_enterHandler(event:FlexEvent):void
{
if (inputChat.text.length < 1)
{
return;
}
socket.writeUTFBytes("[" + labelId.text + "] : " + inputChat.text);
socket.flush();
inputChat.text = "";
}

protected function btnChat_clickHandler(event:MouseEvent):void
{
if (inputChat.text.length < 1)
{
return;
}
socket.writeUTFBytes("[" + labelId.text + "] : " + inputChat.text);
socket.flush();
inputChat.text = "";
}
]]>
</fx:Script>
<s:states>
<s:State name="disconnect"/>
<s:State name="connect"/>
</s:states>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:TextInput id="inputId" x="231" y="10" includeIn="disconnect"/>
<s:Button id="btnConenctClose" x="367" y="11" label="접속" label.connect="종료"
click.connect="btnConenct_clickHandler(event)" click.disconnect="btnDisconnect_clickHandler(event)"/>
<s:Label id="labelId" includeIn="connect" x="211" y="10" width="159" height="21"/>

<s:TextArea id="taChat" includeIn="connect" x="10" y="49" width="621" height="402"/>
<s:TextInput id="inputChat" includeIn="connect" x="10" y="459" width="507" enter="inputChat_enterHandler(event)"/>
<s:Button id="btnChat" includeIn="connect" x="526" y="459" label="Button" click="btnChat_clickHandler(event)"/>
</s:Application>


아래 프로그램 설치하고 실행시켜놓은 뒤, 아래사이트를 접속해서 테스트할 수 있어요. 아이피는 127.0.0.1로 하드코딩되어있기 때문에 자기 pc에서 띄워놓고 자기가 접속한 클라이언트에서만 가능해요^^
클라이언트 접속 http://mudchobo.tomeii.com/swf/ClientSocketTest.swf


머드초보 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://mudchobo.tomeii.com/tt/rss/comment/454
  2. 지돌스타 2009/11/26 02:08  편집/삭제  댓글 작성  댓글 주소

    멋지고 좋은 글입니다. 잘보고 갑니다.

  3. 푸카 2009/11/29 07:37  편집/삭제  댓글 작성  댓글 주소

    빠른 좋은글 감사합니다^^. 잘보고 갑니다.

  4. z 2010/02/18 15:55  편집/삭제  댓글 작성  댓글 주소

    zzzzzzzzzzzzzzzzzzzzzz

[로그인][오픈아이디란?]
테스트의 중요성은 저번 스프링 강의시간에 충분히 느꼈습니다. 하지만, 역시 귀차니즘 때문에 잘 안만들게 되는 게 테스트인 듯 합니다. 하지만, 한번 만들어놓으면 이래저래 매우 유용한 것이 테스트죠.

다운로드는 여기서....-_-


Java에서는 Junit이라는 것이 있는데, 4버전에서는 Annotation(@)을 이용해서 쉽게 테스트를 만들곤 했는데요. Flex에서도 비슷한 기법을 이용합니다. 메타데이터를 위에다가 붙여서-_- 손쉽게 테스트를 만들 수 있습니다.
[Test]
public function testMyTest():void
{
}

와....Flash Builder를 보면 Java를 많이 따라한 것을 볼 수 있습니다. 예전엔 폴더생성으로만 만들 수 있었던 패키지가 직접적인 패키지 생성메뉴를 만들어서 Package Explorer에서 패키지형태로 볼 수 있습니다.
암튼, 자바와 닮아가는 듯-_-

1. 간단한 프로젝트 생성
Flex Project하나 생성.

2. 서비스 클래스 생성
덧셈 뺄셈 클래스하나 작성
com.mudchobo.test패키지의 Calc클래스 생성
Calc.as
package com.mudchobo.test
{
public class Calc
{
public function Calc()
{
}

public function addition(a:Number, b:Number):Number
{
return a + b;
}

public function subtraction(a:Number, b:Number):Number
{
return a - b;
}
}
}


3. 테스트 생성
New -> Test Case Class -> New FlexUnit 4 test선택. Name은 CalcTest로하고 Finish.
CalcTest.as
package flexUnitTests
{
import com.mudchobo.test.Calc;

import flexunit.framework.Assert;

public class CalcTest
{
private var calc:Calc;

public function CalcTest()
{
}

[Before]
public function before():void
{
calc = new Calc();
}

[Test]
public function testAddition():void
{
var result:Number = calc.addition(50, 50);
Assert.assertEquals(result, 100);
}

[Test]
public function testSubtraction():void
{
var result:Number = calc.subtraction(50, 50);
Assert.assertEquals(result, 0);
}
}
}

여기까지 작성하면 FlexUnitCompiler.mxml이라는 파일이 자동으로 생겼을겁니다. 이건 건드리지 않습니다. 검색해보니 이전방식으로 core생성해서 UIListener를 넣어서 하려고했는데, 이거 그렇게 하는게 아니더군요-_-
심지어 UIListener클래스는 없습니다-_-

4. 테스트 실행
테스트 실행은 package explorer에서 테스트클래스의 오른쪽 마우스버튼을 누르면 "Execute FlexUnit Tests"라는 메뉴가 있습니다. 그걸 선택하면 테스트가 됩니다. FlexUnitApplication.mxml파일도 같이 생기는군요.
테스트단축키는 Alt + Shift + E, F입니다....-_- 해당 편집파일에서 누르면 됩니다.
사용자 삽입 이미지
테스트 결과는 Junit처럼 이렇게 보여줍니다.
사용자 삽입 이미지
Junit이랑 똑같네.

5. 테스트 Suite 생성
이건 테스트를 다 모아서 실행하는 건데, 통합테스트를 할 때 사용하는 듯-_-
New -> Test Suite Class -> New FlesxxUnit4 test 하면 include할 테스트를 패키지에서 선택할 수 있습니다. 선택 후 Finish.
SuiteTest.as
package flexUnitTests
{
import flexUnitTests.CalcSecondTest;
import flexUnitTests.CalcTest;

[Suite]
[RunWith("org.flexunit.runners.Suite")]
public class SuiteTest
{

public var test1:flexUnitTests.CalcSecondTest;
public var test2:flexUnitTests.CalcTest;
}
}

그냥 저렇게 선언해두고, 오른쪽버튼 눌러서 "Execute FlexUnit Tests" or 알트 + 쉬프트 + E, F하면 통합테스트를 합니다.

6. 그외의 기능
저도 더 써봐야 알 것 같은데, Flex는 이벤트기반이다보니 Async와 UI구조가 많은데요. Async구조도 손쉽게 테스트를 할 수 있습니다.
[Test(async,ui)]

이런식으로 하면 될 듯 한데, 안해봐서 잘 모르겠네요-_-

참고자료
http://www.insideria.com/2009/05/flashbuilder4-will-support-fle.html
http://balajisridhar.wordpress.com/2009/10/05/flexunit-integration-in-flash-builders-new-awatar-in-beta2/
머드초보 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]
다운로드는 여기서....-_- adobe.com 사이트에 가입하셔야 합니다.

BlazeDS버전이 4.X대여야 잘 됩니다. 3.X대면 안되더군요.
그리고 BlazeDS버전이 4.x의 Beta1버전이 있는데, 이걸로 하면 요런 에러가 뜹니다.
ERROR : XML parse error : Error on line 1 of document : cvc-elt.1: Cannot find the declaration of element 'model'. Nested exception: cvc-elt.1: Cannot find the declaration of element 'model'.>$2
그래서 전 Night Build중에 4.0.0.11030버전을 사용해서 하니 되더군요.
다운로드는 여기서 http://opensource.adobe.com/wiki/display/blazeds/download+blazeds+trunk

제 환경은 Eclipse 3.5, Flash Builder 4 Beta 2, JDK 1.6.0 U 16입니다.
플러그인으로 못깐 이유가 기존의 Flex Builder 3가 플러그인으로 깔려있는데, 왠지 꼬일 것 같아서(새가슴 ㄷㄷ)-_-

우선 blazeds.war파일을 Eclipse에서 import.
web.xml을 보면 이상한 Servlet이 하나 더 생겼는데요. RDSDispatchServlet.
이거 풀고, 인증부분을 false로 바꾸면 됩니다. 자체적으로 할 수 있는 인증이 생긴 것 같은데, 이건 더 해봐야 알겠네요.
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>

<display-name>BlazeDS</display-name>
<description>BlazeDS Application</description>

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

<!-- MessageBroker Servlet -->
<servlet>
<servlet-name>MessageBrokerServlet</servlet-name>
<display-name>MessageBrokerServlet</display-name>
<servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
<init-param>
<param-name>services.configuration.file</param-name>
<param-value>/WEB-INF/flex/services-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<!-- begin rds -->
<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>

<servlet-mapping id="RDS_DISPATCH_MAPPING">
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>
<!-- end rds -->

<servlet-mapping>
<servlet-name>MessageBrokerServlet</servlet-name>
<url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
</welcome-file-list>
</web-app>

테스트 클래스를 하나 만듭니다.
Test.java
package com.mudchobo.test;

public class TestService {

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

remoting-config.xml에 destination을 추가.
remoting-config.xml
<destination id="test">
<properties>
<source>com.mudchobo.test.TestService</source>
<scope>application</scope>
</properties>
<adapter ref="java-object" />
</destination>

서버를 이제 작동을 시켜서 띄워둡니다.

이제 Flash Builder로...

프로젝트 생성 -> 타입은 Web, Server type은 J2EE(BlazeDS)
Server location은 Root Folder는 해당 blazeds임포트한 폴더에 있는 WebContent.
Root URL은 http://localhost:8080/blazeds
Context root는 blazeds
Validate Configuration하면 왜 안되지...-_- 암튼 그냥 Finish를 누릅니다-_-

맨 하단에 Data/Services 탭이 있는데, 거기서 Connect to Data/Service.. 클릭.
BlazeDS선택, destionation으로 설정한 test가 하나 보일꺼임. 선택 Finish.
그럼 해당 Destination에 있는 함수인 sayHello가 보이는군요. 사용해봅시다.
여러가지 기능이 있는데요. 저도 잘 몰라서 많이 안해봤는데, 우선 기존에 삽질을 덜어주기 위한 많은 기능을 넣은 것 같습니다. 테스트도 할 수 있고, 자동으로 remoteObject코드도 만들어주고, 뭐 그런 것 같습니다.
Form도 만들어주네요-_-

Test Opeartion을 했더니 파라메터를 던지니 Response value로 나오네요.
사용자 삽입 이미지
버튼 클릭 시 데이터를 요청하는 걸 만들기 위해 Design모드로 변경.
Button과 TextInput, 결과 Label을 하나 추가.
button은 id를 btn, TextInput은 input. button에 오른쪽버튼 누르면 generate Service Call클릭.
그러면 자동으로 click핸들러 함수 만들어지고, sayHello함수 파라메터만 넣으면 되는데, 여기에는 input.text를 넣으면 끝.
Label에는 text에다가 sayHelloResult.lastResult를 바인딩.

DataTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:test="services.test.*">
<fx:Script>
<![CDATA[
import mx.controls.Alert;

protected function btn_clickHandler(event:MouseEvent):void
{
sayHelloResult.token = test.sayHello(input.text);
}
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="sayHelloResult"/>
<test:Test id="test" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button x="248" y="245" label="Button" click="btn_clickHandler(event)" id="btn"/>
<s:TextInput x="223" y="215" id="input"/>
<s:Label x="260" y="274" text="{sayHelloResult.lastResult}"/>

</s:Application>

이런 코드가 됨. 개판임-_-
사용자 삽입 이미지

PS. 자동으로 다 해줘서 좋긴 한데...왠지 익숙하지 않은 코드가.....

참고자료
http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/
머드초보 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]
« Prev : 1 : 2 : 3 : 4 : Next »