ساخت یک چت روم خیلی ساده در ۱۰ خط با Meteor

ساخت یک چت روم خیلی ساده در ۱۰ خط با Meteor

سلام دنیا، اول میخوام یه معذرت خواهی کنم که بابت اینکه واقعا وقتم کمه و نمی تونم پست خوب بزارم ولی قول میدم به زودی یه سری آموزش پدر مادر دار راجع به Meteor شروع کنم. تو این پست میخوام یه چت روم خیلی خیلی ساده با Meteor بسازم، در واقع تو این پست شما چیزی یاد نمیگیرید جز اینکه Meteor واقعا فوق العاده است. راستی ممکنه با اینترنت ADSL با مشکل مواجه شین ترجیحا یه ۴جی برای خودتون دست و پا کنید که وقتتون تلف نشه، زندگی کوتاه تر از اینه که واسه دانلود صبر کنید.

 

خب سریع بریم سر اصل کار و Meteor رو نصب کنیم. اگه سیستم عاملتون لینوکس یا مک هست که راحتید برید تو ترمینالتون بزنید( ترجیحا با ۴جی چون سرعتش واقعا بالاست و شاید بدون اون خسته شید تو مراحل اولیه:دی ) :

 

اگه هم ویندوزی هستید ناراحت نباشید برید تو صفحه نصب Meteor و مراحل رو ادامه بدید ( راستش خودم آخرین ویندوزم ۷ بود و الان دیگه کلا از دنیاش خبر ندارم ).

وقتی که نصب کردید برید تو ترمینالتون یا مشابهش تو ویندوز و یک پروژه جدید به این صورت بسازید:

خب الان میتونید برید تو پروژه تون و اون اجرا کنید با دستور زیر ( تو ترمینال یا مشابهش ):

خب بعد اینکه کارش تموم شد میتونید آدرس localhost:3000 رو تو مرورگرتون بزنید و برید و اپلیکیشن پیشفرض پروژه تون رو ببینید. بهتره برید کد هاشم ببینید یکم باهاش ور برید ببینید میتونید سر در بیارید یا نه ( تو اون سری آموزش پدر بابا دارم همه اینارو توضیح میدم ).

بوم الان وقتشه که چت روممون رو بنویسیم. تو ترمینالتون یه تب جدید باز کنید ( تو مک با command + t و تو ویندوز و لینوکس فک میکنم  control+t باشه حواستون هم باشه تو فلدر اپتون باشید. )

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

این دوتا پکیج یکی سیستم ورود و عضویت به شما اضافه میکنه و یکی یه ui خیلی ساده واسش.

حالا همه فایل های داخل پوشه client و server رو پاک کنید و دو تا فایل جدید تو پوشه client بسازید به اسم main.js و main.html. تو فایل main.html برید و کد زیر رو وارد کنید:

خب برگردید تو لوکال هاستتون میبینید بدون اینکه بارگذاری مجدد کنید کد های جدیدتون ظاهر شدن. تبریک میگم شما همین الان یه سیستم ورود عضویتی ساختید که کامل کار میکنه. شاید باور نکنید این سیستم حتی فراموشی پسورد هم داشته باشه. خب یه اکانت بسازید و وارد سیستمتون بشید. خب هیچی نمیبینید چون هیچ کدی نزدید. برگردید تو main.html تون و اینطوری بروزش کنید:

خب کد رو توضیح نمیدم تا شما مجبور شید بخونیدش و بفهمیدش (اگه مشکلی بود تو کامنتا میتونید ازم بپرسید). حالا میرسیم به اصل کار برید تو main.js و کد زیر رو بزنید:

خب کاری که الان کردیم این بود که اگه کاربر لاگین نکرده باشه پیام هارو نبینه و اگه لاگین کنه میتونه ببینه. یه چندبار لاگ اوت لاگین کنید تا مطمئن بشید صفحه رفرش نشده و شوکه بشید. حالا یه فلدر تو روت پروژه بسازید به اسم lib و یه فایل توش به اسم collection.js و توش کد زیر رو بزنید:

تو کد بالا شما یه کالکشن ساختید تا پیام هاتون رو توش ذخیره کنید با صاحبشون که بعدا ازش استفاده کنید و دوباره برید تو فایل main.js و کدتون رو به زیر تبدیل کنید:

خب حالا شما یک event درست کردید که پیام هاتون با اون تو کالکشن تون ذخیره میشه. حالا وقت نمایش پیام هاست. اول یکم برنامه رو امن تر کنیم. برید تو ترمینالتون ( و بازهم یا مشابهش ) بزنید:

بعد برید تو فایل collection.js و این کد رو به تهش اضافه کنید:

در واقع کد شما یکم امن تر شد و فقط داده هایی که نیاز دارید به سمت کلاینت فرستاده میشه و میتونید این داده هارو هر جور که میخواید محدود کنید. برگردید به main.html و با کد زیر بروزش کنید:

و در آخر main.js خودتون رو به صورت زیر بروز کنید:

خب توضیح اینکه اگر یکم کد رو بخونید میبینید چقدر سادست ( که من تو سری آموزش های بعدیم قشنگ و با حوصله توضیح میدم چه اتفاقی افتاده ) ولی ما در واقع چند تا helper تعریف کردم که هرکدوم یک سری اطلاعات رو از دیتابیسمون میخونن و نمایش میدن.یکی از helper ها به اسم messages هم یه آرایه میده که ما با }}#each}} تو فایل main.html روی هر عضو آرایه لوپ میزنیم.

پایان نامه

خب اگه منطقی نگاه کنیم این اپلیکیشن نزدیک ۷۰ خط کد شد که البته یه مقداریش به خاطر UI مون بود و یه مقداریشم generator ها زحمتش رو میکشن موقع توسعه حرفه ای اپلیکیشن و در واقع کد مفیدی که ما زدیم بیشتر از ۱۰ خط نبود. خب فوق العادست. ما یه چت روم ساختیم فقط با ۱۰ خط کد. میتونید چند تا مرورگر باز کنید و تو هرکدوم لاگین کنید تا از reactive بودن و realtime بودنش مطمئن بشیم. کد های این پروژه هم میتونید اینجا ببینید:

https://github.com/AjandM/very-simple-chat-room

 

قدم بعدی

من سعی کردم شما رو عاشق Meteor کنم تو این پست، پس اگه عاشقش شدید میتونید تو اینترنت راجع بش بگردید و بخونید و یادبگیرید. اگه که هم نه میتونید وایستید تا سری آموزش هام رو درس کنم و براتون بزارم. شاد و خوش و شنگول و موفق باشید :).

  • سلام کنت مونت کریستو
    وقت بخیر

    از خوندن این مقاله لذت بردم. منتظر آموزش‌های جامع Meteor هستیم. اگر بشه برای هر آموزش یک ویدیو هم تهیه بشه عالیه میشه.
    ممنون از اشتراک گذاری داشته‌ها …

    با نهایت ادب و احترام
    میلاد

    • کنت مونت کریستو

      سلام میلاد جان، خوشحالم که مقاله برات جالب بود. خودم هم تو فکر آموزش ویدئویی هستم،‌ ایشالا یکم سرم خلوت شه یه سری آموزش ویدئویی کامل میزارم احتمالا با یه پروژه مشابه ترلو یا تسکولو. اگه دوست داشتید میتونید تو توییتر پیدام کنید https://twitter.com/Ajand_ .
      با نظرتون خوشحالم کردید.

  • مرتضی

    سلام آموزش بسیار عالی بود ممنون

    • کنت مونت کریستو

      خیلی ممنون بابت نظرتون، سعی میکنم بیشتر پست بزارم.