برنامه نویسی 14 بازدید

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

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

گفتگوی زنده

ما برای راه‌اندازی بخش گفتگوی اپلیکیشن خود از خدمات CometChat Pro استفاده می‌کنیم. CometChat Pro یک API ارتباطی قدرتمند است که امکان افزودن قابلیت‌های گفتگو را به اپلیکیشن فراهم می‌سازد. این API با قابلیت یکپارچه‌سازی آسان و مستندات منظم به شما کمک می‌کند تا ویژگی گفتگوی زنده را با نوشتن چند خط کد به اپلیکیشن خود اضافه کنید. به این منظور ابتدا باید یک حساب رایگان در این وب‌سایت (+) بسازید.

ما در این راهنما علاوه بر CometChat از فناوری‌های زیر نیز استفاده خواهیم کرد:

  • Create React App
  • react-chat-widget
  • Express
  • Bootstrap
  • Axios
  • react-md (spinner component only)

پیشنهاد ما این است که تا انتهای این راهنما همراه باشید تا گام‌به‌گام اپلیکیشن مورد نظر خود را بسازیم، اما اگر بیش از این شتاب دارید، می‌توانید کد کامل این مقاله را در این صفحه گیت‌هاب (+) ملاحظه کنید.

ایجاد اپلیکیشن CometChat

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

برای ایجاد یک اپلیکیشن CometChat باید به داشبورد CometChat بروید و روی آیکون + کلیک کنید. ما اپلیکیشن خود را react-chat-widget می‌نامیم، اما شما می‌توانید اپلیکیشن خود را با هر نامی که دوست دارید ایجاد کنید.

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

از آنجا که ما احتمالاً مشتریان زیادی خواهیم داشت، برای هر مشتری که به گفتگو وصل می‌شود، باید به صورت دینامیک یک کاربر CometChat ایجاد کنیم. با این وجود از آنجا که تنها یک کارمند وجود خواهد داشت، می‌توانیم یک Agent را از پیش در داشبورد ایجاد کنیم.

به این منظور در داشبورد به برگه Users بروید و روی Create User کلیک کنید:

گفتگوی زنده

برای ID کاربر مقدار ecommerce-agent را وارد کنید و برای نام کارمند نیز مقدار Demo Agent را وارد کنید. اگر قصد دارید از مراحل این راهنما پیروی کنید، از همین نام‌ها استفاده کنید، چون در غیر این صورت در ادامه با مشکل مواجه خواهید شد. ID کاربر را یادداشت کنید، زیرا در ادامه به آن ارجاع خواهیم داد.

پیش از آن که از داشبورد خارج شوید و به کدنویسی بپردازید، باید یک کلید دسترسی کامل CometChat نیز بسازید. در همین صفحه روی برگه API Keys و سپس روی Create API Key کلیک کنید:

گفتگوی زنده گفتگوی زنده

ما کلید خود را react-chat-api نامیده‌ایم، اما نام آن اهمیت چندانی ندارد. کلید API و ID اپلیکیشن خود را نیز مانند ID کاربر در جایی یادداشت کنید، چون در ادامه لازم خواهد شد.

راه‌اندازی اکسپرس

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

  1. کاربر CometChat را با استفاده از کلید دسترسی کامل بسازد.
  2. توکن‌های احراز هویت را بازگشت دهد (در ادامه بیشتر توضیح خواهیم داد)
  3. لیستی از کاربران CometChat برای استفاده بعدی در داشبورد بازگشت دهد.

اینک نوبت آغاز کار است. ابتدا یک دایرکتوری خالی جدید برای اپلیکیشن اکسپرس خود ایجاد می‌کنیم و دستور npm init -y را اجرا می‌کنیم:

mkdir react-express-chat-widgetcd react-express-chat-widgetnpm init –y

سپس اکسپرس و axios را نصب می‌کنیم:

npm install express axios

سپس در فایلی به نام server.js کد زیر را وارد می‌کنیم:

در فایل فوق موارد زیر وجود دارند:

  • اطلاعات هویتی اپلیکیشن و ID کاربر پاسخگو که قبلاً ایجاد کردیم ذخیره می‌شوند.
  • UIRL مربوط به API-ی CometChat برای دسترسی راحت‌تر تعریف می‌شود.
  • یک شیء headers که با استفاده از appID و apiKey ایجاد می‌شود. ما این هدر را به همراه هر درخواست CometChat ارسال می‌کنیم.

در همین فایل اکنون یک مسیر تعریف می‌کنیم تا ایجاد کاربران جدید CometChat را مدیریت کنیم. برای ایجاد یک کاربر جدید باید یک درخواست POST را با UID و نام کاربر ارسال کنیم.

در این راهنما، نام یکسانی را برای همه مشتریان به صورت hard-code می‌نویسیم، یعنی همه مشتری‌ها را «customer» می‌نامیم، اما UID آن‌ها باید یکتا باشد. برای UID می‌توانیم از تابع POST برای ایجاد ID-های یکتا استفاده کنیم.

کد زیر را به فایل server.js اضافه کنید:

زمانی که این مسیر فراخوانی شود، اکسپرس کارهای زیر را انجام می‌دهد:

  • یک درخواست POST به آدرس https://api.cometchat.com/v1/users با headers صحیح و اطلاعاتی در مورد کاربر جدید ارسال می‌کند.
  • توکن احراز هویت را برای کاربر جدید واکشی می‌کند.
  • و در نهایت آن را به فراخواننده بازمی‌گرداند.

ما همچنین یک تابع به نام requestAuthToken می‌سازیم تا به واکشی کردن توکن احراز هویت کمک کند. سپس در همان فایل یک مسیر احراز هویت می‌سازیم که آن را برای ایجاد توکن جهت کاربران بازگشتی فراخوانی خواهیم کرد:

در نهایت یک تابع برای بازگشت لیستی از کاربران ایجاد کرده و agent یا همان کارمند پشتیبانی را از آن حذف می‌کنیم. ما این endpoint را متعاقباً از داشبورد فراخوانی می‌کنیم تا لیستی از کاربران را که agent می‌تواند با آن‌ها صحبت کند نمایش دهیم. البته کارمند ما نمی‌تواند با خودش صحبت کند و از این رو خودش را از لیست فیلتر می‌کنیم:

در انتهای فایل server.js، سرور را اجرا می‌کنیم:

اگر از ابتدای این مقاله با ما همگام بوده باشید، اینک فایل Server.js باید به صورت زیر در آمده باشد:

در یک پنجره ترمینال دستور node server.js را اجرا کنید و منتظر باشید تا پیامی به صورت زیر نمایش یابد:

Listening on port 5000

اکنون باید زمان مناسبی برای تست endpoint-ها به همراه curl یا Postman باشد تا مطمئن شویم که کار می‌کنند و سپس به بخش کدنویسی کلاینت بپردازیم.

راه‌اندازی اپلیکیشن React

درون دایرکتوری خود دستور npx create-react-app را اجرا کنید تا ساختار اولیه یک اپلیکیشن ری‌اکت ایجاد شود:

npx create-react-app client

ساختار پوشه شما اینک باید مانند زیر باشد:

|-- express-react-chat-widget |-- package-lock.json |-- package.json |-- server.js |-- client |--.gitignore |-- package-lock.json |-- package.json |-- public |-- src

زمانی که اپلیکیشن ری‌اکت آماده شد، به دایرکتوری client بروید و ماژول‌های زیر را نصب کنید:

cd clientnpm install @cometchat-pro/chat react-chat-widget react-router-dom bootstrap react-md-spinner

اپلیکیشن Create React برای bootstrap کردن یک اپلیکیشن ری‌اکت کاملاً مفید است، اما فایل‌های زیادی تولید می‌کند که مورد نیاز ما نیستند و این‌ها شامل فایل‌های تست و از این دست هستند. پیش از اقدام به کدنویسی، همه چیز را از دایرکتوری client/src حذف کنید تا از صفر کار خود را شروع کنیم. برای شروع یک فایل config.js با ID اپلیکیشن و UID کارمند در مسیر client/src/config.js با محتوای زیر بسازید:

این کد مبنایی است که می‌توان برای ارجاع به اطلاعات احراز هویت CometChat از هر کجا مورد استفاده قرار داد. با این که ما آن را کد مبنا می‌نامیم، اما این فرصت را نیز داریم که یک فایل index.css بسازیم:

ما این فایل را در ادامه از داشبورد مورد ارجاع قرار می‌دهیم. اکنون در فایل با نام index.js کد زیر را درج کنید:

در این کد ما Bootstrap ،CometChat و فایل پیکربندی را که پیش از مقداردهی اولیه CometChat و رندر کردن App ساخته‌ایم ایمپورت می‌کنیم. اگر در این راهنما با ما همگام بوده باشید، متوجه شده‌اید که ما هنوز App را تعریف نکرده‌ایم. بنابراین در این مرحله این کار را انجام می‌دهیم. در فایل به نام App.js کد زیر را درج کنید:

در این کد ما دو مسیر را تعریف کردیم:

  • مسیر / یا Customer home جهت برقراری اتصال با کارمند پشتیبانی است.
  • و مسیر agent/ یا Agent Dashboard برای دسترسی سریع و راحت به داشبورد تعریف شده است.

در ادامه ابتدا کامپوننت در دید مشتری را بررسی می‌کنیم. ما آن را کامپوننت کلاینت می‌نامیم.

ایجاد کامپوننت کلاینت

کامپوننت کلاینت ما دو مسئولیت عمده خواهد داشت:

  1. ایجاد یک کاربر CometChat جدید از طریق سرور Express در زمانی که نخستین مشتری وصل می‌شود.
  2. ارسال و دریافت پیام‌ها به صورت آنی.

یک فایل به نام Client.js بسازید و کد زیر را در آن درج کنید:

اگر فکر می‌کنید این کد حجم بالایی دارد جای نگرانی نیست چون در ادامه آن را جزء به جزء توضیح می‌دهیم.

تابع render به قدر کافی ساده است، در واقع وظیفه اصلی آن رندر کردن react-chat-widget است. بخش زیادی از کد اختصاص به مدیریت پیام جدید ارسالی از سوی مشتری در تابعی به نام handleNewUserMessage دارد.

به طور خلاصه، ابتدا باید بررسی کنیم که آیا UID مشتری در localStorage وجود دارد یا نه. اگر چنین باشد، از این UID برای لاگین کردن کاربر و ارسال پیام استفاده می‌کنیم. در غیر این صورت تابع ()createUser را فراخوانی می‌کنیم و از مقدار بازگشتی برای لاگین کردن کاربر استفاده می‌کنیم. این تابع createUser یک endpoint را فراخوانی می‌کند که قبلاً در همین راهنما تعریف کردیم.

در نهایت در یک تابع چرخه عمر ری‌اکت componentWillUnmount را فرا می‌خوانیم و به خاطر می‌سپاریم که شنونده پیام را حذف کنیم. پیش از ادامه باید به یک نکته کوچک اشاره کنیم. در کد فوق، به جای وارد کردن URL سرور و پورت آن (localhost:5000/users) یا چیزی مانند آن در فرانت‌اند، می‌توانیم یک گزینه proxy به فایل package.json اضافه کنیم. بدین ترتیب می‌توانیم به جای localhost:5000/users// صرفاً از /users استفاده کنیم:

"browserslist": [">0.2%"، "not dead"، "not ie <= 11"، "not op_mini all"]،"proxy": http://localhost:5000

در این مرحله اپلیکیشن مانند زیر خواهد بود:

گفتگوی زنده

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

برای حل این مشکل یک متد componentDidMount تنظیم می‌کنیم که به دنبال UID مشتری در localStorage می‌گردد، به طوری که وقتی مشتریان صفحه را رفرش بکنند، می‌توانند گفتگو را از همان جایی که مانده بود ادامه دهند.

زمانی که UID را پیدا کردیم، می‌توانیم از آن برای مقداردهی اولیه یک زنجیره از متدها جهت login ،fetch کردن پیام‌های قبلی و ایجاد listener برای پیام‌های ورودی استفاده کنیم.

اکنون اگر صفحه را رفرش کنیم، اپلیکیشن تلاش خواهد کرد در CometChat لاگین کند و پیام‌های قبلی را به صورت خودکار با گشتن به دنبال UID مشتری در localStorage بارگذاری کند و این وضعیت مناسبی محسوب می‌شود.

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

ایجاد کامپوننت agent

کارکرد اصلی داشبورد agent دریافت همه مشتریان از CometChat Pro و نمایش تمام پیام‌های ورودی از مشتریان جدید در لیست گفتگوی مشتریان کارمند است تا بتواند روی آن‌ها کلیک کرده و پاسخ دهد. در واقع کارکرد اصلی بسیار شبیه به کلاینت است.

گفتگوی زنده

هنگام استفاده از CometChat به‌راحتی می‌توان چندین کارمند ایجاد کرد، اما برای این که همه چیز ساده بماند و درگیر مدیریت کاربر نشویم، در این راهنما از یک کارمند (agent) استفاده می‌کنیم که قبلاً آن را ایجاد کرده‌ایم. یک کامپوننت به نام Agent.js ایجاد کنید و حالت اولیه آن را به صورت زیر تعیین کنید:

در همان فایل، یک متد به نام componentDidMount ایجاد کنید:

در کد فوق کارهای زیادی انجام می‌یابند. در ادامه آن‌ها را به اختصار مرور می‌کنیم.

  • ابتدا به صورت خودکار agent را لاگین کرده و همه کاربران گفتگوی مربوطه را از سرور واکشی می‌کنیم.
  • سپس یک شنونده پیام ورودی می‌سازیم. هر بار که یک پیام در گفتگوی منتخب دریافت می‌شود، آن را به «حالت گفتگو» (Chat State) ارسال می‌کنیم که به نوبه خود موجب به‌روزرسانی UI می‌شود.
  • اگر پیام ورودی از گفتگوی انتخاب شده کنونی نباشد، بررسی می‌کنیم که آیا پیام جدید از مشتری e ثبت نام کرده آمده است یا نه. اگر چنین نبود، مشتری جدید را به «حالت مشتری» ارسال می‌کنیم.

احتمالاً به خاطر دارید که API اکسپرس را قبلاً برای دریافت لیستی از کاربران ثبت نام کرده ساختیم. از این API برای تشکیل لیستی از کاربران در سمت چپ داشبورد استفاده می‌کنیم. این لیست را با استفاده از ترکیب کلاس‌های بوت‌استرپ و فایل index.css که قبلاً تعریف کردیم، در سمت چپ داشبورد قرار می‌دهیم.

سپس یک تابع رندر می‌سازیم. این تابع اینترفیس گفتگو را رندر می‌کند و آن را با استفاده از بوت‌استرپ استایل‌دهی می‌کند. برای این که خواندن کد آسان‌تر شود، CustomerList و ChatBox را در کامپوننت‌های خاص خود قرار می‌دهیم که می‌توانند در فایل یکسانی تعریف شوند:

کامپوننت Chatbox

کامپوننت CustomerList

بدین ترتیب مبنایی برای UI ایجاد می‌شود، اما هنوز امکان ارسال پیام وجود ندارد. برای ارسال پیام‌ها باید یک دستگیره برای مواردی که کارمند یک پیام جدید را تحویل می‌دهد داشته باشیم. شیوه ارسال پیام‌ها اینک باید برای شما روشن باشد، زیرا از همان فراخوانی sendMessage که در سمت کلاینت استفاده کردیم بهره بخواهیم گرفت.

همچنین می‌خواهیم کارمند را قادر سازیم تا سوابق پیام‌ها را مانند حالتی که برای مشتری ایجاد کردیم، ببیند:

به خاطر داشته باشید که شنونده پیام را در زمان حذف کامپوننت پاک کنید:

محصول نهایی به صورت زیر خواهد بود:

گفتگوی زنده

اگر کنجکاو هستید که کاربران Superhero از کجا می‌آیند باید اشاره کنیم که این کاربران به صورت خودکار از سوی CometChat Pro در زمان ایجاد اپلیکیشن جدید ایجاد می‌شوند. پیش از استفاده عملیاتی از اپلیکیشن حتماً آن‌ها را حذف کنید.

اکنون کارمند پشتیبانی و مشتریان آماده گفتگو با همدیگر هستند. شما می‌توانید Client Home و Agent Dashboard را در پنجره‌های جداگانه‌ای باز کرده و این موضوع را بررسی کنید.

سخن پایانی

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای 1 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *