Bu eğitimde, kullanıcılar arasında güvenli ve canlı mesajlaşmayı yönetmek için Laravel, Nuxt 3, Sanctum ve Laravel Reverb kullanarak gerçek zamanlı bir sohbet uygulaması oluşturacağız. Kullanıcı kimlik doğrulamasını kuracağız, güvenli bir API'ye bağlanacağız ve sorunsuz ve duyarlı bir deneyim için sohbetin anında güncellenmesini sağlayacağız.  Modülü, hem Tek Sayfalık Uygulama (SPA) hem de API kimlik doğrulamasını verimli bir şekilde işleyen SPA kimlik doğrulamasını yönetmek için kullanacağız. Bu modülü kullanma hakkında daha fazla bilgi edinmek için   makalesine bakın. Nuxt 3 SPA kimlik doğrulaması  Bu projede, Laravel Reverb'i gerçek zamanlı etkinlik yayını için yapılandıracağız, Sanctum ile kimlik doğrulamayı uygulayacağız ve sohbet mesajlarını dinamik olarak görüntüleyen ve yöneten bir Nuxt 3 ön ucu oluşturacağız. Başlayalım!   https://www.youtube.com/watch?v=bjcM8E5s8p0&embedable=true  Ön koşullar  Laravel, Sanctum ve Nuxt 3 ile ilgili temel bilgilere sahip olmak.  Laravel'de etkinlik yayınlamanın anlaşılması.  Sanctum ile kurulmuş bir Laravel projesi.  Nuxt 3, uygulamanızın ön yüzü olarak kuruldu ve yapılandırıldı.  Adım 1: Laravel Sanctum ve Laravel Reverb'i Ayarlayın  Öncelikle, Laravel Sanctum'un kurulu ve yapılandırılmış olduğundan emin olun. Sanctum, tek sayfalık uygulamalar (SPA) için belirteç tabanlı kimlik doğrulamaya izin verir. Ardından, Laravel Reverb'i gerçek zamanlı yetenekler için kurun ve yapılandırın.  Aşağıdaki Reverb ortam değişkenlerini   dosyanıza ekleyin: .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  Adım 2: Sohbet Mesajları Tablosu Göçünü Oluşturun  Sohbet mesajlarını depolamak için   tablosu için bir geçiş oluşturun. Çalıştırın: chat_messages   php artisan make:migration create_chat_messages_table  Göç dosyasını aşağıdaki şekilde güncelleyin:   Schema::create('chat_messages', function (Blueprint $table) { $table->id(); $table->foreignId('receiver_id'); $table->foreignId('sender_id'); $table->text('text'); $table->timestamps(); });  Tabloyu oluşturmak için geçişi çalıştırın:   php artisan migrate  Adım 3: MessageSent Olayını Oluşturun  Gerçek zamanlı mesaj yayınlamak için bir   olay sınıfı oluşturun: MessageSent   php artisan make:event MessageSent  Olay sınıfını güncelle:   <?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}")]; } }  Adım 4: Yayın Kanallarını Tanımlayın    dosyasında yayın kanalını tanımlayın: channels.php   Broadcast::channel('chat.{id}', function ($user, $id) { return (int) $user->id === (int) $id; });  Adım 5: Mesajları Getirmek ve Göndermek için Rotaları Tanımlayın  Sohbet mesajlarının gönderilmesini ve alınmasını yönetmek için şu rotaları ekleyin:   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; });  Adım 6: Nuxt 3'te Reverb'i yapılandırın  Nuxt 3'ün Reverb ile bağlantı kurmasını sağlamak için   dosyanıza şu değişkenleri ekleyin: .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  Daha sonra bunları   yükleyin: 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, }, }, });  Adım 7: Nuxt 3'te Laravel Echo İstemcisini Kurun  Gerçek zamanlı güncellemeleri yönetmek için   eklentisini oluşturun: 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 } }; });  Adım 8: Nuxt 3'te Gerçek Zamanlı Sohbet Arayüzünü Oluşturun  Nuxt 3 uygulamamızda gerçek zamanlı sohbeti etkinleştirmek için kullanıcıların diğer kullanıcıları seçip sohbet edebileceği yeni bir sayfa,   oluşturdum. Bu sayfa, gerçek zamanlı güncellemeler ve yazım göstergeleri için Laravel Echo ve WebSockets kullanarak sohbet mesajlarını ve kullanıcı verilerini yönetmek için bir Laravel arka ucuna bağlanır. chats > [id].vue  Bu sohbet işlevselliğini nasıl yapılandırdığımıza dair bir döküm şöyle:  Adım 8.1: Seçili Kullanıcının Sohbet Verilerini Yükle  İlk olarak,   bileşeniyle URL'den   alırız. Bu   sohbet ettiğimiz kullanıcıyı tanımlar ve gerekli kullanıcı ve sohbet mesajlarını yükler. 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 kod parçacığı, sayfa bağlandığında mesajları eşzamansız olarak yüklemek için özel bir bileşen olan   kullanır. useSanctumFetch  Adım 8.2: Sohbet Mesajlarını Görüntüleme  Her mesajı dinamik olarak oluşturuyoruz ve mevcut kullanıcıdan mı yoksa sohbet katılımcısından mı geldiğine göre biçimlendiriyoruz.   <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>  Sohbet penceresi   kullanılarak otomatik olarak en son mesaja kaydırılır. nextTick()   watch( messages, () => { nextTick(() => messageContainerScrollToBottom()); }, { deep: true } ); function messageContainerScrollToBottom() { if (!messagesContainer.value) return; messagesContainer.value.scrollTo({ top: messagesContainer.value.scrollHeight, behavior: 'smooth' }); }  Adım 8.3: Yeni Mesajların Gönderilmesi  Kullanıcılar bir girdi alanıyla mesaj gönderebilirler. Gönderim üzerine, Laravel arka ucuna bir POST isteği gönderilir.   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önderildikten hemen sonra güncellenir.  Adım 8.4: Laravel Echo ile Gerçek Zamanlı Özellikler  Laravel Echo   ve   gibi önemli olayları dinler. 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 saniyelik hareketsizlikten sonra kaybolan gerçek zamanlı mesaj güncellemelerini ve yazma göstergelerini yönetir.  Adım 8.5: Yazma Göstergesi  Bir yazma göstergesi göstermek için,   ile bir "yazma" olayını tetikleriz. whisper   const sendTypingEvent = () => { if (!user.value || !currentUser.value) return; $echo.private(`chat.${user.value.id}`).whisper("typing", { userID: currentUser.value.id }); };  Bu olay, kullanıcı her yazı yazdığında gönderilir ve alıcı yazma göstergesini görür.  Adım 8.6: Kullanıcı Arayüzü  Sohbet arayüzünde, seçilen kullanıcının adının yer aldığı bir başlık ve mesajlar ile giriş alanı için bölümler yer alır.   <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 ve Echo with Nuxt 3 kullanılarak gerçek zamanlı sohbet özelliği kurulumu tamamlandı.  Çözüm  Artık Laravel, Sanctum, Reverb ve Nuxt 3 kullanarak güvenli, gerçek zamanlı bir sohbet uygulaması oluşturduk. Bu kurulum, mesaj tepkileri veya birden fazla sohbet odası gibi ek özellikleri içerecek şekilde kolayca ölçeklenebilir.  Kodun tamamı için   ziyaret edin. GitHub deposunu

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

Read My Stories

Bu ses hikayenin orijinal dilinde üretilmiştir!

Gerçek Zamanlı Sohbet Uygulaması Oluşturmak İçin İhtiyacınız Olan Çerçeveler İşte Bunlar

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps