مختصری با deepstream.io

مختصری با deepstream.io

شما به عنوان یک توسعه دهنده وب به احتمال زیاد با جاوا اسکریپت آشنا هستید و از کتابخانه های محبوبی مثل jQuery در ساخت برنامه های سمت کاربر (client-side) استفاده کرده اید.

اما حال با وجود پلتفرم N​ode.js که بر مبنای موتور جاوا اسکریپت کروم است (همان موتوری که گوگل کروم برای نمایش صفحات خود استفاده می کند) نه تنها می توان باعث بهبود در front-end برنامه های خود، بلکه می توان از جاوا اسکریپت برای back-end برنامه های خود استفاده کرد، به عبارت ساده کدهای جاوا اسکریپت را می توان در سمت سرور اجرا کرد و همچنین Node.js پلتفرمی بسیار قوی برای پیاده سازی برنامه های Real-time است.

tutorial node.js

ابزارهایی مثل Bower، Gulp یا Express.js با استفاده از Node ساخته شده اند، با مراجعه به این آدرس می توانید لیست محبوب ترین پکیج های ساخته شده با Node را مشاهده کنید.

در این پست قصد داریم درباره فریم ورک deepstream.io مروری کوتاه داشته باشیم. توجه داشته باشید در این آموزش فرض شده است که کاربر تجربه کافی کار با Node.js و نحوه نصب پکیج های آن با استفاده از NPM را دارد.

با تایپ دستور node -v و npm -v از نصب بودن Node.js و NPM اطمینان حاصل کنید.

اگر موارد خواسته شده نصب نیست، ابتدا به سایت nodejs.org رفته و برنامه را از آنجا دانلود و نصب کنید، توجه داشته باشید که لازم نیست NPM را جداگانه نصب کنید، چون با همراه با نصب Node.js نصب می شود.

نصب و راه اندازی deepstream.io

deepstream.io یک فریم ورک است که با Node.js و Engine.io ساخته شده. deepstream یک سرور Node مقیاس پذیر برای برنامه های Realtime وب می باشد که به توسعه دهندگان وب این امکان را می دهد که با حداقل نوشتن کدهای backend، برنامه های frontend با انجام عملیات Realtime ایجاد کنند. این فریم ورک همچنین قابلیت خواندن و دستکاری داده ها را دارد و به پیام هایی که بین یک یا چند کلاینت، و درخواست ها (request) و پاسخ هایی (response) که بین دو کلاینت یا سرور ارسال می شود گوش فرا دهد.

آموزش Node.js

همانطور که گفته شد در این پست می خواهیم یک مثال ساده را با این فریم ورک راه اندازی کنیم. پس ابتدا اجازه دهید پکیج deepstream.io را نصب کنیم. برای اینکار ابتدا یک دایرکتوری جدید (deepstream-demo) ایجاد کرده و از طریق خط فرمان یا ترمینال خود دستور زیر را در آن اجرا کنید تا پکیج deepstream.io از مخزن NPM دانلود شود، این پکیج بعد از نصب در پوشه node_modules ذخیره می شود.

بعد از نصب آن زمان آن است که کدهای backend خود را بنویسیم. ابتدا فایل دلخواهی با نام server.js در ریشه پروژه خود ایجاد کرده و کدهای زیر را در آن اضافه کنید:

همانطور که در کد فوق مشاهده می کنید، در خط اول با استفاده از تابع require پکیج deepstream.io را به برنامه خود اضافه کرده ایم و در خط بعد آن، یک شیء جدید از کلاس ()DeepstreamServer ساخته ایم که از متغیر server قابل دسترسی است. در خط های چهارم و پنجم متغیر های ثابت (constants) که deepstream فراهم می کند را تعریف کرده ایم. برای مشاهده لیست کامل متغیرهای ثابت به Constants مراجعه کنید. خط آخر نیز باعث می شود سرور Node ما در آدرس localhost با پورت 6020 اجرا شود.

حال اجازه دهید کد فوق را اجرا کنیم تا سرور روشن شود. برای این کار به خط فرمان خط برگردید و دستور node server.js را اجرا کنید. اگر همه چیز خوب پیش رفته باشد، باید خروجی کنسول شما بصورت زیر باشد.

deepstream.io

حال برای اینکه بتوانیم از بخش frontend به سرور خود متصل شویم، نیاز است کتابخانه client فریم ورک deepstream را در صفحه وب خود بارگذاری کنیم.

برای اینکار می توان یکی از دو روش زیر را برای دانلود کتابخانه client انتخاب کرد:

  • با مراجعه به گیت هاب deepstream فایل deepstream.min.js را بطور دستی دانلود کرده و در پروژه خود قرار داده.
  • با استفاده از پکیج منیجر Bower فایل deepstream.min.js را دانلود کنیم.

در این پست از Bower استفاده می کنیم. ابتدا با دستور زیر پکیج Bower را در سیستم نصب کنید:

دستور g- در فوق باعث می شود Bower بصورت سراسری (global) در سیستم شما نصب شود تا از هر کجای سیستم قابل دسترس باشد.

حال می توانیم با استفاده از Bower اقدام به نصب کتابخانه در پروژه خود کنیم:

در این پروژه به یک کتابخانه جاوا اسکریپت دیگر نیاز داریم و آن jQuery می باشد. برای نصب آن نیز می توان با استفاده از Bower اقدام به نصب نمود:

پکیج های Bower پس از نصب در پوشه bower_components ذخیره می شوند.

