آموزش کار با Socket.IO به همراه Nodejs و React - قسمت 2 - کدنویسی سمت کلاینت



visibility  
mode_comment   ۲

آموزش کار با Socket.IO به همراه Nodejs و React - قسمت 2 - کدنویسی سمت کلاینتدر این قسمت میخوام مطلب آموزش کار با Socket.IO به همراه Nodejs و React رو ادامه بدم. در قسمت قبل توضیحاتی در مورد WebSocket و نحوه استفاده از Socket.IO دادیم و کدنویسی سمت سرور رو به پایان رسوندیم.

در این قسمت میخوایم سراغ کلاینت بریم و نحوه اتصال به سرور Socket.IO رو با هم یاد بگیریم و بتونیم اپلیکیشن خودمون رو با موفقیت به پایان برسونیم و بتونیم دما رو هر 10 ثانیه یکبار بروز رسانی کرده و به کاربر نمایش بدیم.

خب تا اینجای کار کارای مربوط به سمت سرور رو انجام دادیم و دمای فعلی شهر شیراز رو با استفاده از Dark Sky API به دست آوردیم. طول و عرض جغرافیایی که در جلسه قبل برای API قرار دادیم، موقعیت شیراز رو مشخص میکنه و با اینکار این API نیز اطلاعات آب و هوایی اون موقعیت رو در اختیارمون قرار میده.

حالا که اطلاعات رو داریم، باید بقیه کارها رو به React بسپریم. ما میتونیم از هر Client ای که بخوایم برای استفاده از اطلاعات Socket.IO استفاده کنیم ولی در این مثال میخوایم نحوه کار با React رو آموزش بدیم.

اگر اطلاعاتی در مورد React ندارید برای شروع میتونین این آموزش رو مطالعه کنید. برای کار با React در این پروژه از ابزار create-react-app استفاده میکنیم تا کار ما رو ساده‌تر کنه و سریعتر بتونیم سمت کلاینت رو مدیریت کنیم. برای اینکار ابتدا create-react-app رو با استفاده از دستور زیر بصورت global یا سراسری در سیستم خودتون نصب کنید:

حالا در محل مورد نظرتون که میخواید اطلاعات کلاینت رو قرار بدین، دستور create-react-app socket-io-client رو اجرا کنید. من این دستور رو در دایرکتوری socket-io-server اجرا میکنم تا همه کدها پیش هم باشند. زمانی که شما این دستور رو اجرا میکنید، یک دایرکتوری به نام socket-io-client ساخته میشه و ساختار اولیه پروژه ساخته میشه و پیش‌نیازهای مربوطه نیز دانلود و نصب میشن و همه چیز برای کدنویسی آماده میشه.

حالا در command line وارد مسیر socket-io-client بشید و با استفاده از دستور زیر ابزار socket.io-client رو نصب کنید:

با این ابزار میتونیم به سرور Socket.IO متصل بشیم و اطلاعات مورد نظر رو از اون دریافت کنیم. برای اینکه کار در سمت کلاینت ساده‌تر بشه، فقط کدها رو در فایل App.js موجود در دایرکتوری src تغییر میدیم. فایل App.js رو باز کنید و هر چیزی که در اون هست رو پاک کرده و کدهای زیر رو در اون قرار بدین:

همونطور که میبینید در ابتدا ابزار socket.io-client رو وارد پروژه کردیم. در constructor مقادیر اولیه برای state رو قرار دادیم. endpoint رو برابر با http://127.0.0.1:4001 قرار دادیم. مقدار endpoint آدرس سروری که در جلسه قبل ساختیم و قراره به اون متصل بشه و اطلاعات رو دریافت کنه رو مشخص میکنه. response هم که به معنی جوابی هست که از سرور دریافت شده و در ابتدا اون رو false قرار میدیم که یعنی چیزی رو از سرور نگرفتیم.

درون componentDidMount مربوط به کامپوننت React با استفاده از ابزار socket.io-client به endpoint مورد نظر متصل شدیم و اون رو در متغیر socket ذخیره کردیم. حالا میتونیم کارهای مورد نظرمون رو با این socket انجام بدیم. میبینید که با استفاده از متد on یک event listener برای socket قرار دادیم و هر زمان که رویداد FromAPI رخ میده، callback مربوط به اون فراخوانی میشه و اطلاعات یا data دریافتی از سرور درون ویژگی response در state قرار میگیره.

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

در نهایت در متد render اگر response داشته باشیم اون رو نمایش میدیم و اگر هنوز چیزی از سرور دریافت نشده باشه، متن Loading... نمایش داده میشه.

خب حالا برای اینکه خروجی رو در مرورگر مشاهده کنید، باید هم سرور بالا باشه و هم اینکه با استفاده از npm start سرور Development مربوط به React رو بالا بیارید تا بتونین خروجی رو در مرورگر و در پورت 3000 ببینید.

خب در ابتدا وارد دایرکتوری socket-io-server بشید و دستور node app.js رو اجرا کنید تا سرور راه‌اندازی بشه. حالا یک command line دیگه باز کنید و وارد دایرکتوری socket-io-client بشید و دستور npm start رو اجرا کنید و منتظر بمونین تا بصورت اتوماتیک آدرس http://localhost:3000 باز بشه.

در نهایت خروجی بصورت زیر خواهد بود:

همونطور که میبینید دمای فعلی در شیراز 2.47 سانتی‌گراد هست و هر 10 ثانیه یکبار نیز بروز رسانی میشه. پس همونطور که میبینید اطلاعات بدون اینکه نیاز به رفرش کردن صفحه باشه توسط Socket.IO دریافت شده و نمایش داده میشن.

در مثالهای بالا سرور کلاینت و express از هم جدا بودند و دلیلش هم این بود که در حالت Development بودیم و میخواستیم کدها رو تغییر بدیم و خروجی رو در مرورگر تست کنیم. زمانی که کارتون در محیط Development تموم شد و خواستید اون رو در محیط Production استفاده کنید، باید یک خروجی بهینه شده از کدهای کلاینت تهیه کنید و تنظیمات رو در express طوری قرار بدین که در production از این فایلهای بهینه شده استفاده بکنه.

برای اینکار در ابتدا در command line وارد دایرکتوری socket-io-client میشیم و دستور npm run build رو اجرا میکنیم تا create-react-app برامون خروجی بهینه‌سازی شده رو به وجود بیاره. این فایلهای بهینه شده در دایرکتوری build قرار داده میشن و حالا میتونین در سرور express از اونا استفاده کنید. برای اینکار کدهای درون فایل app.js رو بصورت زیر تغییر میدیم:

همونطور که میبینید ماژول path رو وارد پروژه کردیم تا بتونیم خروجی build شده رو به express معرفی کنیم. اگر NODE_ENV برابر با production باشه به این معنی هست که سرور باید در حالت production بالا بیاد و در این حالت از express.static استفاده میکنیم و آدرس فایلهای بهینه‌سازی شده رو به اون میدیم. در حالت Development هم مهم نیست که چه چیزی نشون داده بشه و همون مسیر index رو قرار میدیم.

با کارهای بالا اگر در command line وارد دایرکتوری socket-io-server بشید و دستور export NOVE_ENV=production && node app.js رو اجرا کنید، سرور در حالت production بالا میاد و اگر در مرورگر آدرس http://localhost:4001 رو باز کنید، اپلیکیشن مانند قبل کار میکنه با این تفاوت که در حالت production هست و همه چیز بصورت minify و بهینه‌سازی شده هستند.

به همین راحتی تونستیم بین سرور و کلاینت ارتباط برقرار کنیم و با وجود اینکه این مثال خیلی ساده بود، ولی به ما دید کلی در مورد کار با Socket.IO میده و میتونیم از اون در پروژه‌های بزرگتر با کارایی بیشتر استفاده کنیم.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
7Learn Experts
comment دیدگاه کاربران
رضا رومیانی replyپاسخ

سلام چرا کارنمیکنه . دما تو ترمینال node js نشون میده .ولی تو react فقط loading نشون میده.

محمد اسفندیاری

مطمئن هستید که کدها به سمت کلاینت ارسال میشه؟ console رو چک کنید که اروری نداشته باشه و در componentDidMount یک breakpoint قرار بدین و ببینید که اطلاعات ارسال میشه یا خیر.

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :