블로그 이미지
ssun++

카테고리

[전체] (73)
Android (7)
JavaScript (9)
CI (5)
Language (14)
ETC (38)
Total324,111
Today20
Yesterday18

'Native Client'에 해당되는 글 3건

  1. 2011.08.26 Native Client Example : Hello, World!
  2. 2011.08.17 Native Client Tutorial 따라하기
  3. 2011.08.15 Native Client 맛보기
[시작]
어디서든 처음 예제는 hello, world 입니다.


[동작]
하나의 input과 2개의 버튼이 있습니다.
'Call fortyTwo()' 버튼 클릭 시 42가 alert으로 출력되고
'Call reverseText()' 버튼 클릭 시 input 값이 뒤집혀서 출력됩니다.

[분석]
버튼을 클릭하여 모듈로 메세지를 보내면 모듈에서는 'message' 이벤트에 데이터를 실어서 보냅니다.
모듈로부터 받은 데이터는 이벤트 리스너로 등록된 handleMessage() 함수를 통해  alert으로 출력됩니다.
정확하게 그렸는지는 자신이 없지만 대략적인 동작은 아래 sequence diagram과 같습니다.
 


[끝]
'비동기로 동작한다'는 정도만 보면 될 것 같습니다.
Posted by ssun++

댓글을 달아 주세요

[시작]
단순히 tutorial 쫓아가는 포스트입니다.
hello world 정도의 예제입니다.

[Basics]
NaCl 웹앱은 최소 세가지 요소로 구성됩니다.
  • HTML 페이지
  • NaCl 모듈 : C/C++로 작성합니다. Pepper API를 사용합니다. 컴파일하면 .nexe 파일이 생성됩니다.
  • manifest 파일(.nmf) : 어떤 NaCl 모듈을 로드할지 명시합니다.

이 예제에서 확인할 수 있는 것들
  • 어떻게 웹페이지에서 NaCl 모듈을 로드하는가
  • 어떻게 브라우저와 NaCl 모듈간에 메세지를 주고 받는가 

[Step 1] SDK 설치하고 Python 서버 구동하기
  • SDK를 설치합니다.
  • Chrome에서 NaCl을 사용가능 하게 설정합니다.
  • Python 2.x 버전을 설치합니다.
  • Python 서버를 실행합니다. SDK의 examples 디렉토리에서 python httpd.py 5103 커맨드를 입력합니다.
     
[Step 2] NaCl이 동작하는지 확인합니다.
http://localhost:5103으로 이동해서 NaCl 예제가 보인다면 정상

[Step 3] Python 스크립트로 템플릿 파일 생성
SDK의 project_templates 디렉토리에 있는 init_project.py 스크립트로 간단한 NaCl 프로젝트를 생성할 수 있습니다.

스크립트는 아래와 같은 파일을 생성합니다.
  • build.scons : build instruction
  • [프로젝트명].html : NaCl 모듈을 로드할 페이지
  • [프로젝트명].cc (or .c) : NaCl 모듈의 소스코드
  • scons (or scons.bat) : 빌드 스크립트
 
init_project.py는 아래와 같은 옵션을 사용할 수 있습니다.
  • -n : 프로젝트명 
  • -d : 프로젝트 경로
  • -c : C로 작성 (default는 C++)
아래와 같이 스크립트를 실행합니다.

python init_project.py -d ../examples -n hello_tutorial


[Step 4] 웹페이지가 모듈을 로드하고 모듈과 통신하도록 하기
웹페이지 hello_tutorial.html이 브라우저에 로드되면 컴파일된 NaCl 모듈(hello_tutorial.nexe)가 로드됩니다.
<embed> 엘리먼트가 NaCl 모듈이 로드되는 곳입니다.

moduleDidLoad() 함수에 NaCl 모듈로 메세지를 보내도록 코드를 추가합니다.

