عکس از مارک پیونیکی / Unsplash

اگر شما قدرت عالی LiveView را در چارچوب ققنوس تجربه نکرده اید ، Strap In: ما قصد داریم یک سیستم چت با کارایی بالا با کمترین میزان از 50 خط کد بسازیم. این شامل تمام کد برای Frontend و Backend (هشدار اسپویلر: آنها یک نوع یک چیز هستند).

استراتژی اصلی ما در این پروژه استفاده از یک فرآیند مداوم Phoenix LiveView برای هر کاربر که به سرور متصل می شود ، و سپس از عملکرد PubSub ("انتشار/اشتراک") برای پخش پیام ها به همه فرآیندهای متصل استفاده می کند. سرانجام ، فرآیندهای LiveView پیام ها را به هر کاربر متصل باز می گرداند.

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

پیش نیازها - ققنوس چیست؟LiveView چیست؟

قبل از شروع این پروژه ، برای نصب هر دو Elixir و Phoenix باید دستورالعمل ها را دنبال کنید.

به طور خلاصه ، Phoenix یک چارچوب وب پیشرفته است که به زبان اکسیر شگفت انگیز نوشته شده است. Elixir تا حدودی بسیار شگفت انگیز است زیرا در دستگاه مجازی Erlang ساخته شده است ، به این معنی که از طبیعت از برنامه های بسیار در دسترس و بسیار همزمان پشتیبانی می کند.

چارچوب وب Phoenix از این ویژگی ها استفاده می کند و LiveView را برای محتوای ارائه شده با سرور بسیار تعاملی امکان پذیر می کند. این بدان معناست که شما می توانید بدون نوشتن خط JavaScript ، وب سایت های سبک "تک صفحه" بسیار تعاملی بسازید. من قبلاً در مورد LiveView نوشتم و چرا فکر می کنم این یک ابزار شگفت انگیز است.

اگر قبلاً با این پشته کار نکرده اید ، این فرصت مناسب برای امتحان کردن آن و دیدن قدرت برای خودتان است. بیا شروع کنیم!

مرحله 1 - راه اندازی پروژه

پس از نصب Elixir & Phoenix ، اولین کاری که می خواهیم انجام دهیم ایجاد پروژه است. با فرض اینکه محیط شما به درستی پیکربندی شده است ، می توانید یک فهرست کامل پروژه Phoenix را با: mix phx. new liveview_chat-no-ecto تولید کنید

پرچم-no-ecto در اینجا به این معنی است که ما نمی خواهیم کتابخانه Ecto Datamapper را در پروژه خود بگنجانیم. ما در این مثال برای سادگی این کار را انجام می دهیم ، و به این ترتیب که نیازی به نگرانی در مورد راه اندازی یک بانک اطلاعاتی نداریم. اگر قصد دارید این پروژه نسخه ی نمایشی را به چیزی بزرگتر بسازید ، ممکن است با حذف پرچم-no-ecto ، عملکرد ECTO را درج کنید.

مراحل از مخلوط را دنبال کنید تا پروژه خود ایجاد شود و وابستگی ها نصب شده باشد. اگر همه چیز به درستی پیش می رود ، باید بتوانید سرور Phoenix خود را با Mix Phx. Server اجرا کنید و با پیمایش به http: // localhost: 4000 در مرورگر خود ، صفحه اصلی پیش فرض را مشاهده کنید.

در مرحله بعد ، ما می خواهیم با ویرایش پرونده روتر در Lib/LiveView_Chat_Web/Router. ex ، یک مسیر (/گپ) برای صفحه چت جدید خود ایجاد کنیم. این مسیری است که کاربران برای دسترسی به گپ به آن حرکت می کنند. ما همچنین به آن خواهیم گفت که کدام ماژول LiveView ما را ارائه می دهد. در این حالت ، این ماژول LiveViewChatWeb. Chatlive. Index نامگذاری می شود. برای تنظیم مسیر ، خط زنده را در بلوک نشان داده شده در زیر اضافه کنید:

مرحله 2 - اسکلت LiveView

در مرحله بعد ، ما قصد داریم LiveView خود را تنظیم کنیم. برای حفظ این ساده و حرکت به مرحله به مرحله ، ما با نسخه حداقل ماژول LiveView و الگوی HTML شروع خواهیم کرد. سپس ، در مراحل بعدی ما ، عملکرد را پر خواهیم کرد.

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

در اینجا الگوی اصلی ما به نظر می رسد:

HTML باید کاملاً خود توضیحی باشد و مانند هر HTML دیگری که ممکن است بنویسید ، با یک استثنا: ویژگی phx-submit = "ارسال" را به شکل ما. این ویژگی یک الزام آور LiveView است ، که می گوید ما می خواهیم هنگام ارسال فرم ، پیامی را به ماژول باطن خود ارائه دهیم.

اگر در گذشته توسعه وب را انجام داده اید ، توجه داشته باشید که ارسال فرم یک رویداد سمت مشتری است ، اما ماژول LiveView در یک فرآیند سمت سرور در حال اجرا است. LiveView و Phoenix این پیچیدگی را از ما پنهان می کنند ، بنابراین ما برای دستیابی به این کار نیازی به نوشتن API یا یک خط JavaScript نخواهیم داشت. خواهیم دید که چگونه این رویداد در مرحله بعدی مصرف می شود.

اکنون به پشتوانه ، اجازه دهید ماژول اسکلتی LiveView خود را بنویسیم ، فقط کافی است که الگوی HTML خود را برای ارائه ارائه دهیم:

تنها روشی که باید در اینجا بنویسیم ، نصب است-وقتی کاربر به مسیر /چت ما حرکت می کند و نقطه ورود ما برای عملکرد چت است. ما در پارامترهای درخواست و اطلاعات جلسه عبور می کنیم ، اما برای مثال فعلی ما می توانیم آن را نادیده بگیریم. ما همچنین در سوکت عبور می کنیم ، که نشان دهنده اتصال LiveView است.

پس از موفقیت ، LiveView از ما انتظار دارد که ما را به عنوان یک الگوی مشترک اکسیر برای یک تماس عملکرد موفق برگردانیم. اما قبل از بازگشت سوکت ، برخی از مقادیر را نیز به آن اختصاص می دهیم. این تکالیف حالت برنامه کاربردی مداوم برای کاربر است که به LiveView متصل است. در این حالت ، برنامه ما باید نام کاربری و لیستی از پیام ها را ذخیره کند. برای اهداف نمایشی ، ما از یک نام کاربری تصادفی استفاده خواهیم کرد - در یک برنامه واقعی ، احتمالاً می خواهید برخی از مدیریت واقعی کاربر!

اگر این پرونده ها را با موفقیت اضافه کرده اید ، باید بتوانید به http: // localhost: 4000/گپ بروید و به صفحه اصلی مراجعه کنید. شما هنوز نمی توانید پیام ارسال کنید - ما هنوز این عملکرد را اضافه نکرده ایم!

مرحله 3 - پیام های گپ را بپذیرید و پخش کنید

در مرحله بعد ، بیایید یک کنترل کننده برای رویداد "ارسال" که ما در جلوی آن قرار خواهیم گرفت ، اضافه کنیم. ما این کار را با یک عملکرد Handle_Event انجام خواهیم داد:

برای رسیدگی به این رویدادها از جبهه ، ما یک تابع را با بیانیه ای اجرا می کنیم که به نظر می رسد:

در صورتی که با الگوی الیکسر آشنا نباشید ، آرگومان های اول و دوم در اینجا متغیرهای ساده ای نیستند زیرا ممکن است در زبان های دیگر باشند ، اما در عوض ، الگویی هستند که باید همسان شوند. این بدان معناست که این عملکرد فقط در صورت استفاده از پارامتر اول "ارسال" و دوم یک فرهنگ لغت حاوی کلید "متن" است. اگر یک رویداد جدید از مشتری اضافه کنیم ، می توانیم به جای اینکه یک عملکرد واحد با منطق شرطی داشته باشیم ، یک تعریف کاملاً متفاوت برای رسیدگی به آن مورد ایجاد کنیم.

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

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

مرحله 4 - اشتراک و مصرف پیام

بعد، با اضافه کردن پخش پیام چت خود، به چیزی برای مصرف آنها نیاز داریم! برای تکمیل ماژول LiveView، تابع handle_info را در زیر اضافه می کنیم.

در این به روزرسانی، ما دو چیز اضافه کرده ایم: اول، در تابع mount خود، چند خط برای اشتراک در موضوع اضافه کرده ایم. سپس، یک تابع handle_info را اضافه کرده ایم تا پیام هایی را که در آنها مشترک شده ایم مصرف کند.

متوجه خواهید شد که قبل از اینکه مشترک شویم، اتصال را بررسی می کنیم؟ (سوکت) - چرا؟اگر با LiveView شروع به ساختن زیاد کنید، دیر یا زود متوجه خواهید شد که mount دو بار فراخوانی می شود، که اگر انتظارش را ندارید ممکن است باعث سردرگمی و اشکال شود. دلیل آن این است که وقتی یک صفحه LiveView مشاهده می شود، در واقع یک فرآیند دو مرحله ای است: ابتدا یک درخواست HTTP GET برای دریافت محتوای اولیه ارسال می شود و سپس یک اتصال Websocket برای انجام هر گونه رندر تعاملی برقرار می شود. هر کدی برای پشتیبانی از فعل و انفعالات یا اتصالات دائمی باید فقط در مورد "سوکت متصل" اجرا شود. برای جزئیات بیشتر در مورد اینکه چرا این فرآیند دو مرحله ای بسیار مهم است، به پست قبلی من در LiveView مراجعه کنید.

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

(توجه جانبی: اگر تعجب می کنید، handle_info و handle_event رابط های پاسخگوی تماس استاندارد برای ماژول LiveView هستند - اگر در مورد جزئیات کنجکاو هستید، مستندات را ببینید).

تنها کاری که باید انجام دهید این است که قالب HTML خود را برای ارائه پیام ها به روز کنیم. ما div "پیام ها" را مطابق شکل زیر به روز می کنیم:

مرحله 5 - چت!

با وجود همه چیز، باید بتوانید در مرورگر خود به http://localhost:4000/chat بروید و برنامه را در حال اجرا ببینید. صفحه را در یک پنجره یا مرورگر جداگانه باز کنید و چند پیام چت برای مشاهده تعامل بین این دو (یا سه یا چهار) ارسال کنید.

مراحل بعدی

اگر تا اینجا پیش رفته اید، پروژه نمایشی در این پست تمام شده است! اما اگر می خواهید ادامه دهید، در اینجا چند چیز ساده وجود دارد که می توانید برای گسترش این پروژه اضافه کنید:

• پشتیبانی از چندین کانال از طریق chat:channel_name
• به کاربران اجازه دهید نام مستعار خود را مشخص کنند و مدیریت کاربر اصلی را اضافه کنند
• یک لایه ماندگاری پیام اضافه کنید تا کاربران جدید بتوانند تاریخچه چت را ببینند

برای موارد بیشتر مانند این ثبت نام کنید.

بهترین کتاب ها برای یادگیری جاوا اسکریپت در سال 2023

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

بهترین کتاب های یادگیری React در سال 2023

ما فهرستی از 5 کتاب را گردآوری کرده ایم که به جنبه های مختلف توسعه React می پردازد و می تواند به شما کمک کند در سال 2023 استاد React شوید.

افزودن محتوای HTML قابل ویرایش به برنامه React

در این پست، به نحوه استفاده از ContentEditable با React برای فعال کردن محتوای تعاملی و قابل ویرایش در برنامه های React شما خواهیم پرداخت.