پیاده‌سازی وب‌سوکت‌ها با لاراول

برای یه مدت طولانی در تلاش بودم که بتونم برای کاربران وب‌سایت‌ها و وب‌اپلیکیشن‌هایی که پیاده‌سازی کردم «وب‌پوش نوتیفیکیشن» بفرستم. البته کار سختی نیست اگر بخوایم از سرویس‌های مخصوص این کار مثل فایربیس گوگل، ‌Pusher و نمونه ایرانی اون پوشه استفاده کنیم. ولی من نیازهای بیشتری داشتم که می‌خواستم با استفاده از وب‌سوکت‌ها برطرفشون کنم. پس دست‌به‌کار شدم و دنبال راهکار مناسب این کار گشتم و به نتایج خوبی هم رسیدم که می‌خوام با شما در میون بزارم.

با توجه به گستردگی موضوع مورد بحثمون یعنی وب‌سوکت‌ها، مجموع مواردی که می‌خوام در موردشون صحبت کنم نیاز به مقالات بیشتری داره که سعی می‌کنم در فواصل کوتاهی اون‌ها رو بنویسم و در این‌جا منتشر کنم.

برای استفاده از این مطلب باید با زبان برنامه‌نویسی ‌php و فریم‌ورک محبوبش لاراول در حد حرفه‌ای کار کرده‌باشید و همچنین این نکته رو درنظر داشته باشید که چون استفاده از وب‌سوکت‌ها در سمت مرورگر کاربر هم اتفاق می‌افته باید با زبان جاوااسکریپت هم آشنایی کافی داشته‌باشید.

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

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

وب سوکت چیست؟

برای تعریف وب‌سوکت از ویکی‌پدیای انگلیسی کمک می‌گیرم.

وب‌سوکت یک پروتکل ارتباطی کامپیوتری است که کانال های ارتباطی دو طرفه همزمان را از طریق یک اتصال شبکه (tcp) فراهم می کند.

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

برای برقراری این ارتباط دو‌طرفه به‌جز اینکه باید در سمت کلاینت درخواست بازشدن ارتباط رو به‌همراه مقداری اطلاعات شناسایی برای سرور بفرستید، باید یک وب‌سوکت سرور هم راه‌اندازی کنید تا این ارتباط دوطرفه تکمیل بشه و دقیقا در این قسمت کار نیاز داریم که از یک سرویس‌دهنده مثل فایربیس استفاده کنیم. بعد از برقراری ارتباط، باید برای ارسال اطلاعات به کاربر درخواستتون رو به وب‌سوکت سرور ارسال کنید و ازش بخواید که اطلاعات رو در کانال ارتباطی که با کاربر دارید ارسال کنه و در سمت کلاینت اطلاعات رو دریافت کنید.

لاراول وب‌سوکت‌سرور

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

کتابخانه Laravel Websockets در واقع سرویس‌دهنده Pusher رو در داخل پروژه خودتون شبیه‌سازی می‌کنه و شما از هر کتابخانه سمت کلاینت که با pusher کار می‌کنه می‌تونید برای برقراری ارتباط استفاده کنید که البته پیشنهاد من Laravel Echo است که به وقتش باهاش آشنا می‌شیم.

مطمئنم که در این مرحله همه شما پروژه لاراولی خودتون رو راه‌اندازی کردین و حالا وقتشه که بریم سراغ نصب کتابخانه با استفاده از کامپوزر

composer require beyondcode/laravel-websockets

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

php artisan vendor:publish --provider=&quotBeyondCode\LaravelWebSockets\WebSocketsServiceProvider&quot

و با استفاده از دستور زیر میگریشن‌ها رو اجرا می‌کنیم

php artisan migrate 

وقتشه که بریم سراغ تنظیمات کتابخونه که بعد از اون بتونیم وب‌سوکت سرور رو راه‌اندازی کنیم

اگر فایل websockets.php که حالا در دایرکتوری config قرارداره رو باز کنید، می‌تونید قسمت‌های مختلف تنظیمات این کتابخونه رو ببینید. به‌نظرمن و برای شروع فقط دوتا از این آیتم‌‌ها رو باید بشناسیم که در ادامه بهتون می‌گم.

