1. [Example]message

Tip & Tech/ETC

1. [Example]message

뿡뿡~! 2013. 4. 4. 00:14

NaCl을 이용해서 간단한 메시지 주고받는 example을 만들어 볼려구요.

일단 기본적으로 sdk설치, 기본내용 및 구조 학습, pepper_25 에 대한 배경지식이 있다고 가정하고

진행합니다.

참고 : (https://developers.google.com/native-client/overview?hl=ko#using-existing-code)

다음과 같이 sdk폴더에 pepper_25\\examples\\ 폴더를 새롭게 만들어 줍니다.

저는 m_message로 만들었습니다.

그리고 총 5가지 파일을 만들어야 합니다.

1. m_message.cc :

Native Client에는 모듈과 인스턴스라는 개념이 도입되어 있습니다.

2. m_message.html : m_message.html은 웹 애플리케이션에 해당하는 웹페이지입니다

3. m_message.nmf : m_message.nmf는 사용자 컴퓨터의 명령 집합 아키텍처에 따라 로드할 컴파일된 Native Client 모듈(.nexe)을 Chrome에 알리는 Native Client 매니페스트 파일입니다(예: x86-32 또는 x86-64). glibc로 컴파일한 애플리케이션의 매니페스트 파일은 애플리케이션에서 사용하는 공유 라이브러리도 지정해야 합니다.

4. make.bat : @..\..\tools\make.exe %* , 컴파일 하는 명령어

5. Makefile : Makefile에는 애플리케이션의 실행 가능한 Native Client 모듈(.nexe 파일)을 빌드하는 데 필요한 컴파일 및 링크 명령이 들어 있습니다.

위의 5개의 파일을 다운로드 받은후에 make.bat파일을 실행합니다.

cmd창에서 make, make.bat를 실행해도 좋고 직접 더블클릭해서 컴파일 해도 됩니다.

하지만 cmd창에서 하는것이 오류가 생겼을때 확인해 볼 수 있어서 이 방법을 더 추천합니다.

============================================소 스 설 명 =============================================

m_message.html

컴파일된 Native Client 모듈을 로드하는 <embed> 요소가 포함되어 있습니다.

보여줄 필요가 없으니 0으로 설정합니다.

이벤트 리스너를 보시면 브라우저에서 Native Client 모듈 로드에 성공할때 발생하는 'load'이벤트를 수신하며 moduleDidLoad라는 자바스크립트 함수를 호출하게 됩니다.

다른 하나는 Native Client모듈에서 PostMessage()메소드(pp::Instance클래스)를 사용하여 애플리케이션의 JavaScript코드에 메시지를 보낼때 발생하는 'message' 이벤트를 수신합니다.

* 이벤트 리스너를 <embed> 요소에 직접 첨부하는 대신에 상위 <div> 요소에 첨부하는 이러한 기법은 모듈 'laod'이벤트가 발생하기 전에 이벤트 리스너를 활성화 하는데 사용되기 떄문에 위에 배치를 하는 것입니다.

여기서의 주목할 이벤트 핸들러는 두가지 입니다. moduleDidLoad(), handleMessage() JavaScript함수에서 구현됩니다.

<body onload="pageDidLoad()"> 이런코드로 인하여

처음에는 pageDidLoad() 자바스크립스 함수를 호출합니다.

19라인의 기능은 처음 로딩할 때 Loading이라는 문구를 웹페이지의 text값으로 update해주는 것입니다.

10라인의 기능은

listener.addEventListener('load', moduleDidLoad, true);

위와 같이 NaCl 모듈을 Load하고 나면 자바스크립트함수인 moduleDidLoad()를 호출하게 됩니다.

즉 NaCl 모듈이 Load된다면 10라인 함수가 호출되며 'SUCCESS'라는 문구를 text값으로 update해주는 것입니다.

여기까지가 NaCl모듈을 페이지 로드할때 이벤트로써 텍스트 값을 바꿔주는 예제 였습니다.

그 다음으로는 13라인을 주목해 주세요.

이 m_messageModule은 <embed>에있는 NaCl모듈을 읽습니다. 다음 13라인을 통해

NaCl에게 text값인 'hello'라는 값을 postMessage()라는 함수를 통해서 전달합니다.

자 여기까지 html의 역할입니다. (16라인은 NaCl로부터 메시지를 받아서 alert()하는 코드입니다.)

다음으로 m_message.cc를 보면서 설명하겠습니다.

m_message.cc

모듈은 실행 가능한 .nexe파일로 컴파일된 C, C++ 코드입니다.

인스턴스는 웹페이지에서 모듈이 관리하는 직사각형입니다. 인스턴스를 만들려면 <embed> 요소를 사용하여 포함합니다.

모듈을 참조하는 <embed>요소를 여러 개 사용하여 웹페이지에 모듈을 여러번 포함할 수도 있습니다.

m_message.html로부터 'hello'라는 메시지를 수신받는 함수는 HandleMessage함수 입니다.

var_message에 'hello'라는 값이 저장되어있으며 이렇게 var가 붙은 이유는 자바스크립트의 변수와 호환이 되게는 pp::Var을 사용한 것입니다. c++에서 처리하기 위한 코드로 20라인을 보시면 확인하실 수 있습니다.

22라인을 보면 message값이 "hello"랑 같다면 다시 pp:Var의 변수값으로 전환하여 PostMessage(var_reply)를 이용하여

html에 보내주게 됩니다. 이로써 m_message.cc의 역할은 메시지를 수신하여 처리(비교)한 후 html로 메시지를 원하는 값("hello from NaCl")으로 돌려주는 것입니다. 개발자는 여기서 이 문자열 값을 자기가 원하는 방식으로 구현하여 전달 할 수 있습니다.

이 후 m_message.html의 16라인 handleMessage(message_event) 함수로부터 이 값을 전달 받습니다.

이후 html에서는 alert()를 통해 이 값을 출력합니다.

출력된 화면.

나머지 Makefile, m_message.nmf, make 파일은 생략하겠습니다.

정리

- html과 NaCl(C, C++로 구현)과 'hello'스트링값을 주고 NaCl에서 처리하여 가공된 값을 다시 html에 보내주는 과정을 학습

- String값을 NaCl에서 개발자가 원하는 방식으로 처리하여 html문서에 넘길수 있음.

참고 URL : https://developers.google.com/native-client/dev/devguide/tutorial?hl=ko