campaign-experts

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



visibility  
mode_comment   ۲

در این قسمت و قسمت‌های بعد میخوام کار با Socket.IO رو بهتون آموزش بدم و کاربردهای اون رو با هم بررسی کنیم. در انتها یک اپلیکیشن ساده و Real-time با استفاده از Socket.IO و Nodejs و React رو به وجود خواهیم آورد.

در ابتدا مسائل مقدماتی رو توضیح خواهیم داد و کم کم همه موارد رو آموزش میدیم. با مطالعه این مطلب یاد می‌گیرید که WebSocket چی هست و چطور میتونین از اون به همراه Nodejs و React استفاده کنید.

پیش‌نیاز‌ها

برای اینکه این مطلب رو به خوبی متوجه بشید شما باید آشنایی مقدماتی با Javascript و Nodejs و Express داشته باشید.

شما باید Nodejs رو بر روی سیستم خودتون نصب کنید. برای نصب میتونین این راهنما رو مطالعه کنید.

برای ساخت اپلیکیشن این مطلب از Dark Sky API استفاده میکنیم. این API اطلاعاتی در مورد آب و هوا در اختیارتون قرار میده و ما میخوایم اطلاعات مربوط به دمای هوا رو از این API دریافت کرده و اون رو در اپلیکیشن خودمون نمایش بدیم. پس به یک API key احتیاج داریم و برای این کار در سایت مورد نظر بصورت رایگان ثبت‌نام کنید و Secret key خودتون رو به وجود بیارید. در ادامه در مورد نحوه استفاده از این API بهتون توضیح خواهیم داد.

پروتکل WebSocket

WebSocket یک پروتکل ارتباطی اینترنتی هست که یک کانال ارتباطی تمام دوطرفه یا full-duplex رو بر روی یک ارتباط TCP در اختیارتون قرار میده. با استفاده از WebSocket، کلاینت و سرور میتونین بصورت real-time با هم ارتباط برقرار کنند و این ارتباط تقریبا شبیه به تماس تلفنی رفتار میکنه. زمانی که این ارتباط برقرار میشه کلاینت بدون اینکه نیاز به رفرش کردن صفحه باشه، میتونه اطلاعات رو از سرور دریافت کنه. در سوی دیگر سرور نیز میتونه اطلاعات رو از کلاینت دریافت کنه و همه این کارها در همون connection اتفاق میوفته و یک ارتباط رفت و برگشتی هست. یعنی هر لحظه هر کدام میتونن اطلاعاتی رو دریافت و ارسال کنند و طرف مقابل اونا رو بگیره.

چیزی که کار با WebSocket رو لذت‌بخش‌تر میکنه اینه که شما میتونین بصورت event-driven در سمت سرور و کلاینت از اون استفاده کنید. اگر این سوال توی ذهنتون هست که چطور میتونین از این تکنولوژی در اپلیکیشن‌های Node خودتون استفاده کنید، پاسخ اون خیلی ساده هست و اونم استفاده از ابزار Socket.IO هست که یکی از معروفترین ابزارها برای کار با WebSocket در Nodejs می‌باشد.

حالا که اطلاعات مقدماتی در مورد WebSocket به دست آوردید، میخوایم کار با Socket.IO رو شروع کنیم.

آماده‌سازی محیط کار

برای شروع کار یک دایرکتوری بنام socket-io-server در Desktop به وجود میارم و در command line به مسیر اون میرم و دستور npm init -y رو اجرا میکنم تا فایل package.json ساخته بشه.

برای این پروژه به ابزارهای زیر احتیاج داریم:

  • socket.io: ابزار اصلی این پروژه هست و با استفاده از اون میخوایم قابلیت Real-time بودن رو به اپلیکیشن اضافه کنیم.
  • express: با استفاده از این ابزار سرور رو به وجود میاریم
  • axios: از این ابزار نیز برای ارسال درخواست‌های HTTP و دریافت اطلاعات از Dark Sky API کمک میگیرم.

برای نصب ابزارهای بالا با استفاده از npm دستور زیر رو در command line اجرا میکنم:

شروع به کدنویسی

ایده‌ای که در ساخت این پروژه از اون استفاده شده خیلی ساده هست و اونم اینه که دمای محلی که مورد نظرمون هست مثل شیراز رو نشون بدیم و هر 10 ثانیه یکبار نیز اون رو بصورت Real-time به‌روز رسانی کنیم.

شاید این بنظرتون برسه که میتونین در componentDidMount مربوط به React یک setInterval قرار بدین و هر 10 ثانیه یکبار اطلاعات مربوط به Dark Sky API رو دریافت کنید و به کاربر نشون بدین. بله این امکان وجود داره که این کار رو انجام بدیم ولی راه بهتری وجود داره و اونم استفاده از Socket.IO هست.

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

در این مثال چون ما میدونیم که هر 10 ثانیه یکبار قراره اطلاعات رو بگیریم و نشون بدیم میتونیم اصلا از Socket.IO استفاده نکنیم ولی شما حالتی رو در نظر بگیرید که مثلا میخوایم وقتی اطلاعات مربوط به دما تغییر کرد این کار رو انجام بدیم و در این حالت دیگه کلاینت از این اطلاعات خبری نداره و از سمت سرور باید به اون اطلاع داده بشه. ولی همونطور که در ابتدا هم گفتیم برای سادگی این آموزش میخوایم این Application رو با استفاده از Socket.IO به وجود بیاریم.

ما میتونستیم اصلا از React هم استفاده نکنیم ولی React رو به این آموزش اضافه کردیم تا ببینیم که به راحتی میتونیم از React در کنار Socket.IO استفاده کنید.

یک فایل بنام app.js به وجود بیارید و کدهای زیر رو در اون قرار بدین تا سرور رو به وجود بیاریم:

همونطور که میبینید در کدهای بالا کار خاصی رو انجام ندادیم. ابزارهای مورد نیازمون رو وارد پروژه کردیم  و express رو فراخوانی کردیم و در متغیر app قرار دادیم و با استفاده از createServer مربوط به ماژول http یک سرور رو به وجود آوردیم و app رو به اون پاس دادیم. در نهایت در خط آخر socketIo رو فراخوانی کردیم و server رو به اون پاس دادیم. با این کار ساده Express رو به Socket متصل کردیم و حالا میتونیم از قابلیتهای اون استفاده کنیم.

همونطور که میبینید یک route به نام index نیز وارد کرده و استفاده کردیم. برای ساخت این مسیر یک دایرکتوری به نام routes به وجود آورده و فایل index.js رو در اون میسازیم. کدهای زیر رو در این فایل قرار میدیم:

به همین سادگی.

Socket.IO چطوری کار میکنه؟

اولین و مهمترین متدی که در Socket.IO با اون کار میکنید، متد On() هست. این متد 2 آرگومان رو میگیره که اولی نام رویداد هست و دومی هم یک callback که زمانی که این رویداد رخ میده، اجرا میشه. یک رویداد بنام connection وجود داره که هر زمان که یک کاربر میخواد به سرور متصل بشه، این رویداد رخ میده و callback اون فراخوانی میشه و یک شئ socket در اختیار callback قرار میگیره که میتونین با استفاده از اون اطلاعاتی رو به کاربر توسط Socket ارسال کنید.

همونطور که قبلا هم گفته شد میخوایم اطلاعات مربوط به دما رو هر 10 ثانیه یکبار دریافت کرده و در اختیار کاربر قرار بدیم. ما میتونیم در callback یک setInterval قرار بدیم و هر 10 ثانیه یکبار تابع getApiAndEmit رو فراخوانی کنیم و اطلاعات رو از Dark Sky API دریافت کرده و اونا رو به سمت کلاینت ارسال کنیم. برای اینکار بصورت زیر عمل میکنیم:

همونطور که میبینید هر کاربر وقتی به سرور متصل میشه، متن New client connected در console چاپ میشه و در آخر هم وقتی ارتباط همین کاربر با سرور disconnect میشه، متن Client disconnected در console چاپ خواهد شد. در کد بالا یک setInterval قرار داده شده که هر 10 ثانیه یکبار متد مورد نظر فراخوانی میشه. اگر همین کاربر یکبار دیگه متصل بشه و از قبل interval وجود داشته باشه، در ابتدا interval قبلی پاک میشه و یک مورد جدید ساخته میشه تا Performance برنامه به مشکل برنخوره.

حالا میتونیم از متد listen مربوط به server استفاده کنیم و کاری کنیم که اپلیکیشن به incoming connection گوش بده. برای اینکار بصورت زیر عمل میکنیم:

تابع getApiAndEmit رو یادتون میاد؟ این تابع socket رو به عنوان آرگومان دریافت میکنه. یک socket چیزی بیشتر از یک کانال ارتباطی بین کلاینت و سرور نیست. ما میتونیم هر کاری که میخوایم درون این تابع انجام بدیم و در زمان مورد نظر اطلاعاتی رو emit کنیم تا کلاینت به اون دسترسی داشته باشه. کدهای زیر رو برای این تابع قرار میدیم:

همونطور که میبینید این تابع socket رو به عنوان آرگومان دریافت میکنه و در ابتدا با استفاده از axios سعی میکنه اطلاعات مربوط به آب و هوای نقطه مورد نظر رو دریافت کنه. یادتون نره که بجای PUT_YOUR_API_KEY_HERE مقدار Secret Key که از سایت Dark Sky API دریافت کرده‌اید رو قرار بدین. در نهایت هم دمای مربوط به نقطه مورد نظر رو emit کردم و برای اون نام FromAPI رو در نظر گرفتم و در سمت کلاینت میتونیم به این نام listen کنیم و اطلاعات مورد نظر رو بدست بیاریم.

اطلاعات emit شده در سرور میتونه در کلاینت مورد استفاده قرار داده بشه و در این مطلب قصد داریم از React به عنوان کلاینت استفاده کنیم.

پس با همه صحبت‌های بالا کدهای فایل app.js بصورت زیر خواهد بود:

ما میتونیم دستور node app.js رو در command line اجرا کنیم و مطمئن بشیم که سرور درست کار میکنه یا خیر. خروجی بصورت زیر خواهد بود:

همونطور که میبینید سرور بر روی پورت 4001 بالا اومده و مطمئن میشیم که سرور به درستی کار میکنه.

تا اینجای کار سرور رو راه انداختیم و کارهای مربوط به Socket.IO در سمت سرور رو انجام دادیم. در قسمت بعد در مورد سمت کلاینت توضیح خواهیم داد و این موضوع رو به پایان خواهیم رساند و اپلیکیشن خودمون رو به وجود خواهیم آورد.

comment دیدگاه کاربران
هادی replyپاسخ

سلام
ببخشید برای نشون دادن تیکه کد توی مقاله از پلاگین خاصی استفاده میکنید یا اینکه خودتون کدشو زدید ؟ میخواستم تو سایتم تیکه کد نشون بدم . اگه راهنماییم کنید ممنون میشم. خیلی ممنون از سایت بسیار عالیتون.

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

دوست عزیز ابزارهای زیادی برای Syntax highlighting وجود داره….
شما میتونین از دو ابزار زیر استفاده کنید:
https://prismjs.com/
https://highlightjs.org/

برای وردپرس هم میتونین از این پلاگین ها استفاده کنید
https://www.sktthemes.net/wordpress-plugins/syntax-highlighter-wordpress-plugins/

موفق باشید

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

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