در ریشه پروژه خود یک فایل دلخواه با نام index.html ایجاد کرده و کدهای ساده HTML زیر را به آن اضافه کنید:

همانطور در HTML فوق مشاهده می کنید، ما کتابخانه هایی را که دانلود کرده بودیم را به فایل index.html لینک کردیم. در داخل تگ body یک input ساده را تعریف کرده ایم که کاربر با وارد کردن اطلاعات و کلیک دکمه button باعث می شود ورودی در لیست names قرار گیرد.

حال می توانیم کدهای جاوا اسکریپت برای این کار را در تگ script قرار دهیم:

در خط اول بدون هیچ نام کاربری یا کلمه عبوری، کلاینت می توانید به سرور متصل شود:

برای اطلاعات بیشتر در مورد اعتبار سنجی کاربر، بخش Authentication را مطالعه کنید.

در خط بعد، یک رکورد را ایجاد کرده ایم:

در ادامه با استفاده از jquery یک رویداد click ساده برای دکمه button تعریف کرده ایم که باعث می شود کاربر با کلیک کردن بر روی آن مقدار وارد شده در input در رکوردی با نام username ذخیره شود:

با استفاده از کد زیری که تعریف کرده ایم این قابلیت را به برنامه می دهیم که کلاینت های دیگر نیز تغییرات را در صفحه مشاهده کنند. یعنی وقتی کلاینتی مقداری را در اضافه می کند، کلاینت های دیگر نیز مقدار وارد شده از سوی کاربر دیگر را مشاهده می کنند.

برای تست تکه کد نوشته خود، مطمئن شوید سرور هنوز در حال اجرا است. بعد از آن فایل index.html را در دو پنجره مرورگر باز کرده و مقادیری را در ورودی تایپ کنید.

همانطور که مشاهده می کنید، هر مقداری را که در پنجره اول وارد شود، در پنجره های دیگر نیز تغییرات بصورت Realtime قابل مشاهده است.

توسعه دهندگان deepstream کانکتور RethinkDB را فراهم کرده اند که به فریم ورک این اجازه را می دهد از RethinkDB برای ماندگاری داده ها استفاده کند.

ادغام deepstream.io و Angular.js

برای اینکه بتوانیم از قابلیت های Angular.js همراه با deepstream.io استفاده کنیم، می توانیم از Services که Angular فراهم می کند استفاده کنیم. با استفاده از serviceها می توانیم کدها را در سرتاسر برنامه خود سازماندهی کنیم و از همه مهمتر هر کجایی که نیاز به تکه برنامه ای داشتیم به عنوان یک dependency، به برنامه Angular خود تزریق کنیم.

در این مثال نیز می خواهیم با استفاده از serviceها بخش deepstream.io را به عنوان یک ماژول ایجاد کرده و آن را به controller برنامه آنگولار خود تزریق کنیم (به عنوان پارامتر به برنامه ارسال می کنیم).

اگر با آنگولار آشنایی کافی ندارید می توانید از خواندن این بخش صرف نظر کنید.

Angular.js را از طریق npm دانلود کنید و آن را به فایل html خود لینک کنید.

فایلی دلخواه با نام app.js ایجاد کرده و آن را به فایل html خود لینک کنید و کدهای آنگولار زیر را به آن اضافه کنید:

همانطور که مشاهده می کنید کد ما بسیار واضح است، ابتدا برنامه آنگولار جدیدی به نام myApp ایجاد کرده ایم.

در ادامه با استفاده از service بخشی را که مخصوص به deepstream.io است را تعریف کرده ایم، در بلوک deepstream یک چیز جالب وجود دارد:

همانطور که حدس زده اید، وقتی سرور Node خود را اجرا کنید و فایل html خود را در چندین تب مختلف باز کنید، در ابتدا صفحه، جاوا اسکریپت به شما یک input نمایش می دهد که باید یک نام کاربری دلخواه وارد کنید. این کار باعث می شود به عنوان یک کلاینت منحصر به فرد وارد سیستم شوید.

آموزش nodejs

حال هر کلاینتی که وارد سیستم شود، کنسول سرور ما آن را شناسایی، و نام، کلید منحصر به فرد آن کاربر را چاپ می کند:

آموزش deepstream.io

آنگاه deepstream.io به عنوان dependency به کنترولر (controller) برنامه خود منتقل می کنیم، حال می توانیم اسکریپت های عادی آنگولار خود را در Controller وارد کنیم.

از آنجایی که پروژه deepstream.io جدید است، هنوز آموزش های زیادی در این رابطه در وب وجود ندارد، اما با این حال مثال هایی با Angular در سایت deepstream قرار داده شده است که اگر علاقه مند به ایجاد برنامه های جذاب هستید پیشنهاد می کنم به کدهای آن نگاهی بیندازید. 🙂

توجه داشته باشید ما فقط با اندکی از ویژگی های این فریم ورک جدید آشنا شدیم، برای درک بهتر حتما به سایت deepstream مراجعه کنید و مستندات آن را مطالعه کنید.

خلاصه

در این مقاله معرفی کوتاهی درباره deepstream.io خواهیم داشت. یاد خواهیم گرفت سرور deepstream را نصب و راه اندازی کنیم، همچنین چطور می توان از طریق مرورگر خود به سرور متصل شد و یک رکورد ساده را ایجاد کنیم. ورودی های وارد شده از سوی کلاینت ها را به کلاینت های دیگر نشان می دهیم (در واقع کلاینت ها به داده ها sync می شوند). در آخر نیز می بینیم که چطور deepstream.io را با Angular.js ادغام کنیم.