در این آموزش، ما یک برنامه چت بلادرنگ با استفاده از Laravel، Nuxt 3، Sanctum و Laravel Reverb برای مدیریت پیام‌های امن و زنده بین کاربران می‌سازیم. ما احراز هویت کاربر را راه‌اندازی می‌کنیم، به یک API ایمن متصل می‌شویم و مطمئن می‌شویم که چت فوراً به‌روزرسانی می‌شود تا تجربه‌ای روان و پاسخگو داشته باشد.  ما از این ماژول برای مدیریت احراز هویت SPA استفاده خواهیم کرد، که به طور کارآمدی از تأیید اعتبار یک صفحه (SPA) و API استفاده می کند. برای کسب اطلاعات بیشتر در مورد استفاده از این ماژول، به مقاله   مراجعه کنید. احراز هویت Nuxt 3 SPA  در این پروژه، ما Laravel Reverb را برای پخش رویدادهای بی‌درنگ پیکربندی می‌کنیم، احراز هویت را با Sanctum پیاده‌سازی می‌کنیم و یک فرانت‌اند Nuxt 3 می‌سازیم که پیام‌های چت را به صورت پویا نمایش و مدیریت می‌کند. بیایید شروع کنیم!   https://www.youtube.com/watch?v=bjcM8E5s8p0&embedable=true  پیش نیازها  آشنایی اولیه با Laravel، Sanctum و Nuxt 3.  آشنایی با پخش رویداد در لاراول  پروژه لاراول که با Sanctum راه اندازی شده است.  Nuxt 3 به عنوان قسمت جلویی برنامه شما نصب و پیکربندی شده است.  مرحله 1: Laravel Sanctum و Laravel Reverb را راه اندازی کنید  ابتدا مطمئن شوید که Laravel Sanctum نصب و پیکربندی شده است. Sanctum امکان احراز هویت مبتنی بر توکن را برای برنامه های کاربردی تک صفحه ای (SPA) می دهد. سپس، Laravel Reverb را برای قابلیت های بلادرنگ نصب و پیکربندی کنید.  متغیرهای محیط Reverb زیر را به فایل   خود اضافه کنید: .env   REVERB_APP_ID=my-app-id REVERB_APP_KEY=my-app-key REVERB_APP_SECRET=my-app-secret REVERB_HOST="localhost" REVERB_PORT=8080 REVERB_SCHEME=http  مرحله 2: انتقال جدول پیام های چت را ایجاد کنید  برای ذخیره پیام های چت، یک انتقال برای جدول   ایجاد کنید. اجرا کنید: chat_messages   php artisan make:migration create_chat_messages_table  فایل مهاجرت را به صورت زیر به روز کنید:   Schema::create('chat_messages', function (Blueprint $table) { $table->id(); $table->foreignId('receiver_id'); $table->foreignId('sender_id'); $table->text('text'); $table->timestamps(); });  برای ایجاد جدول، migration را اجرا کنید:   php artisan migrate  مرحله 3: رویداد MessageSent را ایجاد کنید  برای پخش پیام‌ها در زمان واقعی، یک کلاس رویداد   ایجاد کنید: MessageSent   php artisan make:event MessageSent  به روز رسانی کلاس رویداد:   <?php namespace App\Events; use App\Models\ChatMessage; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Queue\SerializesModels; class MessageSent implements ShouldBroadcastNow { use Dispatchable, InteractsWithSockets, SerializesModels; public function __construct(public ChatMessage $message) { // } public function broadcastOn(): array { return [new PrivateChannel("chat.{$this->message->receiver_id}")]; } }  مرحله 4: کانال های پخش را تعریف کنید  در   ، کانال پخش را تعریف کنید: channels.php   Broadcast::channel('chat.{id}', function ($user, $id) { return (int) $user->id === (int) $id; });  مرحله 5: مسیرهایی را برای واکشی و ارسال پیام تعریف کنید  این مسیرها را برای مدیریت ارسال و بازیابی پیام های چت اضافه کنید:   Route::get('/messages/{user}', function (User $user, Request $request) { return ChatMessage::query() ->where(function ($query) use ($user, $request) { $query->where('sender_id', $request->user()->id) ->where('receiver_id', $user->id); }) ->orWhere(function ($query) use ($user, $request) { $query->where('sender_id', $user->id) ->where('receiver_id', $request->user()->id); }) ->with(['sender', 'receiver']) ->orderBy('id', 'asc') ->get(); })->middleware('auth:sanctum'); Route::post('/messages/{user}', function (User $user, Request $request) { $request->validate(['message' => 'required|string']); $message = ChatMessage::create([ 'sender_id' => $request->user()->id, 'receiver_id' => $user->id, 'text' => $request->message ]); broadcast(new MessageSent($message)); return $message; });  مرحله 6: Reverb را در Nuxt 3 پیکربندی کنید  برای اینکه Nuxt 3 با Reverb ارتباط برقرار کند، این متغیرها را به فایل   خود اضافه کنید: .env   NUXT_PUBLIC_REVERB_APP_ID=my-app-id NUXT_PUBLIC_REVERB_APP_KEY=my-app-key NUXT_PUBLIC_REVERB_APP_SECRET=my-app-secret NUXT_PUBLIC_REVERB_HOST="localhost" NUXT_PUBLIC_REVERB_PORT=8080 NUXT_PUBLIC_REVERB_SCHEME=http  سپس، آنها را در   بارگیری کنید: nuxt.config.ts   export default defineNuxtConfig({ runtimeConfig: { public: { REVERB_APP_ID: process.env.NUXT_PUBLIC_REVERB_APP_ID, REVERB_APP_KEY: process.env.NUXT_PUBLIC_REVERB_APP_KEY, REVERB_APP_SECRET: process.env.NUXT_PUBLIC_REVERB_APP_SECRET, REVERB_HOST: process.env.NUXT_PUBLIC_REVERB_HOST, REVERB_PORT: process.env.NUXT_PUBLIC_REVERB_PORT, REVERB_SCHEME: process.env.NUXT_PUBLIC_REVERB_SCHEME, }, }, });  مرحله 7: Laravel Echo Client را در Nuxt 3 راه اندازی کنید  برای مدیریت به‌روزرسانی‌های بلادرنگ، یک پلاگین   ایجاد کنید: laravel-echo.client.ts   import Echo from "laravel-echo"; import Pusher, { type ChannelAuthorizationCallback } from "pusher-js"; declare global { interface Window { Echo: Echo; Pusher: typeof Pusher; } } export default defineNuxtPlugin(() => { window.Pusher = Pusher; const config = useRuntimeConfig(); const echo = new Echo({ broadcaster: "reverb", key: config.public.REVERB_APP_KEY, wsHost: config.public.REVERB_HOST, wsPort: config.public.REVERB_PORT ?? 80, wssPort: config.public.REVERB_PORT ?? 443, forceTLS: (config.public.REVERB_SCHEME ?? "https") === "https", enabledTransports: ["ws", "wss"], authorizer: (channel, options) => ({ authorize: (socketId, callback) => { useSanctumFetch("api/broadcasting/auth", { method: "post", body: { socket_id: socketId, channel_name: channel.name }, }) .then(response => callback(null, response)) .catch(error => callback(error, null)); }, }), }); return { provide: { echo } }; });  مرحله 8: رابط چت بلادرنگ را در Nuxt 3 بسازید  برای فعال کردن چت بلادرنگ در برنامه Nuxt 3 ما، یک صفحه جدید ایجاد کردم،   ، که در آن کاربران می‌توانند کاربران دیگر را انتخاب کرده و با آنها چت کنند. این صفحه برای مدیریت پیام‌های چت و داده‌های کاربر، با استفاده از Laravel Echo و WebSockets برای به‌روزرسانی‌های بی‌درنگ و نشانگرهای تایپ، به پشتیبان لاراول متصل می‌شود. chats > [id].vue  در اینجا به طور خلاصه نحوه ساختار این عملکرد چت ارائه شده است:  مرحله 8.1: داده های چت کاربر انتخابی را بارگیری کنید  ابتدا   از URL با   composable بازیابی می کنیم. این   کاربری را که با او چت می‌کنیم شناسایی می‌کند و پیام‌های کاربر و چت لازم را بارگیری می‌کند. userID useRoute userID   const route = useRoute(); const userID = route.params.id; const { user: currentUser } = useSanctum<User>(); const { data: user } = await useAsyncData( `user-${userID}`, () => useSanctumFetch<User>(`/api/users/${userID}`) ); const { data: messages } = useAsyncData( `messages-${userID}`, () => useSanctumFetch<ChatMessage[]>(`/api/messages/${userID}`), { default: (): ChatMessage[] => [] } );  این قطعه از   ، یک ترکیب سفارشی، برای بارگیری پیام‌ها به صورت ناهمزمان هنگام نصب صفحه استفاده می‌کند. useSanctumFetch  مرحله 8.2: نمایش پیام های چت  ما هر پیام را به صورت پویا ارائه می‌کنیم، و بر اساس اینکه از کاربر فعلی یا شرکت‌کننده چت است، به آن‌ها سبک می‌دهیم.   <div ref="messagesContainer" class="p-4 overflow-y-auto max-h-fit"> <div v-for="message in messages" :key="message.id" class="flex items-center mb-2"> <div v-if="message.sender_id === currentUser.id" class="p-2 ml-auto text-white bg-blue-500 rounded-lg"> {{ message.text }} </div> <div v-else class="p-2 mr-auto bg-gray-200 rounded-lg"> {{ message.text }} </div> </div> </div>  پنجره چت به طور خودکار با استفاده از   به آخرین پیام می رود. nextTick()   watch( messages, () => { nextTick(() => messageContainerScrollToBottom()); }, { deep: true } ); function messageContainerScrollToBottom() { if (!messagesContainer.value) return; messagesContainer.value.scrollTo({ top: messagesContainer.value.scrollHeight, behavior: 'smooth' }); }  مرحله 8.3: ارسال پیام های جدید  کاربران می توانند با یک فیلد ورودی پیام ارسال کنند. پس از ارسال، یک درخواست POST به باطن لاراول ارسال می شود.   const newMessage = ref(""); const sendMessage = async () => { if (!newMessage.value.trim()) return; const messageResponse = await useSanctumFetch<ChatMessage>(`/api/messages/${userID}`, { method: "post", body: { message: newMessage.value } }); messages.value.push(messageResponse); newMessage.value = ""; };  پیام ها بلافاصله پس از ارسال به روز می شوند.  مرحله 8.4: ویژگی های بلادرنگ با Laravel Echo  Laravel Echo به رویدادهای کلیدی مانند   و   گوش می دهد. MessageSent typing   onMounted(() => { if (currentUser.value) { $echo.private(`chat.${currentUser.value.id}`) .listen('MessageSent', (response: { message: ChatMessage }) => { messages.value.push(response.message); }) .listenForWhisper("typing", (response: { userID: number }) => { isUserTyping.value = response.userID === user.value?.id; if (isUserTypingTimer.value) clearTimeout(isUserTypingTimer.value); isUserTypingTimer.value = setTimeout(() => { isUserTyping.value = false; }, 1000); }); } });  این به روز رسانی پیام ها و نشانگرهای تایپ بلادرنگ را کنترل می کند که پس از یک ثانیه عدم فعالیت ناپدید می شوند.  مرحله 8.5: نشانگر تایپ  برای نشان دادن یک نشانگر تایپ، رویداد "تایپ" را با   فعال می کنیم. whisper   const sendTypingEvent = () => { if (!user.value || !currentUser.value) return; $echo.private(`chat.${user.value.id}`).whisper("typing", { userID: currentUser.value.id }); };  این رویداد هر زمان که کاربر تایپ کند ارسال می شود و گیرنده نشانگر تایپ را می بیند.  مرحله 8.6: رابط کاربری  رابط چت شامل یک هدر با نام کاربر انتخابی و بخش هایی برای پیام ها و فیلد ورودی است.   <template> <div> <header v-if="user" class="bg-white shadow"> <div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8"> <h1 class="text-2xl font-bold ">{{ user.name }}</h1> </div> </header> <div class="flex flex-col items-center py-5"> <div class="container w-full h-full p-8 space-y-3 bg-white rounded-xl"> <div v-if="currentUser"> <div class="flex flex-col justify-end h-80"> <div ref="messagesContainer" class="p-4 overflow-y-auto max-h-fit"> <div v-for="message in messages" :key="message.id" class="flex items-center mb-2"> <div v-if="message.sender_id === currentUser.id" class="p-2 ml-auto text-white bg-blue-500 rounded-lg"> {{ message.text }} </div> <div v-else class="p-2 mr-auto bg-gray-200 rounded-lg"> {{ message.text }} </div> </div> </div> </div> <div class="flex-shrink-0"> <span v-if="user && isUserTyping" class="text-gray-500"> {{ user.name }} is typing... </span> <div class="flex items-center justify-between w-full p-4 border-t border-gray-200"> <input type="text" v-model="newMessage" @keydown="sendTypingEvent" @keyup.enter="sendMessage" class="w-full p-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Type a message..." /> <button @click.prevent="sendMessage" class="inline-flex items-center justify-center w-12 h-12 ml-4 text-white bg-blue-500 rounded-lg hover:bg-blue-600"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </button> </div> </div> </div> </div> </div> </div> </template>  این راه اندازی ویژگی چت بلادرنگ را با استفاده از Laravel Sanctum و Echo با Nuxt 3 تکمیل می کند.  نتیجه گیری  ما اکنون یک برنامه چت امن و بی‌درنگ با استفاده از Laravel، Sanctum، Reverb، و Nuxt 3 ایجاد کرده‌ایم. این تنظیمات را می‌توان به‌راحتی مقیاس‌بندی کرد تا شامل ویژگی‌های اضافی مانند واکنش‌های پیام یا اتاق‌های گفتگوی متعدد باشد.  برای دریافت کد کامل، به   مراجعه کنید. مخزن GitHub

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

این صوت به زبان اصلی داستان تولید شده است!

خیلی طولانی؛ خواندن

Make resilience your competitive advantage

در اینجا چارچوب هایی وجود دارد که برای ساختن یک برنامه چت بلادرنگ نیاز دارید

About Author

نظرات

برچسب ها را آویزان کنید

این مقاله در ارائه شده است

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps