برنامه نویسی RealTime در React و Nodejs توسط Socket.io

برنامه نویسی RealTime یکی از مواردی هست که در بسیار از پروژه ها به اون نیاز داریم . قسمتهایی مثل چت آنلاین ، داشبوردهای مدیریتی ، نمایش لحظه ای اطلاعات سخت افزار ، نمایش لحظه ای قیمت ، مسابقات زنده و . . در این آموزش قصد داریم با یک مثال بسیار ساده نحوه استفاده از Socket.io از کتابخانه های اصلی جاوااسکریپت رو با هم آموزش ببینیم . 

سلام به دوستان عزیزم .

امروز با یک آموزش بسیار مهم در عین حال زیبا و پرکاربرد و صد البته اسان در خدمتتون هستم . حتما تا بحال در بسیاری از اپلیکیشین ها و سایت ها بخشهایی مثل چت آنلاین ، پشتیبانی آنلاین و یا داشبوردهای مدیریتی که اطلاعاتی رو به صورت زنده نمایش میدن . به این جور بخش ها اصطلاحا Real Time programming  گفته میشه . در فریمورک ها و زبانهای مختلف معمولا کتابخونه هایی وجود داره که وظیفه  پیاده سازی این نوع عملیات رو به عهده دارن مثلا در فریمورک Entity Framework در زبان های C# یا Vb از SignalR استفاده میشه . جاوا اسکریپت هم به نوبه خودش کتابخانه فوق العاده قدرتمندی داره به اسم Socket.io  که دقیقا همینکار رو برای ما انجام میده . در این آموزش که قصدم اینه که شما رو با یک مثال بسیار ساده با این کتابخونه آشنا کنم . البته این مثال گرچه ساده هست ولی کاملا کاربردی و قابل استفاده در پروژ های شماست . در این مثال قصد داریم اطلاعات سخت افزاری سرور رو بگیریم و در لحظه به کاربر نمایش بدیم  و همینطور یک پیام ساده از کاربر دریافت میکنیم و سرور همون پیام رو بعد از دریافت دوباره به کاربر نشون میده . پس با هم شروع میکنیم . قول میدم زیاد وقتتون گرفته نشه .

Socket.io : بزن بریم برای برنامه نویسی RealTime 

Socket.io یکی از با ارزش ترین کتابخانه ها برای کسانی هست که با Node.js کار میکنن . چرا؟ از اونجا که به شما امکان میده ارتباطات هماهنگ صرفاً در برنامه شما انجام بشه و این به معنای ارتباط در زمان واقعی هست ! مثال ساده تر بزنم ؟ بگذارید این را به روش دیگری بگم : socket.io به شما امکان می دهد مثلاً سرویس چت را در وب سایت خود پیاده کنید! امکاناتی که socket.io ارائه می دهد بسیار زیاد است و بسیار فراتر از بحث این آموزش و برای همه چیزهایی که نیاز به ارتباط فوری بین بازدید کنندگان وب سایت شما دارند کاربرد دارد .به عنوان مثال نمایش اطلاعات یک بازی آنلاین در صفحه بدون صفحه رفرش بشه. این وسوسه انگیز است ، اینطور نیست! اگر بگی اینطور نیست کلاهمون میره تو همدیگه ها ! 

socket.io چه کاری انجام می دهد؟

قبل از شروع کد ، می خواهم به سرعت ایده socket.io را توضیح بدم . این یک کتابخانه به ما اجازه میده که خیلی از عملیات ها رو بسیار ساده پیاده سازی کنیم . با این حال ، socket.io خودش مبتنی بر تعدادی از تکنیک های مختلف است که امکان برقراری ارتباط در زمان واقعی را فراهم می کنه  (و بعضی از این تکنیک ها سالهاست که وجوددارن ). مشهورترین و جدیدترین  تکنیک که درمورد  اون صحبت میکنیم WebSocket است.

WebSocket؟ آیا این یکی از اون  نوآوری های HTML5 نیست؟

نه ! این یکی از پیشرفت  های تکنولوژی جدید هست که تقریباً همزمان با HTML5 ظاهر شده ، اما HTML نیست: یک API جاوا اسکریپت است.

WebSocket یکی از امکاناتی هست که توسط همه مرورگرهای موجود پشتیبانی شده و امکان  تبادل دو جانبه همزمان بین کلاینت و سرور فراهم می کنه . منظورت از تبادل دو جانبه چیه ؟! بیایید دوباره به اصول اولیه برگردیم. ارتباطات در وب معمولاً هماهنگ نیستند. اینترنت همیشه به این صورت بوده است: کلاینت درخواست می کنه و سرور پاسخ می ده (شکل بعدی را ببینید).

خوب وقتی وب شروع شد  ما به ارتباطات واکنشی و فوری بیشتری نیاز داشتیم . به عنوان مثال ، در این تصویر ، سرور نمی تونه تصمیم بگیره که چیزی برای مشتری ارسال بکنه یا نه (برای مثال برای گفتن: "یک پیام جدید وجود دارد!"). اول  کلاینت باید که صفحه را بارگیری مجدد بکنه یا برای تماس با سرور اقدامی انجام بده و سرور این حق را نداره که به تنهایی با کلانت صحبت کنه یا اطلاعات بفرسته .

WebSocket نوآوری است که به نوعی "ارتباط" لوله ای شکل بین کلاینت و سرور باز میکنه . مرورگر و سرور به یکدیگر متصل می شوند و می توانند از طریق این لوله پیام ها را از یک جهت و جهت دیگر مبادله کنند. بنابراین از این پس سرور می تواند به تنهایی تصمیم بگیرد که مانند یک فرد بزرگتر پیامی را به کلاینت ارسال کند (شکل بعدی را ببینید)!

صبر کنیدددددددددد!!!!!!

WebSocket را با AJAX اشتباه نگیرید یک وقت !

AJAX در واقع به کلاینت و سرور اجازه می دهد تا بدون بارگذاری مجدد صفحه اطلاعات را تبادل کنند. با این حال ، در AJAX ، همیشه مشتری درخواست کننده و سرور پاسخگو هست و سرور نمی تواند خودش تصمیم بگیرد که اطلاعات را به مشتری ارسال کند. ولی این امر با WebSocket  امکان پذیر شده است!

برگردیم به Socket.io

Socket.io  امکان استفاده از WebSockets را بسیار آسان  کرده است  و از آنجا که همه مرورگرها WebSockets رو پشتیبانی نمی کنند ،  Socket.io با مدیریت مرورگر ، می تونه از سایر روشهای ارتباطی هماهنگ استفاده کنه . بهتر هست نیم نگاهی به بخش پشتیبانی مرورگر وب سایت socket.io نگاهی بندازید . می تونیم ببینیم که socket.io تعیین می کند که کدام روش ارتباطی در زمان واقعی برای هر کلاینت مناسب است:

WebSocket

Adobe Flash Socket

AJAX long polling

AJAX multipart streaming

Forever Iframe

JSONP Polling

به عنوان مثال ، اگر مرورگر از WebSocket پشتیبانی نکنه اما Flash نصب شده باشه ، socket.io برای انجام ارتباط در زمان واقعی از طریق Flash اقدام می کنه . اگر فلش هم نصب نشده باشه  ، می تونه از تکنیک های دیگری مانند AJAX Long Polling استفاده کنه (کلاینت بطور مداوم از سرور می پرسه  آیا برای  موضوع مشخص شده به روزرسانی جدیدی وجود داره یا نه ،این روش ساده ترین یا کارآمدترین روش نیست ولی کار می کنه ) یا "Forever Iframe" که مبتنی بر iframe نامرئی هست که اطلاعات به تدریج بارگیری می شوند.

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

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

Internet Explorer 5.5+ (yes, you read that correctly!).

Safari 3+

Google Chrome 4+

Firefox 3+

Opera 10.61+

Safari for iPhone and iPad

The Android browser

حالا که ما اطلاعات بیشتر ی در مورد چگونگی عملکرد socket.io می دونیم ، آیا می تونیم شروع به استفاده از آن بکنیم ؟

برای مطالعه آموزش نحوه برنامه نویسی چت آنلاین در ری اکت توسط socket.io به سایت نیلوتک در بخش اموزش مراجعه بفرمائید