ساخت نرم افزار چت

در اینجا قصد داریم یک وب اپلیکیشن چت بسیار ساده بسازیماین اپلیکیشن جنبه کاربردی نداره و بیشتر قصد داره شما رو با نحوه کار اپلیکیشن های real-time آشنا کنهبرای این کار از کتابخانه socket.io استفاده کردیم که امکان یک ارتباط آنی و دو‌طرفه بین کلاینت(کاربرو سرور را فراهم میکند.

پس از تکمیل مراحل پروژه وب اپلیکیشن چت در نهایت ما یک وب اپلیکیشن بسیار ساده داریم که داخل مرورگر بازش میکنیم یک فیلد ورود متن داره که میتونیم پیام مورد نظر رو داخلش بنویسیم و پس از اینکه برروی send کلیک میکنیم پیام ارسال میشه که در بالای همون صفحه پیام‌های ارسالی قابل مشاهده هستاگه وب اپلیکیشن رو در چندین تب باز کنیم پیام‌های ارسالی از یک تب در تمامی دیگر تب ها قابل مشاهده است که این امر نشان میدهد socket.io چگونه پیام‌ها رو به صورت آنی به تمامی کلاینت های متصل ارسال میکند.

وب اپلیکیشن چت
وب اپلیکیشن چت

قبل از هر چیز دایرکتوری های پروژه رو بسازید، به این صورت:

ساختار دایرکتوری
وب اپلیکیشن چت

Node.js رو نصب کنید.(نحوه نصب برای سیستم عامل های مختلف در خود سایت Node.js توضیح داده شده)

برای بخش سمت کاربر یا کلاینت از فریم ورک انگولار استفاده میکنیم. AngularJS رو از اینجا دانلود و در پوشه lib در دایرکتوری Client کپی کنید.

ساخت سرور وب اپلیکیشن چت

وارد دایرکتوری Server بشید و در خط فرمان این دستور را اجرا کنید:

این دستور یک پروژه جدید node ایجاد میکنهتمام جزئیات و پکیج های مورد نیاز برای نصب در فایلی به نام package.json قرار میگیرد.

پس از اجرای دستور سؤالاتی از شما میپرسه مثل نام پروژه، نسخه و .. .

در نهایت محتوای فایل package.json چیزی شبیه این خواهد بود:

 

نصب پکیج های مورد نیاز(dependencies)

socket.io یک کتابخانه جاوااسکریپت جهت برقراری ارتباط لحظه ای(real-time) است که در وب اپلیکیشن ها استفاده میشود. Socketio امکان ارتباط دو‌طرفه و لحظه به لحظه بین وب کلاینت و سرور فراهم میکنه.

Express یک فریم ورک وب برپایه Node.js میباشدمجموعه‌ای از امکانات رو جهت توسعه وب و اپلیکیشن موبایل در اختیارمان میگذاردبه عنوان مثال میتونه به ریکوئست HTTP پاسخ بده و متناسب با اون یک صفحه HTML رو در خروجی به کاربر نمایش بده.

برای نصب socket.io و express در خط فرمان در پوشه Server این دستورات را اجرا کنید:

 

 

پس از اجرا دستورات بالا این دو مورد نصب شده و به قسمت dependencies فایل package.json افزوده میشوند:

 

حالا یک سرور برای وب اپلیکیشن چت برروی پورت ۳۰۰۰ میسازیم که پس از دریافت ریکوئست صفحه چت رو به مرورگر بر میگرداند.

مراحل کار به این صورته:

یه کانکشن سوکت میسازیم.(Initialize socket connection)

منتظر میمونیم که کانکشن سوکت برقرار شه(Event connection)

در صورتی که ارتباط یک کلاینت قطع بشه این رویداد به سرور منتشر میشه (disconnect event)

معرفی توابع socket.on() و io.emit():

  • socket.on منتظر یک رویداد میماند و هنگامی که یک رویداد اتفاق افتاد تابعی که ما برایش مشخص کرده‌ایم را اجرا میکند.

  • io.emit پیام مورد نظر را به تمام سوکت های متصل به آن ارسال میکند.

توابع گفته شده این صورت مورد استفاده قرار میگیرند:

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

  • وقتی یک کاربر(کلاینتمتصل شد در کنسول یک پیغام نمایش میدهد.

  • منتظر Event(رویداد) “chat message ” میمونه و پس از اینکه رویداد اتفاق افتاد پیام مورد نظر رو به تمام سوکت های متصل به آن ارسال میکند.

  • وقتی یک کاربر ارتباطش رو قطع میکنه پیغامی مبنی بر قطع ارتباط در کنسول نمایش داده میشود.

محتوای فایل server.js به صورت زیر است:

 

ساخت کلاینت یا بخش سمت کاربر وب اپلیکیشن چت

فایل style.css رو در دایرکتوری client در پوشه css و فایل app.js را در دایرکتوری Client پوشه js بسازید.

همچنین فایل index.html را قبلاً در دایرکتوری Client ساخته ایم.

فایل index.html :

این صفحه‌ای هست که کاربر در مرورگر میبینه و میتونه چت کنهکنه.

باید socket.io-client و angular.js رو وارد اسکریپت HTML کنیم:

فایل socket.io رو از اینجا دانلود کنید و آدرس آن را در قسمت src قرار دهیدهمچنین آدرس فایل angular.js را که قبلاً دانلود کردیم در قسمت src باید قرار دهیم.

 

  فایل HTML در نهایت به این صورت خواهد بود:

 

محتویات فایل css/style.css نیز به این صورت است:

 

فایل js/app.js :

در این فایل ما برنامه سمت کلاینت وب اپلیکیشن چت رو با استفاده از فریم ورک انگولار مینویسیم.

معرفی توابع socket.on() و socket.emit():

  • socket.on منتظر یک رویداد مشخص میماند و به محض اینکه آن رویداد اتفاق افتاد تابعی که ما مشخص کردیم رو اجرا میکند.

  • Socket.emit یک پیام را با نام رویداد مشخصی ارسال میکند.

نحوه استفاده از دو تابع فوق به این صورت میباشد:

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

و هنگامی که سوکت پیامی را دریافت کرد آن را نمایش میدهد.

در نهایت فایل app.js به این صورت خواهد بود:

 

اجرای اپلیکیشن

در خط فرمان وارد دایرکتوری Server شوید (همانجایی که انجایی که server.js هستو سرور رو با این دستور راه اندازی کنیدراه اندازی کنید:

 

سرور برروی پورت ۳۰۰۰ راه اندازی میشه، مرورگر رو باز کنید و وارد این راه اندازی میشه، مرورگر رو باز کنید و وارد این url بشید:

داخل یه تب دیگه هم، همین url رو باز کنید.

یک متن وارد کنید و برروی send بزنیدهمونطور که مشاهده میکنید پیام در هر دو تب نمایش داده میشود(سرور پیام را به صورت آنی به تمام کلاینت های متصل به سوکت ارسال میکند).

 

وب اپلیکیشن چت real-time بسازیم
به این مطلب امتیاز بدهید 🙂

Comments (0 comments)

دیدگاهتان را بنویسید

3 × چهار =