Дар ин дастур, мо бо истифода аз 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.  Фаҳмидани пахши рӯйдодҳо дар Ларавел.  Лоиҳаи Laravel бо 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(); });  Муҳоҷиратро барои сохтани ҷадвал иҷро кунед:   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 дар 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 пайваст мешавад, то паёмҳои чат ва маълумоти корбарро идора кунад, бо истифода аз 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 ба пуштибонии 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 = ""; };  Паёмҳо фавран пас аз фиристодан нав карда мешаванд.  Қадами 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