شروع کار با WebAssembly

بخش: توسعه وب 79 بار مشاهده شده یکشنبه ۲۹ مرداد ۹۶ 0 نظر ارسال شده
شروع کار با WebAssembly

دانلود DEMO

WebAssembly  یک تکنولوژی جدید است که باعث کارآمدتر شدن کد در مرورگر می شود. می توان از آن  برای آوردن کد بازهای بزرگ C و C++ مانند بازی ها، موتورهای فیزیکی و حتی برنامه های دسکتاپ به پلت فرم وب نیز استفاده نمود.

در حال حاضر، می توان از WebAssembly  در Chrome و فایرفاکس استفاده نمود و پشتیبانی Edge و Safari نیز تقریبا کامل شده است. این امر بدان معنی است که خیلی زود می توانید در هر مرورگر وب محبوبی که می خواهید اجرایش کنید.

در این درس، نحوه کامپایل یک فایل ساده  C به  wasm و شامل شدن آن در یک صفحه وب را نشان می دهیم.

 

چگونه WebAssembly کار می کند؟

در ابتدا یک مرور کلی بر آنچه WebAssembly انجام می دهد، خواهیم داشت. سعی می کنیم  از توضیحات بیش از حد فنی  بپرهیزیم.

امروزه مرورگرها، جاوا اسکریپت را در یک ماشین مجازی (VM) اجرا می کنند که کد شما را بهینه کرده و هر اجرا را در مقدار کم فشار می دهد. همانطور که همه چیز ثابت است، JS  یکی از سریع ترین زبان های پویا در اطراف می باشد. حتی اگر سریع باشد، هنوز نمی توان با کد خام C و C++ رقابت کند  و این دلیلی است که استفاده از WebAssembly بکار می آید.

Wasm  در همان VM جاوا اسکریپت اجرا می شود، اما بسیار بهتر عمل می کند. دو فرد می توانند آزادانه ارتباط برقرار کنند و یکدیگر را محروم ننمایند. به این ترتیب می توانید بهترین ها را از جهان - اکوسیستم بزرگ جاوا اسکریپت و نحو دوستانه، همراه با عملکرد نزدیک به بومی WebAssembly داشته باشید.

اکثر مردم ماژول WebAssembly را در C می نویسند و آنها را به فایل های   .wasmکامپایل می نمایند. فایل های  wasmبه واسطه مرورگر به طور مستقیم شناسایی نمی شوند، بنابراین نیاز به چیزی به نام جاوا اسکریپت برای بارگذاری دارند.

wasm chain

در آینده، این فرایند به احتمال زیاد با چارچوب WebAssembly و پشتیبانی از ماژول wasm بومی کوتاه می شود.

 

آنچه برای این درس نیاز دارید

برای نوشتن WebAssembly ، نیاز به ابزار بسیار کمی دارید. با این حال، اکثر موارد در لیست بسیار رایج هستند و شما احتمالا در حال حاضر در دسترستان می باشند.

  • مرورگر با پشتیبانی از WebAssembly، نسخه به روز Chrome یا فایرفاکس که باید ترفند (caniuse) را انجام دهد.
  • کامپایلر c به WebAssembly ما از Emscripten portable استفاده خواهیم کرد.
  • یک کامپایلر برای C GCC) در لینوکس، Xcode در OS X، ویژوال استودیو برای ویندوز(.
  • وب سرور محلی ساده برای اجرای مثال (مانند python -m SimpleHTTPServer 9000).

نصب Emscripten زمان می برد و قطعا سرگرم کننده نیست، اما در حال حاضر این کامپایلر بیشتر توصیه می شود. همچنین مطمئن شوید که در هارد دیسک فضای کافی را داشته باشید  زیرا بر روی دستگاه من تقریبا 1 گیگابایت فضا گرفته است.

 

مرحله 1: نوشتن کد  C

ما یک نمونه بسیار ساده C را ایجاد می کنیم که یک عدد تصادفی بین 1 تا 6 را انتخاب می کند. در یک دایرکتوری کاری از انتخاب های شما، یک فایل dice-roll.c جدید را ایجاد کنید.

#include 
#include 
#include 
#include <emscripten/emscripten.h>

int main(int argc, char ** argv) {
    printf("WebAssembly module loadedn");
}

int EMSCRIPTEN_KEEPALIVE roll_dice() {
    srand ( time(NULL) );
    return rand() % 6 + 1;
}

هنگامی که به wasm کامپایل می شود و کد را در مرورگر بارگذاری می کند، به طور خودکار اجرا می گردد. printf داخل آن به یک console.log ترجمه می شود و  بازگردانده می شود.

می خواهیم تابع roll_dice در جاوا اسکریپت هر زمان که به آن نیاز داریم در دسترس باشد. برای گفتن قصدمان به کامپایلر Emscripten باید EMSCRIPTEN_KEEPALIVE را اضافه کنیم.

 

مرحله 2: کامپایل C به WebAssembly

حال می خواهیم برنامه ساده C را به wasm کامپایل کنیم، علاوه بر این نیاز به ایجاد کد جاوا اسکریپت داریم که برای اجرا به ما کمک می کند.

در اینجا از کامپایلر Emscripten استفاده می کنیم. گزینه های CLI بسیار و رویکردهای متفاوتی وجود دارد. ما ترتیب زیر را کاربر پسند تر می دانیم:

emcc dice-roll.c -s WASM=1 -O3 -o index.js

در اینجا خلاصه ای از اتفاقات رخ داده وجود دارد:

  • emcc : کامپایلر Emscripten
  • dice-roll.c: فایل ورودی که حاوی کد C می باشد.
  • -s WASM=1 : مشخص می کند که در حال کار با WebAssembly هستیم.
  • -03: سطح بهینه سازی کدی که می خواهیم می باشد، 3 سطح بسیار بالا است.
  • -o index.js: به emcc می گوید تا یک فایل JS با تمام کد مورد نیاز برای ماژول  wasm را ایجاد کند.

پس از اجرای فرمان، در دایرکتوری ای که در حال کار می باشیم، دو فایل اضافه می شود:

index.wasm و  index.js. آنها ماژول WebAssembly و کد glue آن را به ترتیب نگه داشته اند.

نکته: اگر چه این گزینه های emcc به خوبی برای نمونه ما کار می کنند، اما در شرایط پیچیده تر، یک روش متفاوت ممکن است بهتر باشد.

 

مرحله 3: بارگذاری کد WebAssembly در مرورگر

اکنون در قلمرو وب سایت های آشنا می باشیم. یک فایل index.html پایه ایجاد می کنیم که شامل کد glue جاوا اسکریپت درون یک تگ script می باشد.


  
    
    
    WebAssembly Example
    
  
  

    
     
    

  
 

به دلیل مشکلات متقابل، برای اجرای پروژه از یک سرور وب محلی (local) استفاده می کنیم. در Linux یا OS می توانید یکی را با اجرای کد زیر در دایرکتوری پروژه شروع کنید:

python -m SimpleHTTPServer 9000

در حال حاضر در مرورگر localhost:9000 را برای مشاهده برنامه وارد کنید. اگر کنسول مرورگر را باز کنید، باید پیام تبریک printf-ed که در کد اصلی  C نوشته ایم، وجود داشته باشد:

wasm console

 

مرحله 4: فراخوانی توابع  WebAssembly

آخرین مرحله آزمایش ما اتصال جاوا اسکریپت و WebAssembly (همانند لوگو) می باشد. این در واقع مخازن بسیار آسان کد جاوا اسکریپت تولید شده از Emscripten است که تمام نوشته ها را برای ما مدیریت می کند.

یک API بسیار قدرتمند برای کار با WebAssembly در مرورگر وجود دارد. به جزئیات آن کاری نداریم، زیرا فراتر از محدوده این آموزش می باشد. تنها بخش هایی که به آن نیاز داریم، Module interface  (رابط ماژول) و متد ccall آن است. این متد ما را قادر می سازد تا یک تابع از کد C را به نامش فراخوانی کنیم و آن را درست مانند یک JS استفاده نماییم.

var result = Module.ccall(
    'funcName',     // name of C function 
    'number',       // return type
    ['number'],     // argument types
    [42]);          // arguments

بعد از  ccall، result هر چیزی را که از تابع C مربوطه انتظار داریم را باز می گرداند. تمام استدلال ها از جمله اولین آن اختیاری می باشند.

نسخه کوتاه نیز موجود است:

// Call a C function by adding an underscore in front of its name:
var result = _funcName();

تابع roll_dice در C نیاز به پارامتر ندارد و فراخوانی آن در جاوا اسکریپت بسیار آسان است.

// When a HTML dice is clicked, it's value will change.
var dice = document.querySelector('.dice');

dice.addEventListener('click', function(){

    // Make a call to the roll_dice function from the C code.
    var result = _roll_dice();
    dice.className = "dice dice-" + result;                   

});

 

نتیجه

ما هنوز در مراحل اولیه WebAssembly هستیم اما استاندارد جدید در حال حاضر پتانسیل بزرگی را نشان می دهد. توانایی اجرای سریع کد سطح-پایین در مرورگر راه تازه ای برای ایجاد کارایی هایی که به تنهایی با جاوا اسکریپت قابل انجام نبوده  را برای برنامه های جدید امکان پذیر می سازد.

در حال حاضر کار با WebAssembly کمی خسته کننده است. اسناد در چندین محل تقسیم شده اند، ابزارها برای استفاده دشوار می باشند و به کد glue جاوا اسکریپت برای ماژول های الزامی wasm نیاز دارید. تمام این مسائل باید حل شود زیرا افراد بیشتری به پلتفرم جدید وارد می شوند.

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

گروه تحقیقات سافت اسکیل به منظور افزایش سطح دانش جامعه، سعی در ترجمه، تالیف و تولید محتوای با کیفیت در زمینه های مختلف نرم افزاری دارد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...