웹어셈블리(WASM) 소개-JS 튜토리얼-php.cn

Introduction to WebAssembly (WASM)

WebAssembly(WASM)는 고성능 애플리케이션을 위한 이식 가능한 대상으로 설계된 스택 기반 가상 머신용 바이너리 명령 형식입니다. 이 기사에서는 간단한 C 프로그램을 WebAssembly로 컴파일하고, 웹 브라우저에 로드하고, JavaScript를 사용하여 상호 작용하는 방법을 살펴보겠습니다. 또한 개발 컨테이너 환경 외부에서 WASM을 사용하는 데 유용한 몇 가지 도구와 명령을 살펴보겠습니다.

개발 환경 설정

WebAssembly 프로젝트에 필요한 폴더 구조와 파일을 생성하세요.

프로젝트 폴더 만들기: 프로젝트에 대한 새 디렉터리를 만드는 것부터 시작하세요. 이 폴더 내에 필요한 파일과 구성을 추가합니다.

   mkdir wasm-web-example
   cd wasm-web-example

로그인 후 복사

개발 컨테이너 설정: wasm-web-example 디렉터리에서 .devcontainer 폴더를 생성하여 개발 컨테이너 구성 파일을 저장합니다. 이 파일은 C 코드를 WebAssembly로 컴파일하기 위해 Emscripten이 설치된 컨테이너를 설정합니다.

.devcontainer 폴더 안에 다음 파일을 만듭니다.

devcontainer.json

이 파일은 필요한 확장 및 환경 설정이 포함된 Docker 컨테이너를 사용하도록 VSCode를 구성합니다.

 {
   "name": "Emscripten DevContainer",
   "build": {
     "dockerfile": "Dockerfile"
   },
   "customizations": {
     "vscode": {
       "settings": {
         "terminal.integrated.shell.linux": "/bin/bash",
         "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
         "C_Cpp.default.intelliSenseMode": "gcc-x64"
       },
       "extensions": [
         "ms-vscode.cpptools",
         "ms-vscode.cmake-tools"
       ]
     }
   },
   "postCreateCommand": "emcc --version"
 }

로그인 후 복사

Docker 파일

Dockerfile은 Emscripten 환경을 설정합니다. 해당 파일의 내용은 다음과 같습니다.

 # Use the official Emscripten image
 FROM emscripten/emsdk:3.1.74

 # Set the working directory
 WORKDIR /workspace

 # Copy the source code into the container
 COPY . .

 # Install any additional packages if necessary (optional)
 # Ensure to clean up cache to minimize image size
 RUN apt-get update && \
     apt-get install -y build-essential && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*

로그인 후 복사

VSCode 설정 생성: 프로젝트 루트에 다음 파일이 포함된 .vscode 폴더를 만듭니다.

c_cpp_properties.json

이 파일은 C IntelliSense를 구성하고 프로젝트의 경로를 포함합니다.

 {
   "configurations": [
     {
       "name": "Linux",
       "includePath": [
         "${workspaceFolder}/**",
         "/emsdk/upstream/emscripten/system/include"
       ],
       "defines": [],
       "compilerPath": "/usr/bin/gcc",
       "cStandard": "c17",
       "cppStandard": "gnu++17",
       "configurationProvider": "ms-vscode.cmake-tools"
     }
   ],
   "version": 4
 }

로그인 후 복사

settings.json

이 파일에는 언어 연결을 위한 특정 VSCode 설정이 포함되어 있습니다.

 {
   "files.associations": {
     "emscripten.h": "c"
   },
   "[javascript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[typescript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[jsonc]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[json]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features"
   }
 }

로그인 후 복사

C, JavaScript 및 HTML 파일 만들기: 이제 프로젝트에 대해 다음 파일을 만듭니다.

test.c

이 C 파일에는 WebAssembly로 컴파일될 간단한 함수가 포함되어 있습니다.
```
 // test.c
 int add(int lhs, int rhs) {
     return lhs + rhs;
 }
```
로그인 후 복사

test.html

이 HTML 파일은 JavaScript를 사용하여 WebAssembly 모듈을 로드합니다.

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WebAssembly Example</title>
   </head>
   <body>
     <h1>WebAssembly Example</h1>
     <div>

</li>
<li>
<p><strong>test.js</strong><br><br>
 This JavaScript file will fetch the WebAssembly module and call the exported function.<br>
</p>
<pre class="brush:php;toolbar:false"> // test.js
 const wasmFile = 'test.wasm';

 fetch(wasmFile)
   .then(response => response.arrayBuffer())
   .then(bytes => WebAssembly.instantiate(bytes))
   .then(({ instance }) => {
     const result = instance.exports.add(5, 3); // Call the WebAssembly function
     document.getElementById('output').textContent = `Result from WebAssembly: ${result}`;
   })
   .catch(error => console.error('Error loading WebAssembly module:', error));

로그인 후 복사

이제 필요한 파일과 구성을 모두 설정했으므로 WebAssembly 컴파일 및 상호 작용으로 넘어갈 수 있습니다.

Emscripten을 사용하여 C 코드를 WebAssembly로 컴파일

기본 C 프로그램:

test.c 파일에는 두 개의 정수를 더하는 간단한 함수 add가 포함되어 있습니다. Emscripten을 사용하여 이 C 함수를 WebAssembly로 컴파일하겠습니다.
Emscripten 명령:

dev 컨테이너 내에서 터미널을 열고(VSCode에서 cmd j 사용) 다음 Emscripten 명령을 실행하여 C 코드를 WebAssembly로 컴파일합니다.

   mkdir wasm-web-example
   cd wasm-web-example

로그인 후 복사

이 명령은 WebAssembly 바이너리인 test.wasm을 생성하고 JavaScript에서 사용하기 위해 추가 기능을 내보내는지 확인합니다.

브라우저에서 WebAssembly 로드 및 상호 작용

HTML 설정:

test.html 파일에는 JavaScript를 사용하여 WebAssembly 바이너리를 로드하는 간단한 HTML 페이지가 포함되어 있습니다.
JavaScript 설정:

JavaScript 파일 test.js는 test.wasm 파일을 로드하고 내보낸 추가 기능을 호출합니다.

macOS에서 외부 도구 사용

개발 컨테이너 외부에는 Mac에서 WebAssembly를 사용하기 위해 실행할 수 있는 몇 가지 유용한 명령이 있습니다.

wabt 설치: wabt(WebAssembly Binary Toolkit)는 .wasm 파일을 사람이 읽을 수 있는 WAT(WebAssembly Text) 형식으로 변환하는 것을 포함하여 WebAssembly 작업을 위한 유틸리티를 제공합니다. Homebrew를 통해 설치합니다.

 {
   "name": "Emscripten DevContainer",
   "build": {
     "dockerfile": "Dockerfile"
   },
   "customizations": {
     "vscode": {
       "settings": {
         "terminal.integrated.shell.linux": "/bin/bash",
         "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
         "C_Cpp.default.intelliSenseMode": "gcc-x64"
       },
       "extensions": [
         "ms-vscode.cpptools",
         "ms-vscode.cmake-tools"
       ]
     }
   },
   "postCreateCommand": "emcc --version"
 }

로그인 후 복사

WASM을 WAT로 변환: wabt가 설치되면 wasm2wat 도구를 사용하여 WebAssembly 바이너리(test.wasm)를 WAT 형식으로 변환할 수 있습니다.

 # Use the official Emscripten image
 FROM emscripten/emsdk:3.1.74

 # Set the working directory
 WORKDIR /workspace

 # Copy the source code into the container
 COPY . .

 # Install any additional packages if necessary (optional)
 # Ensure to clean up cache to minimize image size
 RUN apt-get update && \
     apt-get install -y build-essential && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*

로그인 후 복사

HTML 페이지 제공: WebAssembly 모듈과 상호 작용하는 HTML 페이지를 보려면 Python의 간단한 HTTP 서버를 사용할 수 있습니다.

 {
   "configurations": [
     {
       "name": "Linux",
       "includePath": [
         "${workspaceFolder}/**",
         "/emsdk/upstream/emscripten/system/include"
       ],
       "defines": [],
       "compilerPath": "/usr/bin/gcc",
       "cStandard": "c17",
       "cppStandard": "gnu++17",
       "configurationProvider": "ms-vscode.cmake-tools"
     }
   ],
   "version": 4
 }

로그인 후 복사

결론

이 단계에 따라 C 코드를 WebAssembly로 컴파일하고 JavaScript를 사용하여 상호 작용하고 검사를 위해 결과 바이너리를 변환하는 개발 환경을 설정할 수 있습니다. wabt 및 Python의 HTTP 서버와 같은 외부 도구를 사용하면 macOS 시스템에서 WebAssembly 모듈을 간편하게 관리하고 탐색할 수 있습니다.

위 내용은 웹어셈블리(WASM) 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!