function moduleDidLoad() {

    HelloTutorialModule = document.getElementById('hello_tutorial');

    HelloTutorialModule.addEventListener('message', handleMessage, false);

    updateStatus('SUCCESS');

    //Send a message to the NaCl module.

    HelloTutorialModule.postMessage('hello');

}


[Step 5] NaCl 모듈의 message handler 구현하기
이 단계의 목표는 아래와 같습니다.
  • HandleMessage() 함수 구현
  • 브라우저로 메세지를 보내기 위해 PostMessage() 함수 사용  
아래 라인을 적당히 추가합니다.

namespace {

    const char* const kHelloString = "hello";

    const char* const kReplyString = "hello from NaCl";

}


HandleMessage() 함수에 아래 라인을 추가합니다.

virtual void HandleMessage(const pp::Var& var_message) {  

   if (!var_message.is_string()) {

      return;

    }

    std::string message = var_message.AsString();

    pp::Var var_reply;

    if (message == kHelloString)

      var_reply = pp::Var(kReplyString);

    PostMessage(var_reply);

  }

};


[Step 6] NaCl 모듈 컴파일하기
scons 스크립트 (또는 scons.bat)를 실행합니다.
x86_32/x86_64 용 실행가능한 NaCl 모듈과 manifest 파일이 생성됩니다.
(manifest 파일은 사용자의 CPU에 맞는 모듈을 구동하도록 함)

[Step 7] 실행해보기
크롬에 아래와 같이 입력합니다.

http://localhost:5103/hello_tutorial/hello_tutorial.html

alert 창에 "hello from NaCl" 메세지가 뜨면 성공

[마침] 
NaCl 모듈을 사용하는 대략적인 구조 파악과 함께.
컴파일된 모듈을 사용하는 것을(인터프리팅하는 형태가 아니라) 확인할 수 있었습니다.
Posted by ssun++

댓글을 달아 주세요

Native Client 맛보기

ETC/WebKit / 2011.08.15 21:36
[시작]
크롬 최신판, '구글판 액티브X' 품다 ZDNet에 이런 기사가 있어서 살펴보았습니다.
요지는 '일반 프로그래밍 언어로 작성한 코드를 웹에서 실행시킨다'인 것 같습니다.

기사에서는 크롬 14버전에 포함될 예정이라고 하는데
현재 크롬 카나리아 버전(15.0.849.0)에서는 실행 가능합니다.
따라서 아래 내용은 카나리아 버전 기준으로 진행하겠습니다.

[환경 설정]
카나리아 버전이라도 곧바로는 예제 코드 실행이 불가능 합니다.


Native Client를 실행하기 위해서는 옵션 변경이 필요합니다.
1. about:flags에서 'Native Client' (또는 '기본 클라이언트') 항목을 '사용'으로


2. about:plugins에서 'Chrome NaCl' (또는 'Native Client') 항목을 '사용'으로
 

(플러그인 형태로 동작하는 것이 중요해 보입니다.)

옵션 변경 후에는 크롬을 재시작 합니다.

[예제 실행]
Native Client 예제 페이지로 갑니다.
위의 빨간 박스가 보이면 환경 설정이 잘못된 것입니다.
아래와 같은 파란 박스가 보여야 합니다.
 


몇가지 예제가 있는데 실행 방법이나 결과는 생략하겠습니다.

[소스 확인]
위에서 플러그인 형태로 동작하는 것은 언급하였습니다.
html 소스만 확인해보면 <embed> 엘리먼트가 있고, src는 .nmf 파일, type은 "application/x-nacl" 입니다.
C/C++ 소스를 컴파일 해서 .nmf 파일을 사용할 수 있는 것 같습니다.

[끝]
뉴스 제목을 '구글판 액티브 X'라고 뽑을 정도니 파급효과는 지켜봐야 할 것 같습니다.
브라우저에서 컴파일해야 하니까 성능 이슈도 있지 않을까 싶구요.
(줄여서 'NaCl'이라고 하는거 마음에 드네요 :D)
Posted by ssun++

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함