웹에서 녹 응용 프로그램을 실행하는 방법

첫 장 > 프로그램 작성 > 웹에서 녹 응용 프로그램을 실행하는 방법

웹에서 녹 응용 프로그램을 실행하는 방법

2025-02-03에 게시

검색:748

How to Run a Rust Application in the Web

이 튜토리얼에서는 웹 브라우저에서 Rust Applications를 실행하는 방법을 배웁니다. 간단한 Rust 패키지를 만들고 WASM (WebAssembly)으로 컴파일 한 후 HTML 페이지에 통합합니다.

1. Rust

먼저 녹을 설치해야합니다. Rust의 공식 설치 안내서 :

Rust 설치 안내서 를 참조하십시오. 설치가 완료되면 다음 명령을 실행하여 설치가 성공했는지 확인하십시오.

Rustc -version

rustc --version

2. Rust 패키지 만들기

다음, 새로운 Rust 패키지 만들기 :

Cargo New Rust-101-lib

cargo new rust-101 --lib

—— Cargo.toml SRC R B

├── Cargo.toml
└── src
    └── lib.rs

package.json

lib.rs : Rust Code가 포함 된 기본 라이브러리 파일.
파일. 기본적으로 예제 add 함수가 포함됩니다. 우리의 목표는 웹 응용 프로그램 에서이 기능을 호출하는 것입니다.

3. 녹을 webAsSembly로 컴파일 웹에서 Rust 코드를 실행하려면 WASM (WebAssembly)에 컴파일해야합니다. 이러한 이유로 WASM-PACK 도구를 설치하십시오 :

화물 설치 WASM-PACK

4. Rust와 JavaScript 사이의 커뮤니케이션을 만듭니다

Rust와 JavaScript를 연결하기 위해

cargo install wasm-pack

파일은 다음과 같습니다.

[패키지] 이름 = "Rust-101" 버전 = "0.1.0" 에디션 = "2021" [lib] 크레이트 유형 = [종속성] WASM-BINDGEN = "0.2"

]

여기: crate-type =

[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

: Rust와 JavaScript 간의 통신을 활성화합니다.

화물 빌드
5. Rast 코드를 업데이트하십시오

파일,

add

함수를 JavaScript에서 방문 할 수 있도록 :

cargo build

#[WASM_BINDGEN] : EDD

함수를 JavaScript에 첨가합니다.

Rust 패키지를 WebAssembly로 컴파일하려면 다음 명령을 실행합니다. ]이 명령은 :

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left   right
}

WebAsSembly 파일을 처리하기위한 JavaScript 바인딩을 생성합니다.

파일이 포함 된 pkg/ 디렉토리를 만듭니다.

프로젝트 루트 디렉토리에서

wasm-pack build --target web

] 7. 최종 프로젝트 구조

]
. ─ ─ Cargo.lock ─ ─ cargo.toml x ─ ─ index.html pkg │ a 신점. Package.json │ u 초은 Rust_101.D.TS │ u 초은 Rust_101.js │ u 초은 Rust_101_BG.wasm │ u 초은 Rust_101_BG.WASM.D.TS SRC R B

웹 페이지를 실행하려면 로컬 웹 서버를 사용하여 서비스를 제공해야합니다. Live Server Extension (VS Code)과 같은 웹 서버를 사용할 수 있습니다.

브라우저 콘솔 (Ctrl Shift J 또는 CMD 옵션 j)에서 다음을 볼 수 있습니다 :

5 10 = 15



  
    
    Hello Rust

참조 :

Rust에서 WebAssembly로 컴파일 된

 원래 단어 중 일부를 대체하고 명확한 조직을 단계로 구성했지만 원본 텍스트의 전반적인 의미와 그림 위치를 유지했습니다.  새로운 내용이나 원본 텍스트를 변경하는 데 초점을 두지 않았습니다.  실제 상황에 따라 대체하십시오.

최신 튜토리얼 더>

Object-Fit : IE 및 Edge에서 표지가 실패, 수정 방법?
이 문제를 해결하기 위해 문제를 해결하는 영리한 CSS 솔루션을 사용합니다. > 위치 : 절대; 상단 : 50%; 왼쪽 : 50%; 변환 : 번역 (-50%, -50%); 높이 : 100%; 너비 : 자동; // 수직 블록의 경우 높이 : 자동; 너비 ...

프로그램 작성 2025-02-04에 게시
$\ "일반 오류 : 2006 MySQL Server가 사라졌습니다 \"데이터를 삽입 할 때?$
\ "일반 오류 : 2006 MySQL Server가 사라졌습니다 \"데이터를 삽입 할 때?
] MySQL 데이터베이스에 삽입하면 때때로 "일반 오류 : 2006 MySQL 서버가 사라졌습니다."오류가 발생할 수 있습니다. 이 오류는 일반적으로 MySQL 구성의 두 변수 중 하나로 인해 서버에 대한 연결이 손실 될 때 발생합니다. 솔루션...

프로그램 작성 2025-02-04에 게시
파이썬에서 문자열에서 이모티콘을 제거하는 방법 : 일반적인 오류 수정에 대한 초보자 가이드?
] 코덱을 가져옵니다 가져 오기 re text = codecs.decode ( '이 개 \ u0001f602'.encode ('utf-8 '),'utf-8 ') 인쇄 (텍스트) # 이모티콘으로 emoji_patter...

프로그램 작성 2025-02-04에 게시
$PHP \의 기능 재정의 제한을 극복하는 방법은 무엇입니까?$
PHP \의 기능 재정의 제한을 극복하는 방법은 무엇입니까?
} // 오류 : "reteclare foo ()" 함수 this ($ a, $ b) { return $ a * $ b; } 그러나 PHP 도구 벨트에는 숨겨진 보석이 있습니다 : runkit 확장. runkit_function_re...

프로그램 작성 2025-02-04에 게시
유효한 코드에도 불구하고 PHP의 입력을 캡처하는 사후 요청이없는 이유는 무엇입니까?
;?> "method = "post"> 의도는 입력을 캡처하는 것입니다. 텍스트 상자와 제출 버튼을 클릭하면 표시합니다. 그러나 출력은 비어 있습니다. Method = "Get"은 원활하게 작동하지만 ...

프로그램 작성 2025-02-04에 게시
PHP를 사용하여 Blob (이미지)을 MySQL에 올바르게 삽입하는 방법은 무엇입니까?
php 가있는 MySQL 데이터베이스에 블로브를 삽입하면 MySQL 데이터베이스에 이미지를 저장하려고하면 발생할 수 있습니다. 문제. 이 안내서는 이미지 데이터를 성공적으로 저장하는 솔루션을 제공합니다. ressue $ sql = &qu...

프로그램 작성 2025-02-04에 게시
교체 지시문을 사용하여 GO MOD에서 모듈 경로 불일치를 해결하는 방법은 무엇입니까?
[ github.com/coreos/etcd/client github.com/coreos/etcd/client에 의해 테스트 된 Echoed 메시지에 의해 입증 된 바와 같이 이로 인해 깔끔한 실패가 발생할 수 있습니다. 테스트 수입 github.com/cor...

프로그램 작성 2025-02-04에 게시
regex를 사용하여 PHP에서 괄호 안에서 텍스트를 추출하는 방법
$ fullstring = "이 (텍스트)을 제외한 모든 것을 무시합니다. $ start = strpos ( '('( '('). , $ fullstring); $ end = strlen ($ fullstring) - s...

프로그램 작성 2025-02-04에 게시
Google API에서 최신 JQuery 라이브러리를 검색하는 방법은 무엇입니까?
https : // code : // code : // code : // code가 있습니다. .jquery.com/jquery-latest.min.js (jQuery 호스팅, 미니딩) ] https://ajax.googleapis.com/jax/libs/jque...

프로그램 작성 2025-02-04에 게시
McRypt에서 OpenSSL로 암호화를 마이그레이션하고 OpenSSL을 사용하여 McRypt 암호화 데이터를 해제 할 수 있습니까?
질문 : McRypt에서 OpenSSL로 내 암호화 라이브러리를 업그레이드 할 수 있습니까? 그렇다면 어떻게? 대답 : 예, McRypt에서 OpenSSL로 암호화 라이브러리를 업그레이드 할 수 있습니다. OpenSSL? OpenSSL을 사용하여 Mc...

프로그램 작성 2025-02-04에 게시
익명의 JavaScript 이벤트 처리기를 깨끗하게 제거하는 방법은 무엇입니까?
익명 이벤트 리스너 제거 익명 이벤트 리스너 추가 요소 추가는 유연성과 단순성을 제공하지만 제거 할 때 요소를 교체하지 않고 도전을 제기 할 수 있습니다. 그 자체. 질문이 발생합니다.이 방식으로 추가 된 익명 이벤트 리스너가 요소를 변경하지 않고 제거 할...

프로그램 작성 2025-02-04에 게시
HTML 서식 태그
HTML 서식 요소 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without...

프로그램 작성 2025-02-04에 게시
순수한 CS로 여러 끈적 끈적한 요소를 서로 쌓을 수 있습니까?
순수한 CSS에서 서로 위에 여러 개의 끈적 끈적한 요소가 쌓일 수 있습니까? 원하는 동작은 할 수 있습니다. https://webthemez.com/demo/sticky-multi-header-scroll/index.html 순수한 CSS를...

프로그램 작성 2025-02-04에 게시
PostgreSQL의 각 고유 식별자에 대한 마지막 행을 효율적으로 검색하는 방법은 무엇입니까?
postgresql : postgresql에서 각 고유 식별자에 대한 마지막 행을 추출함으로써 정보를 추출 해야하는 상황이 발생할 수 있습니다. 데이터 세트 내 각각의 별개의 식별자와 관련된 마지막 행 다음 데이터를 고려하십시오 : id date dat...

프로그램 작성 2025-02-04에 게시
JavaScript 객체에서 키를 동적으로 설정하는 방법은 무엇입니까?
jsobj = 'example'1; jsObj['key' i] = 'example' 1; 배열은 특수한 유형의 객체입니다. 그것들은 숫자 특성 (인치) + 1의 수를 반영하는 길이 속성을 유지합니다. 이 특별한 동작은 표준 객체에...

프로그램 작성 2025-02-04에 게시