Kule tutorial, siya kwakha isicelo sencoko yexesha langempela sisebenzisa iLaravel, Nuxt 3, Sanctum, kunye neReverb yeLaravel ukuphatha imiyalezo ekhuselekileyo kunye nephilayo phakathi kwabasebenzisi. Siza kuseka ukuqinisekiswa komsebenzisi, ukudibanisa kwi-API ekhuselekileyo, kwaye siqinisekise ukuba i-chat updates ngoko nangoko ukwenzela amava agudileyo kwaye aphendule.  Siza kusebenzisa imodyuli ukulawula ukuqinisekiswa kwe-SPA, ephethe ngokufanelekileyo zombini iSicelo sePhepha elinye (SPA) kunye nokuqinisekiswa kwe-API. Ukufunda ngakumbi malunga nokusebenzisa le modyuli, jonga inqaku kwiNuxt   . 3 SPA ungqinisiso  Kule projekthi, siya kumisela iReverb yeLaravel yokusasazwa komsitho wexesha lokwenyani, siphumeze ukuqinisekiswa ngeSanctum, kwaye sakhe i-Nuxt 3 frontend ebonisa ngamandla kwaye ilawule imiyalezo yencoko. Masiqalise!   https://www.youtube.com/watch?v=bjcM8E5s8p0&embedable=true  Izinto ezifunekayo kuqala  Ukuqhelana okusisiseko neLaravel, iSanctum, kunye neNux 3.  Ukuqonda umcimbi wokusasaza eLaravel.  Iprojekthi yeLaravel esekwe kunye neSanctum.  I-Nux 3 ifakiwe kwaye iqwalaselwe njenge-frontend ye-app yakho.  Inyathelo 1: Seta iLaravel Sanctum kunye neReverb yeLaravel  Okokuqala, qinisekisa ukuba iLaravel Sanctum ifakiwe kwaye iqwalaselwe. I-Sanctum ivumela ukuqinisekiswa okusekelwe kwi-token kwizicelo zephepha elinye (SPA). Emva koko, faka kwaye uqwalasele i-Laravel Reverb yezakhono zexesha langempela.  Yongeza oku kulandelayo kwimo yendalo eguquguqukayo yeReverb kwifayile yakho   : .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  Inyathelo 2: Yenza Imiyalezo yeNgxoxo yokuFuduka kweTheyibhile  Ukugcina imiyalezo yencoko, yenza ukufuduka kwitheyibhile ye   . Baleka: chat_messages   php artisan make:migration create_chat_messages_table  Hlaziya ifayile yokufuduka ngolu hlobo lulandelayo:   Schema::create('chat_messages', function (Blueprint $table) { $table->id(); $table->foreignId('receiver_id'); $table->foreignId('sender_id'); $table->text('text'); $table->timestamps(); });  Qhuba umfuduko ukwenza itheyibhile:   php artisan migrate  Inyathelo 3: Yenza i-MessageSent Event  Ukusasaza imiyalezo ngexesha lokwenyani, yenza iklasi yomsitho   : MessageSent   php artisan make:event MessageSent  Hlaziya iklasi yomsitho:   <?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}")]; } }  Inyathelo lesi-4: Chaza iiNdawo zoSasazo    , chaza ijelo losasazo: channels.php   Broadcast::channel('chat.{id}', function ($user, $id) { return (int) $user->id === (int) $id; });  Inyathelo lesi-5: Chaza iindlela zokuThanda nokuThumela iMiyalezo  Yongeza ezi ndlela ukuze ulawule ukuthumela kunye nokufumana imiyalezo yencoko:   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; });  Inyathelo lesi-6: Lungiselela iReverb kwiNuxt 3  Ukuvumela i-Nux 3 ukuba iqhagamshelane neReverb, yongeza ezi ziguquguqukayo kwifayile yakho   : .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  Emva koko, zilayishe ku   : 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, }, }, });  Inyathelo lesi-7: Seta iLaravel Echo Client kwi-Nuxt 3  Ukulawula uhlaziyo lwexesha lokwenyani, yenza iplagin   : 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 } }; });  Inyathelo lesi-8: Yakha iNxulumano yeXesha lokwenyani kwiNuxt 3  Ukuvumela ingxoxo yexesha langempela kwi-app yethu ye-Nuxt 3, ndenze iphepha elitsha,   , apho abasebenzisi banokukhetha kwaye baxoxe nabanye abasebenzisi. Eli phepha lidibanisa kwi-backend ye-Laravel yokulawula imiyalezo yengxoxo kunye nedatha yomsebenzisi, usebenzisa i-Laravel Echo kunye ne-WebSockets yokuhlaziywa kwexesha langempela kunye nezikhombisi zokuchwetheza. chats > [id].vue  Nalu ucazululo lwendlela esiye sayimisa ngayo le ncoko:  Inyathelo 8.1: Layisha idatha yeNcoko yoMsebenzisi okhethiweyo  Okokuqala, sifumana kwakhona i   kwi-URL kunye ne   composable. Le   ichonga umsebenzisi esincokola naye kwaye ilayishe umsebenzisi oyimfuneko kunye nemiyalezo yencoko. 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[] => [] } );  Le snippet isebenzisa   , isiko elinokuqulunqwa, ukulayisha imiyalezo ngokulandelelanayo xa iphepha linyuswa. useSanctumFetch  Inyathelo 8.2: Ukubonisa imiyalezo yeNgxoxo  Sinikezela ngomyalezo ngamnye ngokuguquguqukayo, siwenza isimbo ngokusekelwe ekubeni usuka kumsebenzisi wangoku okanye umthathi-nxaxheba wengxoxo.   <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>  Ifestile yencoko iya kumyalezo wamva nje ngokuzenzekelayo isebenzisa   . nextTick()   watch( messages, () => { nextTick(() => messageContainerScrollToBottom()); }, { deep: true } ); function messageContainerScrollToBottom() { if (!messagesContainer.value) return; messagesContainer.value.scrollTo({ top: messagesContainer.value.scrollHeight, behavior: 'smooth' }); }  Inyathelo 8.3: Ukuthumela imiyalezo emitsha  Abasebenzisi banokuthumela imiyalezo ngommandla wongeniso. Emva kokungeniswa, isicelo se-POST sithunyelwa kwi-backend ye-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 = ""; };  Imiyalezo ihlaziywa ngoko nangoko emva kokuba ithunyelwe.  Inyathelo 8.4: Iimpawu zexesha langempela kunye neLaravel Echo  I-Laravel Echo imamele iziganeko eziphambili ezifana   kunye   . 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); }); } });  Oku kuphatha uhlaziyo lomyalezo wexesha lokwenyani kunye nezalathi zokuchwetheza, ezinyamalalayo emva kwesibini sokungasebenzi.  Inyathelo 8.5: Isalathisi sokuChwetheza  Ukubonisa isalathisi sokuchwetheza, siqalisa isiganeko "sokuchwetheza"   . whisper   const sendTypingEvent = () => { if (!user.value || !currentUser.value) return; $echo.private(`chat.${user.value.id}`).whisper("typing", { userID: currentUser.value.id }); };  Esi siganeko sithunyelwa nanini na umsebenzisi echwetheza, kwaye umamkeli ebona isalathisi sokuchwetheza.  Inyathelo 8.6: Ujongano lomsebenzisi  Ujongano lwengxoxo lubandakanya iheader enegama lomsebenzisi okhethiweyo kunye namacandelo emiyalezo kunye nendawo yokufaka.   <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>  Oku kugqiba ukuseta inqaku lencoko yexesha lokwenyani usebenzisa iLaravel Sanctum kunye ne-Echo ngeNuxt 3.  Ukuqukumbela  Ngoku senze inkqubo yencoko ekhuselekileyo, yexesha lokwenyani sisebenzisa iLaravel, iSanctum, iReverb, kunye ne-Nuxt 3. Olu cwangciso lunokwenyuswa ngokulula ukuze luquke iimpawu ezongezelelweyo ezifana nempendulo yomyalezo okanye iingxoxo ezininzi.  Ngekhowudi epheleleyo, tyelela i   . -GitHub yokugcina

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

Read My Stories

Le audio iveliswe ngolwimi lokuqala lwebali!

Nazi iiFrameworks ozifunayo ukuze wakhe i-Real-Time Chat App

About Author

IZIMVO

ZIJONGE IIMPAWU

ELI NQAKU LINIKEZELWE KU

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps