Bu dərslikdə biz istifadəçilər arasında təhlükəsiz və canlı mesajlaşmanı idarə etmək üçün Laravel, Nuxt 3, Sanctum və Laravel Reverb istifadə edərək real vaxt rejimində söhbət proqramı quracağıq. Biz istifadəçi autentifikasiyasını quracağıq, təhlükəsiz API-yə qoşulacağıq və hamar və cavab verən təcrübə üçün söhbətin dərhal yenilənməsini təmin edəcəyik.  Biz SPA autentifikasiyasını idarə etmək üçün moduldan istifadə edəcəyik ki, bu da həm Tək Səhifəli Tətbiq (SPA), həm də API autentifikasiyasını səmərəli idarə edir. Bu moduldan istifadə haqqında ətraflı öyrənmək üçün   haqqında məqaləyə baxın. Nuxt 3 SPA autentifikasiyası  Bu layihədə biz Laravel Reverb-i real vaxtda hadisə yayımı üçün konfiqurasiya edəcəyik, Sanctum ilə autentifikasiyanı həyata keçirəcəyik və söhbət mesajlarını dinamik şəkildə göstərən və idarə edən Nuxt 3 frontendini quracağıq. Gəlin başlayaq!   https://www.youtube.com/watch?v=bjcM8E5s8p0&embedable=true  İlkin şərtlər  Laravel, Sanctum və Nuxt 3 ilə əsas tanışlıq.  Laraveldə hadisələrin yayımı haqqında anlayış.  Sanctum ilə qurulan Laravel layihəsi.  Nuxt 3 tətbiqinizin ön hissəsi kimi quraşdırılıb və konfiqurasiya edilib.  Addım 1: Laravel Sanctum və Laravel Reverb qurun  Birincisi, Laravel Sanctum-un quraşdırıldığından və konfiqurasiya edildiyindən əmin olun. Sanctum tək səhifəli proqramlar (SPA) üçün token əsaslı autentifikasiyaya imkan verir. Sonra real vaxt imkanları üçün Laravel Reverb-i quraşdırın və konfiqurasiya edin.  Aşağıdakı Reverb mühit dəyişənlərini   faylınıza əlavə edin: .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  Addım 2: Söhbət Mesajları Cədvəli Miqrasiyasını yaradın  Söhbət mesajlarını saxlamaq üçün   cədvəli üçün köçürmə yaradın. Qaçış: chat_messages   php artisan make:migration create_chat_messages_table  Miqrasiya faylını aşağıdakı kimi yeniləyin:   Schema::create('chat_messages', function (Blueprint $table) { $table->id(); $table->foreignId('receiver_id'); $table->foreignId('sender_id'); $table->text('text'); $table->timestamps(); });  Cədvəl yaratmaq üçün köçürməni həyata keçirin:   php artisan migrate  Addım 3: MessageSent hadisəsini yaradın  Mesajları real vaxtda yayımlamaq üçün   hadisə sinfi yaradın: MessageSent   php artisan make:event MessageSent  Tədbir sinifini yeniləyin:   <?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}")]; } }  Addım 4: Yayım kanallarını müəyyənləşdirin    -də yayım kanalını təyin edin: channels.php   Broadcast::channel('chat.{id}', function ($user, $id) { return (int) $user->id === (int) $id; });  Addım 5: Mesajların alınması və göndərilməsi üçün marşrutları müəyyənləşdirin  Söhbət mesajlarının göndərilməsini və alınmasını idarə etmək üçün bu marşrutları əlavə edin:   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; });  Addım 6: Nuxt 3-də Reverb-i konfiqurasiya edin  Nuxt 3-ə Reverb ilə əlaqə yaratmaq üçün bu dəyişənləri   faylınıza əlavə edin: .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  Sonra onları   -ə yükləyin: 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, }, }, });  Addım 7: Nuxt 3-də Laravel Echo Client qurun  Real vaxt yeniləmələrini idarə etmək üçün   plaginini yaradın: 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 } }; });  Addım 8: Nuxt 3-də Real Zamanlı Söhbət İnterfeysini qurun  Nuxt 3 tətbiqimizdə real vaxt söhbətini aktivləşdirmək üçün istifadəçilərin digər istifadəçiləri seçib söhbət edə biləcəyi yeni səhifə yaratdım,   . Bu səhifə real vaxt yeniləmələri və indikatorların yazılması üçün Laravel Echo və WebSockets istifadə edərək söhbət mesajlarını və istifadəçi məlumatlarını idarə etmək üçün Laravel backendinə qoşulur. chats > [id].vue  Bu söhbət funksiyasını necə strukturlaşdırdığımızın icmalı:  Addım 8.1: Seçilmiş İstifadəçinin Söhbət Məlumatlarını Yükləyin  Birincisi,   tərtib edilə bilən URL-dən   alırıq. Bu   söhbət etdiyimiz istifadəçini müəyyənləşdirir və lazımi istifadəçi və söhbət mesajlarını yükləyir. useRoute userID 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[] => [] } );  Bu fraqment, səhifə quraşdırıldıqda mesajları asinxron şəkildə yükləmək üçün xüsusi tərtib edilə bilən   istifadə edir. useSanctumFetch  Addım 8.2: Söhbət Mesajlarının Göstərilməsi  Biz hər bir mesajı dinamik şəkildə təqdim edirik, onların cari istifadəçidən və ya söhbət iştirakçısından olması əsasında tərtib edirik.   <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>  Söhbət pəncərəsi avtomatik olaraq   istifadə edərək ən son mesaja sürüşür. nextTick()   watch( messages, () => { nextTick(() => messageContainerScrollToBottom()); }, { deep: true } ); function messageContainerScrollToBottom() { if (!messagesContainer.value) return; messagesContainer.value.scrollTo({ top: messagesContainer.value.scrollHeight, behavior: 'smooth' }); }  Addım 8.3: Yeni Mesajların Göndərilməsi  İstifadəçilər giriş sahəsi ilə mesaj göndərə bilərlər. Təqdim edildikdən sonra, POST sorğusu Laravel backendinə göndərilir.   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 = ""; };  Mesajlar göndərildikdən dərhal sonra yenilənir.  Addım 8.4: Laravel Echo ilə Real-Time Xüsusiyyətlər  Laravel Echo   və   kimi əsas hadisələri dinləyir. 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); }); } });  Bu, bir saniyə hərəkətsizlikdən sonra yox olan real vaxt mesaj yeniləmələrini və yazma göstəricilərini idarə edir.  Addım 8.5: Yazma Göstəricisi  Yazma göstəricisini göstərmək üçün biz   ilə "yazma" hadisəsini işə salırıq. whisper   const sendTypingEvent = () => { if (!user.value || !currentUser.value) return; $echo.private(`chat.${user.value.id}`).whisper("typing", { userID: currentUser.value.id }); };  Bu hadisə istifadəçi hər dəfə yazdıqda göndərilir və alıcı yazma göstəricisini görür.  Addım 8.6: İstifadəçi interfeysi  Söhbət interfeysi seçilmiş istifadəçi adı və mesajlar üçün bölmələr və daxiletmə sahəsi ilə başlıqdan ibarətdir.   <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>  Bu, Nuxt 3 ilə Laravel Sanctum və Echo istifadə edərək real vaxt rejimində söhbət funksiyasının qurulmasını tamamlayır.  Nəticə  İndi biz Laravel, Sanctum, Reverb və Nuxt 3-dən istifadə edərək təhlükəsiz, real vaxt söhbət proqramı yaratdıq. Bu quraşdırma mesaj reaksiyaları və ya çoxsaylı söhbət otaqları kimi əlavə funksiyaları daxil etmək üçün asanlıqla miqyaslana bilər.  Tam kod üçün   baş çəkin. GitHub repozitoriyasına

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

Read My Stories

Bu audio hekayənin orijinal dilində hazırlanmışdır!

Çox uzun; Oxumaq

Make resilience your competitive advantage

Real Zamanlı Söhbət Tətbiqini Yaratmaq üçün Lazım olan Çərçivələr Budur

About Author

ŞƏRHLƏR

ETİKET ASIN

BU MƏQALƏ TƏQDİM EDİLMİŞDİR

Related Stories

How Azarus's Technology is Transforming Viewer Engagement on Stream

Women in Tech: Azize Sultan Shares Her Inspiring Journey from Architecture to Tech Leadership

Optimizing Operations for Real Estate Investors - Interview with Startups of the Year Nominee, Azibo

How Azarus's Technology is Transforming Viewer Engagement on Stream

Women in Tech: Azize Sultan Shares Her Inspiring Journey from Architecture to Tech Leadership

Optimizing Operations for Real Estate Investors - Interview with Startups of the Year Nominee, Azibo

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps