نوشتن یک آپ چت با Socket.IO – بخش سوم

نوشتن یک آپ چت با Socket.IO – بخش سوم

در قسمت قبل دیدیم که چطور می توانیم کاری کنیم تا وقتی کاربری به سرور متصل شد، پیغام a user connected در کنسول چاپ شود.

حال با سکریپت زیر می توانیم برای قطع اتصال کاربر هم پیغامی چاپ کنیم، هر سوکت همچنین رویداد disconnect خاص خود را دارد:

 

 

حال اگر سرور خود را رفرش کنید، هنگام باز کردن تب جدید در مرورگر پیغام a user connected در کنسول باز می شود، حال سعی کنید آن تب را ببندید تا پیغام  a user disconnected چاپ شود.

 

رویدادها

 

ایده اصلی پست Socket.IO این است که هر رویدادی را که می خواهید ارسال و دریافت کنید با هر داده ای که می خواهید. هر شیئی می تواند به عنوان JSON  کد گذاری شود و از داده های باینری هم پشتیبانی می کند.

 

اجازه دهید کد را طوری تغییر دهیم که وقتی کاربر پیامی را تایپ کرد، سرور آن را به عنوان رویداد chat message دریافت کند. بخش سکریپت index.html باید به صورت زیر باشد:

 

 

حال در index.js رویداد chat message را چاپ می کنیم:

 

 

نبیجه حاصل باید شبیه به ویدئو زیر باشد:

 

 

هدف بعدی این است که سرور، رویداد را برای بقیه کاربران قابل مشاهده کند.

به این ترتیب برای ارسال رویداد یا event برای تمام کربران، Socket.IO به ما io.emit را می دهد:

 

 

اگر شما می خواهید پیغامی را برای همه کاربران به جز سوکت خاص ارسال کنید، از broadcast استفاده کنید:

 

 

در این مورد، به راحتی پیغامی برای همه، از جمله فرستنده، ارسال می شود.

 

 

و حالا در طرف سرویس گیرنده زمانی که رویداد chat message را دریافت می کنیم، آن را در صفحه ای که با Bootstrap درست کرده ایم اضافه کنیم. تمام کد جاوا سکریپت client-side یا سمت سرویس گیرنده به صورت زیر خواهد بود:

 

 

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

 

 

به عنوان توسعه آپ بالا، می توانید ویژگی هایی مثل زیر، خودتان به برنامه اضافه کنید:

 

  • چاپ پیامی، وقتی کاربری به سرور متصل یا قطع می شود
  • پشتیبانی از نام مستعار
  • اضافه کردن پیام های شخصی
  • نمایش کاربران آنلاین
  • نمایش نام کاربرانی که در حال تایپ کردن است، همان ویژگی که در Viber وجود دارد.

 

امیدوارم توانسته باشم نظر شما را با این ابزار جلب کنم. در آینده حتما از این نوع آموزش ها خواهیم دید. لطفا اگر جایی از کد اشکال دارد، یا نیاز به بهبود دارد، در پایین به اشتراک بگذارید 🙂