머드초보의 블로그

많은 분들(?)이 제 블로그에 오셔서 질문을 해주셔서 간단한 예제를 통한 설명을....-_- 나중에 저도 참고하려고 기록용-_-

일단, Flash에서 CrossDomain에 걸리는 데이터를 요청할 때 Plicy File인 crossdomain.xml 파일을 root에 정의해둬서 해당 도메인이면 데이터를 허용하게 할 수 있습니다.

소켓도 마찬가지입니다. 해당 도메인에서 해당 포트로 들어온 요청은 받겠다는 정책파일을 작성할 수 있습니다.
최초 소켓이 정책파일을 요청하게 되는 포트는 843포트입니다. 만약 이포트가 열러있지 않다면 현재 연결하려고 하는 포트로 <policy-file-request/>를 날려서 정책파일을 요청하게 됩니다.
그러면 843이든, 해당포트든 간에 정책파일만 날려주면 됩니다.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="*" to-ports="10000-10001" />
</cross-domain-policy>

소켓에 대한 정책파일을 정의한 것인데, domain에는 허용할 도메인을 쓰고, to-ports에는 허용할 포트를 쓰면 됩니다.
이걸 날려주면 이제 연결할 포트로부터 데이터를 주고 받을 수 있습니다.

초간단 에코예제!
일단 서버는 자바로...(그나마 자신있는 언어라서ㅠㅠ)

일단 PlicyFileServer를 하나 돌릴 쓰레드를 만듭니다.
PlicyFileServer.java

import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.ServerSocket;
import java.net.Socket;


public class PolicyFileServer extends Thread{
    
    private ServerSocket serverSocket;
    private String policyFile = "<?xml version='1.0'?>" +
                                "<!DOCTYPE cross-domain-policy SYSTEM '/xml/dtds/cross-domain-policy.dtd'>" +
                                "<cross-domain-policy>" +
                                "<allow-access-from domain='*' to-ports='10000' />" +
                                "</cross-domain-policy>";
    
    @Override
    public void run() {
        try {
            serverSocket = new ServerSocket(843);
            while (true) {
                final Socket socket = serverSocket.accept();
                new Runnable() {
                    @Override
                    public void run() {
                        try {
                            socket.setSoTimeout(10000);
                            InputStream in = socket.getInputStream();
                            byte[] buffer = new byte[23];
                            if ( in.read(buffer) != -1 && (new String(buffer)).startsWith("<policy-file-request/>") ) {
                                OutputStream out = socket.getOutputStream();
                                out.write(policyFile.getBytes());
                                out.write(0x00);
                                out.flush();
                                out.close();
                            }
                        } catch (IOException e) {
                            e.printStackTrace();
                        } finally {
                            try { socket.close();} catch(Exception ex){}
                        }
                    }
                }.run();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

내용을 보면 그냥 서버소켓하나 만들어서 요청이 들어오면 그 소켓으로 policy file을 전송하는 형태입니다. 파일은 만들기 귀찮아서-_- 그냥 String으로 선언-_- 보면 모든도메인에 한해서 10000포트를 열어주는 겁니다.

이제 메인서버!
SocketTest.java

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;


public class SocketTest {

    private ServerSocket server;
    
    public SocketTest() {
        try{
            server = new ServerSocket(10000);
            System.out.println("접속을 기다립니다.");
            
            while (true){
                final Socket socket = server.accept();
                Thread t = new Thread(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            PrintWriter pw = new PrintWriter(new OutputStreamWriter(socket.getOutputStream(), "UTF-8"));
                            BufferedReader br = new BufferedReader(new InputStreamReader(socket.getInputStream(), "UTF-8"));
                            String line = null;
                            while ((line = br.readLine()) != null) {
                                System.out.println("수신데이터 : " + line);
                                pw.println("Hello! " + line);
                                pw.flush();
                            }
                        } catch (Exception e) {
                            try { if(socket != null) socket.close(); } catch (Exception ex) {}
                        }
                    }
                });
                t.start();
                
            }
        } catch(Exception e){
            System.out.println("Error!");
        }
    }
    
    public static void main(String[] args) {
        new PolicyFileServer().start();
        new SocketTest();
    }
}

데이터를 받으면 다시 Hello!를 붙여서 다시 전송해주는 echo서버를 하나 만듭니다.
그리고 main함수에서는 PolicyFileServer쓰레드를 하나 시작하고, EchoServer를 돌립니다.

이제 Flex!

<?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/mx" minWidth="955" minHeight="600"
               applicationComplete="application1_applicationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            
            import spark.components.mediaClasses.VolumeBar;
            
            private var socket:Socket;
            
            protected function application1_applicationCompleteHandler(event:FlexEvent):void
            {
                socket = new Socket("127.0.0.1", 10000);
                socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
                socket.addEventListener(Event.CONNECT, connectHandler);
            }

            protected function btnSend_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                socket.writeUTFBytes(inputMessage.text + "\n");
                socket.flush();
            }
            
            private function connectHandler(event:Event):void
            {
                trace("접속완료!");    
                hbox.visible = true;
            }
            
            private function socketDataHandler(event:ProgressEvent):void
            {
                var message:String = socket.readUTFBytes(socket.bytesAvailable);
                trace("수신메세지 : " + message);
                textResult.text = message;
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    
    <mx:HBox id="hbox" visible="false" width="100%" horizontalAlign="center">
        <s:TextInput id="inputMessage" />
        <s:Button id="btnSend" label="송신하기" click="btnSend_clickHandler(event)"/>
    </mx:HBox>
    
    <mx:Text id="textResult" width="100%" textAlign="center"/>
</s:Application>

Socket만들어서 10000포트로 연결합니다. 그러면 도메인이 다르게 되면 swf가 843포트로 "<policy-file-request/>"를 날려서 정책파일을 달라고하는데, 서버에서 만들어놓은 PolicyFileServer가 정책파일을 내려주면 받게되면 10000포트로 다시 연결해 연결을 시작하게 됩니다.

몬가 별거 없는데 장황하게 설명해놨네.

그리고, 이런식으로 PolicyFileServer를 서버어플에 통합하면 안되겠죠? 나중에 서버어플이 늘어난다면 계속 새로 추가해야하니, PolicyfileServer를 따로 만들어서 띄워놓으면 되겠죠?^^
일단, 여러 폴리시서버 예제는 구글링하면 많이 나와요~
여기 아래주소는 Java, PHP, C#, VB.NET, Python 등등 예제가 있어요.
http://code.google.com/p/assql/wiki/SecurityInformation
이건 c로 만든거!
http://panzergruppe.hp.infoseek.co.jp/fspfd.html

저는 어렸을 적 패밀리(패미콤), 알라딘보이(메가드라이브), 슈퍼컴보이(슈퍼패미콤), 게임보이를 하면서 자란 세대라서 이런 에뮬레이터가 돌아간다는 것에 참 좋네요~ 그래도 역시 터치로 조작하는 건 힘들긴 하네요. wii컨트롤러가 있으면 그래도 할만하긴 합니다^^

총 5가지가 있네요.
PS1, 메가드라이브, 슈퍼패미콤, 패미콤, 게임보이

1.psx4droid
플레이스테이션1 에뮬레이터인데요. 나온지 얼마 안된 것 같은데요. 이걸로 철권은 돌아가지 않고, 메탈슬러그X는 케릭터선택하면 진행이 안되고, 그나마 스트리트파이터 ex+a가 구동이 되는데, 이건뭐 슬로우 모션이네요. 갤럭시S처럼 하드웨어가 좋은 사양이라면 제대로 구동될 지도 모르겠네요^^
일단 아직은 초기버전입니다. 그래서 그런지 느리고, 사운드도 불안정하며 돌아가는 게임이 몇개 없는 듯 합니다.
구동시에 문제가 많은 SCPH1001.BIN 등의 바이오스가 필요하구요. frameskip정도만 있었어도 좀 할만 했을 것 같습니다.
WII리모콘으로 조작이 가능합니다.
아래는 구동영상입니다. 제가....직접 찍어봤습니다 ㅠㅠ 조작은 Wii리모콘으로 하는겁니다^^ Wii리모콘도 잘 지원하네요~^^


2. Gensoid
메가드라이브(알라딘보이) 에뮬이네요. 어렸을 적에 삼성에서 SEGA라이센스를 따와서 출시한 알라딘보이일꺼에요. 잼있는 게임 많았는데^^
완벽하게 돌아갑니다. WII리모콘도 잘 되고, 사운드도 잘나오고.

3. SNesoid
슈퍼컴보이! 현대에서 출시했나요? 암튼, 게임수도 엄청 많았고, 동킹콩이 유명했죠!
완벽하게 돌아갑니다. 물론 WII리모콘도 잘되고, 사운드도 잘나오고.

4.Nesoid
패밀리라는 게임기로 유명했던 게임기. 변종도 참 많아서-_- 이건 열혈시리즈가 최고였죠!
위와 동일합니다. 다 잘되고 WII리모콘도 잘되고^^ 사운드도 잘나오고

5. GameBoid
현재 NDS의 그 전 버전이라고 할 수 있는 Game Boy Adcanced 에뮬이죠!
앵간해선 잘 돌아갑니다만, 가끔 안돌아가는 롬파일이 있습니다. 그리고, 사운드가 지지직거리면서 제대로 안나오는 파일도 있구요. 가장 최근에 나온 게임기라서 그런지 아직 불안정한 듯^^
그래도 많은 분들이 롬을 해킹하셔서 한글판 롬파일도 많이 돌아다니더라구요-_-

저와 같은 세대라면 에뮬레이터와 Wii리모콘 하나 사서 들고 다닐만 합니다-_- 추억을 생각하면 예전에 잼나게 했던 게임을 다시 깨보는 것은 어떨지....-_-

미투데이도 얼른 OAuth기반으로 바꿨으면 좋겠네요.
인증 방식은 비슷하긴 하지만, access_token요청하는 부분 같은 게 없어서 callbackurl로 사용자api키를 받게 되는군요. 보안상 안좋을 것 같은...-_-

그리고, 언제까지 스프링노트에 표시를 할 것인지가 의문입니다.
트위터가 OpenAPI를 참 잘해놔서 그런지 굉장히 많은 서비스들이 튀어나오고 있습니다. 이점은 미투데이에서도 얼른 OpenAPI에 힘을 쓰시는 게...^^

api페이지입니다.
http://codian.springnote.com/pages/86001

요청절차는 이러합니다. 물론 여기가면 더 자세히 나와있습니다ㅠㅠ(웹인증기반 기준!)
http://codian.springnote.com/pages/1645274
1) api키를 발급받습니다.
2) 해당 api키로 인증 토큰을 얻습니다.
3) 그 토큰으로 인증url로 이동시킵니다.
4)사용자가 로그인 하면 지정한 callback페이지로 사용자키를 던져줍니다.
5) 사용자키로 글을 쓰면 됩니다.


1. 일단 API키 발급
http://me2day.net/me2/app/key/list
여기서 새 애플리케이션 키 발급한다음에 등록합니다. 그리고 등록된 키에서 설정을 누르면 웹기반인지 데스크탑기반인지 선택하는데, 웹기반이면 callback주소를 입력받습니다. 이 callback주소는 인증 후에 사용자키를 받는 url이 됩니다.

2. 해당api키로 인증토큰 얻기
config.php파일

<?php 
define('A_KEY', '발급받은 api키');
?>

index.php

<?php
    require_once("config.php");
    $result = json_decode(file_get_contents("http://me2day.net/api/get_auth_url.json?akey=" . A_KEY));
    print_r($result);
?>
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR">
        <title>미투데이 인증 후 글쓰기</title>
      </head>
    <body>
        <br />
        <a href="<?php echo $result->url ?>">미투데이 인증하기</a>
      </body>
</html>

php에서 http://me2day.net/api/get_auth_url.json를 요청해서 token을 받습니다. 그러면 인증url이 같이 떨어집니다. 그 url로 이동하게 되면 아래와같이 로그인하는 화면이 나옵니다.
여기서 로그인하고 인증하면 1번에서 지정한 callbackurl로 이동하게 됩니다.

3. callback url에서 데이터받고 글쓰기 폼생성
callback.php

<?php
    require_once("config.php");
    
    $token = $_GET["token"];
    $user_id = $_GET["user_id"];
    $user_key = $_GET["user_key"];
    $result = $_GET["result"];
    
    // 세션저장
    session_start();
    $_SESSION["user_id"] = $user_id;
    $_SESSION["user_key"] = $user_key;
    
    // 인증이 확실한지 확인
    $authKey = "12345678" . md5("12345678" . $user_key);
    $result = file_get_contents("http://me2day.net/api/noop?uid={$user_id}&ukey={$authKey}&akey=" . A_KEY);
?>
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR">
        <title>미투데이 인증 콜백</title>
        <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btnPost").click(function(){
                    var body = $("#inputPost").val();
                    if (body.length < 1){
                        alert("글입력해요!");
                        return;
                    }
                    $.getJSON("post.php?callback=?", {body:body}, function(data){
                        alert("글쓰기 성공 = " + data.result);
                    });
                });
            });
        </script>
      </head>
    <body>
        <?php echo $result ?><br/>
        <input type="text" id="inputPost" name="inputPost" /><br />
        <input type="button" id="btnPost" name="btnPost" value="글쓰기"/>
      </body>
</html>

보면 user_id랑 user_key를 세션에 저장합니다. 만약 자신의 사이트에서 미투데이인증과 통합을 원한다면 api키를 데이터베이스같은 영속적인 것에 저장하고 쓰는 것이 좋습니다. 그럼 따로 인증같은 것을 하지 않아도, 자신의 사이트만 인증을 해도 글을 쓸 수 있으니까요^^
나중에 api_key값이 바뀐다고 해도, noopapi를 호출해서 인증이 정확한지 확인 후 정확하지 않으면 다시 인증받으면 되니까요^^

user_id랑 user_key만 있으면 이제 글을 쓸 수 있으므로, http://me2day.net/api/noop를 호출해서 유효한지 확인을 합니다. 이제부터 인증받은 api들은 uid와 ukey와 akey를 같이 파라메터에 붙여서 호출해야합니다.
uid는 사용자 아이디, ukey는 임의8자리숫자 + md5(임의8자리숫자 + 사용자키), akey는 api키를 넣으면 됨!

4. 글쓰기
post.php

<?php 
    require_once("config.php");
    
    $body = $_GET["body"];
    $callback = $_GET["callback"];
    
    session_start();
    $user_id = $_SESSION["user_id"];
    $user_key = $_SESSION["user_key"];
    
    
    // 인증이 확실한지 확인
    $authKey = "12345678" . md5("12345678" . $user_key);
    $result = file_get_contents("http://me2day.net/api/create_post/{$user_id}.json?uid={$user_id}&ukey={$authKey}&akey=" . A_KEY . "&post[body]={$body}");
    
    header("Content-type: application/json");
    echo "{$callback}({'result':'{$result}'})";
?>

그냥 api문서대로 호출하면 됨!

테스트 url~
mudchobo.tomeii.com/test/me2daytest/

나중에 php용 라이브러리를 만들어봐야겠다...

전에 쓰던 마우스가 자꾸 원클릭만 해도 더블클릭이 되어서-_- 갑자기 지르게 되었습니다^^
마우스의 모양은 정말 맘에 드는데, 아직 적응은 안된 것 같습니다 ㅠㅠ
그리고 마우스는 확실히 로지텍이 좋습니다. 마소마우스는 두번째인데, 첫번째 마우스도 그리 안좋은 추억으로 끝이 났었는데... 로지텍의 VX Nano를 쓰고는 정말 좋다고 생각했거든요. 하지만, 이번에 또 마소것을 산 이유는 그냥 이 디자인이 맘에 들었어요-_-

암튼 박스샷입니다

아....색상은 평범한 것이 싫어서 화이트, 블랙 다 제끼고 퍼플을 샀습니다-_- 보라색이 왠지 끌려서...
뭐 나쁘지 않네요~ 색상이 너무 여러개 존재해서 고민을 참 많이 했습니다ㅠㅠ

내용물입니다.
파우치도 맘에듬! 주머니 끝부분이 자석으로 되어있어서 맘에 들어요~ 노트북 들고 나가게 되면 지퍼방식인 경우 자주 열고 닫아야하는데, 이건 그럴 필요가 없으니까요^^
그리고, 건전지도 들어있구요~ 메뉴얼 같은게 있는데, 메뉴얼 없이도 잘 쓸 수 있어요~^^

리시버입니다

로지텍꺼보단 살짝 큰데, 그래도 참 작습니다^^ 4년전에 산 무선마우스는 리시버가 저거의 4배만했던 것 같은데, 기술력이 참 좋아지고 있습니다^^

마우스~

처음에 마우스를 연결하면 포인터가 엄청 빠릅니다. 그래서 마우스옵션에서 느리게 설정해주셔야 할 겁니다.
그리고, 마우스의 본체에 가운데 부분이 없어서 그런지 왠지 정확한 포인팅이 아직 잘 안됩니다.
그리고 로지텍마우스는 클릭 시 전혀 힘이 들어가지 않는데, 이건 왜인지 모르게 클릭 시 힘을 더 쓰게 되네요. 휠도 뭐 그냥 그렇고.

ps. 결론이 뭐냐면 좋은 마우스 사고 싶으면 로지텍꺼 사구요, 디자인을 원하면 이 아크마우스 사시면 됩니다ㅠㅠ
이 아크마우스는 가격대비 좋은 마우스는 아닌지 싶습니다. 하지만, 디자인은 진짜 맘에 드네요!

저의 스마트폰 사용의 20%(?)를 차지하고 있는 SNS어플에 대해서 소개합니다~^^
생각해보니 제 안드로이드 사용은 게임20%, 인터넷20%, SNS20%, 음악20%, 뱅킹10%,  문자전화10%인 듯-_-

스마트폰을 가지게 되면서 소셜네트워크서비스에 대한 글 작성 같은 것이 쉬워지면서 더욱 관심있게 사용하게 되었는데요^^ 그래서 어플을 리뷰해보려고 합니다~

1. Twitter어플 - Seesmic
트위터 어플은 공식어플이 있는데요. 그냥 깔끔하기만 하고, 트위터어플 중 가장 기능이 없고 최악의 어플인 듯-_- 그래서 다른 어플을 추천해요~ 전 Seesmic이 좋더군요^^
멀티 계정설정도 되는 것 같은데, 전 계정이 하나이므로-_-
일단 메인화면~

Timeline, Replies, Messages, Profile 탭이 보이는군요.
트위터를 사용하시는 분들은 다 아실만한 것들이죠~
Timeline을 보면 자신이 쓴 것은 노란색, 저를 Reply한 것은 하늘색으로 표기되어서 자신에 관련된 글을 보기 쉽게 해주죠.
Replies는 @자신아이디로 검색된 내용을 보여줍니다.
Messages는 DM(Direct Message)를 볼 수 있구요~
Profile은 자신의 정보!

그리고 글을 볼 때 좋은 점은 포토서비스 같은 경우, Twitter공식어플은 직접 웹사이트를 띄워버리는데, 이건 그냥 이미지만 추출해서 보여줘서 참 좋아요~

글을 작성할 땐 사진첨부 및 위치입력, 비디오첨부가 가능합니다. (물론 다른 서비스에 올리고 링크만^^)
저 세번째 아이콘은 뭐지-_- 포토나 비디오 같은 경우 서비스 업체를 고를 수 있습니다^^

그리고 알림기능이 있습니다. 자신에게 Reply가 오거나 DM이 오면 알려주는 것입니다.
Update Interval로 몇분마다 데이터가 있는지를 가져올 지를 정할 수 있습니다. Notifications type같은 경우는 Tweets, Replies, Direct messages가 있는데, Tweets에 체크하는 순간-_- 자신이 팔로우 하는 사람이 많이 있다면 Interval타임마다 미친듯이 진동할 것입니다-_-
암튼, 자신에게 Replies된 것을 바로 알림을 받을 수 있어 참 좋죠~^^

2. 미투데이 - 미투데이
미투데이 어플은 왜 업뎃이 없죠ㅠㅠ 처음에 런칭하고 업뎃 한번도 없었음 ㅠㅠ
암튼, 메인화면입니다^^
이건 위에 Seesmic처럼 탭방식이 아닙니다. 메뉴를 누르면, 모아보는, 나는, 친구들은, 소환받은, 쪽지 등으로 볼 수 있게 되어있습니다.

그리고 글을 선택해서 들어가면 상세보기를 할 수 있습니다. 댓글이 보이고, 댓글을 작성할 수 있으며 미투를 할 수 있습니다.
여기서 댓글을 선택하면 /아이디/형식으로 댓글을 작성할 수 있습니다.
그리고 위글처럼 특정 글에 댓글을 자신의 미투에 쓴 경우 원본 글을 볼 수 있습니다.

그리고 미투데이에서도 알림 기능이 있습니다. 물론 미투데이는 자체적으로 소환받거나 쪽지를 받으면 SMS를 받는 기능이 있지만, 어플에서도 알림기능을 지원합니다^^
아래와 같이 미투데이에서 알림이 왔다고 뜹니다. 클릭하면 소환받은 목록으로 가게 됩니다~


아직 초기버전이라서 기능이 미약한 점이 좀 있는데요. 일단 댓글을 쓰면 지울 수 없습니다-_- 웹으로 가셔서 지우셔야합니다ㅠㅠ
그리고, 친구들 소환하기 기능이 없습니다. 아이디를 직접 외워서 쳐야합니다. 웹에서는 자동완성으로 친구닉넴으로 찾을 수 있는데, 그 기능이 있었으면 좋겠네요~^^

3. 포스퀘어 - Foursquare
포스퀘어는 친구도 별로 없고 그냥 체크인만 하는 상태라 아직까진 잘 모르겠네요-_-
일단 메인화면입니다.

보면 친구가 어디에 마지막으로 체크인을 했는지 보여줍니다. 그리고 Places탭과 Me탭이 있네요.
Places탭을 선택하면 현재 여기 근처에 어떤 지역이 있는지 보여줍니다.
선택해서 체크인 하고 싶은 거 하면 됩니다.
아오~ 지금 포스퀘어 잘 안되네-_- 암튼, 서버장애 엄청 납니다-_-
그냥 해당 지역을 체크인 해서 그 지역의 Mayor가 될 수도 있고, 그 지역에 체크인한 사람이 맘에 들면 친구먹는 거고, 그리고 체크인할 때 트위터와 연동해서 글을 쓸 수 있는 뭐 그런 지역기반sns입니다.
아이디어는 참 좋은 것 같아요~
게다가 해당 지역사람끼리 연결시켜주니 더욱 좋은 듯~

ps. 암튼, 하게되면 빠져듭니다-_-
업무시간에도 계속 미투데이와 트위터를 켜놓는 자신을 보게될 것입니다-_-