اولی یک آرایه به نام dashboard که فقط یک سطر به اسم port داخلش وجود داره و مقدار اون در واقع پورتی هست که قراره سرور روی اون اجرا بشه

گزینه دوم هم یک آرایه به نام app که هر سطرش آرایه‌ای از اطلاعات مربوط به یکی از وب‌سایت‌ها یا اپلیکیشن‌های شماست که قراره با این سرور ارتباط داشته باشن. در واقع این سرور قابلیت راه‌اندازی چندین کانال ارتباطی رو داره. هر کدوم از این کانال‌ها (یا اپلیکیشن‌ها) یک شناسه یکتا نیاز دارن که در خونه id ذخیره میشه و همچنین یک اسم، یک کلید و یک رمز احتیاج دارن که به ترتیب در خونه‌های name, key, secret ذخیره میشن. از اونجایی که این سرور قراره جایگزین سرویس‌دهنده pusher باشه میتونید از متغیرها داخل فایل env که به‌طور پیش‌فرض هنگام نصب لاراول اونجا هستن و با پیشوند pusher_ شروع میشن استفاده کنید. این که چه مقادیری برای این متغیرها انتخاب می‌کنید اهمیتی نداره و فقط مهمه که برای هر اپلیکیشن یکتا باشن و قبلا ازشون استفاده نشده باشه و همچنین با متغیرهایی که در مرحله بعدی توضیح می‌دم یکی باشن

خوب مجددا میگم چون این کتابخونه قراره جایگزین سرویس‌دهنده pusher باید کتابخونه pusher مخصوص زبان php رو هم به پروژه ضافه کنیم که با دستور زیر به سادگی انجام میشه

composer require pusher/pusher-php-server

خوب در حال حاضر دو تا کار اساسی دیگه هم باید انجام بشه

مورد اول اینکه داخل فایل env مقدار متغیر زیر رو تنظیم کنید. با این‌کار به لاراول می‌فهمونید که می‌خواید از pusher برای ارسال و دریافت اطلاعات در وب‌سوکت‌ها استفاده کنید.

BROADCAST_DRIVER=pusher

مورد دوم هم انجام تنظیمات مربوط به سرویس‌دهنده pusher در لاراوله که چون ما خودمون این سرور رو راه‌اندازی کردیم همون تنظیمات قبلی رو برای id, name, key و secret قرار می‌دیم و فقط آدرس و پورت دسترسی به سرویس‌دهنده رو بهش اضافه می‌کنیم. این موارد داخل فایل broadcasting.php در دایرکتوری config و در قسمت pusher قرار داره که باید به شکل زیر تنظیم بشه

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => true,
        'host' => '127.0.0.1', //آدرس دسترسی به وب‌سوکت‌سرور
        'port' => 6001, //پورت دسترسی به وب‌سوکت‌سرور
        'scheme' => 'http'
    ],
],

تا الان تمامی تنظیمات لازم برای راه‌اندازی وب‌سوکت‌سرور رو انجام دادیم و با استفاده از دستور زیر می‌تونیم درخواست شروع به‌کار سرور رو برای لاراول ارسال کنیم.

php artisan websockets:serve

در این بخش تونستیم با استفاده از کتابخونه Laravel Websockets یک سرویس‌دهنده مشابه pusher رو در اپلیکشین لاراولی خودمون راه‌اندازی کنیم. می‌دونم هنوز هیچ استفاده‌ای از این وب‌سوکت‌سرور نکردیم ولی در بخش بعدی به طور کامل شرح می‌دم که چطور یک کانال ارتباطی ایجاد کنیم و در سمت کلاینت بوسیله کتابخونه Laravel Echo به اون کانال ارتباطی متصل بشیم. پس در بخش بعدی منتظرتون هستم

حتما اگر سوالی دارید یا ابهام و اشتباهی در مطلبی که نوشتم وجود داره از طریق بخش نظرات با من در ارتباط باشید.

استفاده از محتوای مطلبی که نوشتم کاملا آزاد و رایگانه و می‌تونید به دلخواه خودتون با هر نامی اون رو منتشر کنید.