Muriyi nyigisho, tuzubaka porogaramu nyayo yo kuganira dukoresheje Laravel, Nuxt 3, Sanctum, na Laravel Reverb kugirango dukemure ubutumwa bwizewe kandi bwuzuye hagati yabakoresha. Tuzashyiraho umukoresha wemeza, duhuze na API itekanye, kandi tumenye neza ko ivugurura ryibiganiro ako kanya kuburambe bworoshye kandi bwitondewe.  Tuzakoresha module yo gucunga SPA kwemeza, ikora neza byombi Urupapuro rumwe rukoreshwa (SPA) hamwe no kwemeza API. Kugira ngo umenye byinshi kubyerekeye gukoresha iyi module, reba ingingo kuri   . Nuxt 3 SPA yo kwemeza  Muri uyu mushinga, tuzashyiraho Laravel Reverb mugihe nyacyo cyo gutangaza amakuru, dushyire mubikorwa kwemeza hamwe na Sanctum, kandi twubake imbere ya Nuxt 3 yerekana kandi ikayobora ubutumwa bwibiganiro. Reka dutangire!   https://www.youtube.com/watch?v=bjcM8E5s8p0&embedable=ukuri  Ibisabwa  Kumenyera shingiro na Laravel, Sanctum, na Nuxt 3.  Gusobanukirwa ibyatangajwe muri Laravel.  Umushinga wa Laravel washyizweho na Sanctum.  Nuxt 3 yashizwemo kandi igizwe nkimbere ya porogaramu yawe.  Intambwe ya 1: Shiraho Laravel Sanctum na Laravel Reverb  Ubwa mbere, menya neza ko Laravel Sanctum yashyizweho kandi igashyirwaho. Sanctum yemerera ibimenyetso-byemewe kwemeza urupapuro rumwe rukoreshwa (SPA). Noneho, shyiramo kandi ugene Laravel Reverb kubushobozi-bwigihe.  Ongeraho ibikurikira Reverb ibidukikije bihinduka muri dosiye yawe   : .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  Intambwe ya 2: Kora Ubutumwa bwo Kuganira Imbonerahamwe Kwimuka  Kubika ubutumwa bwibiganiro, kora iyimuka kumeza   . Kwiruka: chat_messages   php artisan make:migration create_chat_messages_table  Kuvugurura dosiye yimuka kuburyo bukurikira:   Schema::create('chat_messages', function (Blueprint $table) { $table->id(); $table->foreignId('receiver_id'); $table->foreignId('sender_id'); $table->text('text'); $table->timestamps(); });  Koresha kwimuka kugirango ukore imbonerahamwe:   php artisan migrate  Intambwe ya 3: Kurema Ubutumwa bwoherejwe  Kugirango utangaze ubutumwa mugihe nyacyo, kora   bwibikorwa byicyiciro: MessageSent   php artisan make:event MessageSent  Kuvugurura ibyiciro byibyiciro:   <?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}")]; } }  Intambwe ya 4: Sobanura Imiyoboro Yamamaza    , sobanura umuyoboro wogutangaza: channels.php   Broadcast::channel('chat.{id}', function ($user, $id) { return (int) $user->id === (int) $id; });  Intambwe ya 5: Sobanura inzira zo Kubona no Kohereza Ubutumwa  Ongeraho izi nzira zo gucunga kohereza no kugarura ubutumwa bwibiganiro:   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; });  Intambwe ya 6: Hindura Reverb muri Nuxt 3  Kwemerera Nuxt 3 guhuza na Reverb, ongeraho ibi bihinduka muri dosiye yawe   : .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  Noneho, ubishyire muri   : 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, }, }, });  Intambwe 7: Shiraho umukiriya wa Laravel Echo muri Nuxt 3  Gucunga amakuru yigihe-gihe, kora   plugin: 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 } }; });  Intambwe ya 8: Kubaka Imigaragarire nyayo-Ibiganiro muri Nuxt 3  Kugirango ushoboze kuganira mugihe nyacyo muri porogaramu yacu ya Nuxt 3, nashizeho page nshya,   , aho abakoresha bashobora guhitamo no kuganira nabandi bakoresha. Uru rupapuro ruhuza inyuma ya Laravel kugirango ucunge ubutumwa bwibiganiro hamwe namakuru yumukoresha, ukoresheje Laravel Echo na WebSockets mugihe nyacyo cyo kuvugurura no kwerekana ibimenyetso. chats > [id].vue  Dore ibice byuburyo twateguye iyi mikorere yo kuganira:  Intambwe 8.1: Fungura amakuru Yatoranijwe Yabakoresha  Ubwa mbere, dukura   muri URL hamwe no   ihimbye. Uyu   yerekana umukoresha tuganira kandi yikoreza umukoresha n'ubutumwa bwo kuganira. 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[] => [] } );  Aka gatabo gakoresha   , yihariye igizwe, kugirango yikoreze ubutumwa butajegajega iyo page ihagaze. useSanctumFetch  Intambwe 8.2: Kwerekana Ubutumwa bwo Kuganira  Dutanga buri butumwa muburyo bukomeye, tukabushushanya dukurikije niba bituruka kubakoresha ubu cyangwa abitabiriye ibiganiro.   <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>  Idirishya ryibiganiro rihita ryerekeza kubutumwa buheruka ukoresheje   . nextTick()   watch( messages, () => { nextTick(() => messageContainerScrollToBottom()); }, { deep: true } ); function messageContainerScrollToBottom() { if (!messagesContainer.value) return; messagesContainer.value.scrollTo({ top: messagesContainer.value.scrollHeight, behavior: 'smooth' }); }  Intambwe 8.3: Kohereza Ubutumwa bushya  Abakoresha barashobora kohereza ubutumwa hamwe numwanya winjiza. Mugihe cyoherejwe, icyifuzo cya POST cyoherejwe inyuma ya Laravel.   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 = ""; };  Ubutumwa buravugururwa ako kanya nyuma yo koherezwa.  Intambwe 8.4: Ibihe-Ibiranga na Laravel Echo  Laravel Echo yumva ibintu byingenzi nka   no   . 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); }); } });  Ibi bikora ubutumwa bwigihe-gihe cyo kuvugurura no kwandika ibipimo, bikabura nyuma yisegonda yo kudakora.  Intambwe 8.5: Ikimenyetso cyo Kwandika  Kugirango twerekane icyerekezo cyo kwandika, dukurura "kwandika" ibyabaye   . whisper   const sendTypingEvent = () => { if (!user.value || !currentUser.value) return; $echo.private(`chat.${user.value.id}`).whisper("typing", { userID: currentUser.value.id }); };  Ibirori byoherejwe igihe cyose umukoresha yanditse, kandi uyahawe abona icyerekezo cyo kwandika.  Intambwe 8.6: Imigaragarire y'abakoresha  Isohora ryibiganiro ririmo umutwe hamwe nizina ryatoranijwe ryumukoresha nibice byubutumwa hamwe numwanya winjiza.   <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>  Ibi birangiza igihe nyacyo cyo kuganira ukoresheje Laravel Sanctum na Echo hamwe na Nuxt 3.  Umwanzuro  Ubu twashizeho porogaramu itekanye, mugihe nyacyo cyo kuganira dukoresheje Laravel, Sanctum, Reverb, na Nuxt 3. Iyi mikorere irashobora kugabanywa byoroshye kugirango ushiremo ibintu byongeweho nkibisubizo byubutumwa cyangwa ibyumba byinshi byo kuganiriramo.  Kode yuzuye, sura   . ububiko bwa GitHub

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

Read My Stories

Aya majwi yakozwe mururimi rwumwimerere rwinkuru!

Hano haribikorwa ukeneye kubaka Porogaramu nyayo-Ikiganiro

About Author

IBITEKEREZO

HANG TAGS

IYI ngingo YATANZWE MU

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps