තත්‍ය කාලීන කතාබස් යෙදුමක් තැනීමට ඔබට අවශ්‍ය රාමු මෙන්න

මෙම නිබන්ධනයේදී, අපි පරිශීලකයන් අතර ආරක්ෂිත සහ සජීවී පණිවිඩ යැවීම සඳහා Laravel, Nuxt 3, Sanctum, සහ Laravel Reverb භාවිතයෙන් තත්‍ය කාලීන කතාබස් යෙදුමක් ගොඩනඟමු. අපි පරිශීලක සත්‍යාපනය සකසන්නෙමු, ආරක්ෂිත API වෙත සම්බන්ධ වන්නෙමු, සහ සුමට සහ ප්‍රතිචාරාත්මක අත්දැකීමක් සඳහා චැට් ක්ෂණිකව යාවත්කාලීන වන බව සහතික කරන්නෙමු.

තනි පිටු යෙදුම (SPA) සහ API සත්‍යාපනය යන දෙකම කාර්යක්ෂමව හසුරුවන SPA සත්‍යාපනය කළමනාකරණය කිරීමට අපි මොඩියුලය භාවිතා කරන්නෙමු. මෙම මොඩියුලය භාවිතා කිරීම ගැන වැඩිදුර දැන ගැනීමට, Nuxt 3 SPA සත්‍යාපනය පිළිබඳ ලිපිය බලන්න.

මෙම ව්‍යාපෘතියේදී, අපි තත්‍ය කාලීන සිදුවීම් විකාශනය සඳහා Laravel Reverb වින්‍යාස කරන්නෙමු, Sanctum සමඟ සත්‍යාපනය ක්‍රියාත්මක කරන්නෙමු, සහ කතාබස් පණිවිඩ ගතිකව සංදර්ශන කරන සහ කළමනාකරණය කරන Nuxt 3 ඉදිරිපස එකක් ගොඩනඟන්නෙමු. අපි පටන් ගනිමු!

පූර්වාවශ්යතාවයන්

• Laravel, Sanctum, සහ Nuxt 3 සමඟ මූලික හුරුපුරුදුකම.
• Laravel හි සිදුවීම් විකාශනය පිළිබඳ අවබෝධය.
• ශුද්ධස්ථානය සමඟ පිහිටුවා ඇති Laravel ව්‍යාපෘතියක්.
• Nuxt 3 ඔබගේ යෙදුමේ ඉදිරිපස ලෙස ස්ථාපනය කර වින්‍යාස කර ඇත.

පියවර 1: Laravel Sanctum සහ Laravel Reverb සකසන්න

පළමුව, Laravel Sanctum ස්ථාපනය කර වින්‍යාස කර ඇති බවට සහතික වන්න. තනි පිටු යෙදුම් (SPA) සඳහා ටෝකන් මත පදනම් වූ සත්‍යාපනයට ශුද්ධස්ථානය ඉඩ දෙයි. පසුව, තත්‍ය කාලීන හැකියාවන් සඳහා Laravel Reverb ස්ථාපනය කර වින්‍යාස කරන්න.

ඔබගේ .env ගොනුවට පහත Reverb පරිසර විචල්‍ය එක් කරන්න:

 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 Table Migration සාදන්න

කතාබස් පණිවිඩ ගබඩා කිරීමට, 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 Event එක සාදන්න

තත්‍ය කාලීන පණිවිඩ විකාශනය කිරීම සඳහා, 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: Nuxt 3 හි Reverb වින්‍යාස කරන්න

Reverb සමඟ සම්බන්ධ වීමට Nuxt 3 ට ඉඩ දීමට, ඔබේ .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: Nuxt 3 හි Laravel Echo Client සකසන්න

තත්‍ය කාලීන යාවත්කාලීන කළමනාකරණය කිරීමට, 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 යෙදුම තුළ තත්‍ය කාලීන කතාබස් සබල කිරීමට, මම නව පිටුවක් නිර්මාණය කළෙමි, chats > [id].vue , එහිදී පරිශීලකයින්ට වෙනත් පරිශීලකයින් තෝරාගෙන කතාබස් කළ හැකිය. මෙම පිටුව තත්‍ය කාලීන යාවත්කාලීන කිරීම් සහ ටයිප් කිරීමේ දර්ශක සඳහා Laravel Echo සහ WebSockets භාවිතා කරමින් කතාබස් පණිවිඩ සහ පරිශීලක දත්ත කළමනාකරණය කිරීමට Laravel පසුපෙළකට සම්බන්ධ වේ.

මෙන්න අපි මෙම කතාබස් ක්‍රියාකාරීත්වය ව්‍යුහගත කළ ආකාරය පිළිබඳ බිඳවැටීමක්:

පියවර 8.1: තෝරාගත් පරිශීලකයාගේ කතාබස් දත්ත පූරණය කරන්න

පළමුව, අපි useRoute composable සමඟ URL එකෙන් 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[] => [] } );

පිටුව සවි කරන විට අසමමුහුර්තව පණිවිඩ පූරණය කිරීමට, අභිරුචි රචනා කළ හැකි 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 ගබඩාව වෙත පිවිසෙන්න.