මෙම නිබන්ධනයේදී, අපි පරිශීලකයන් අතර ආරක්ෂිත සහ සජීවී පණිවිඩ යැවීම සඳහා Laravel, Nuxt 3, Sanctum, සහ Laravel Reverb භාවිතයෙන් තත්‍ය කාලීන කතාබස් යෙදුමක් ගොඩනඟමු. අපි පරිශීලක සත්‍යාපනය සකසන්නෙමු, ආරක්ෂිත API වෙත සම්බන්ධ වන්නෙමු, සහ සුමට සහ ප්‍රතිචාරාත්මක අත්දැකීමක් සඳහා චැට් ක්ෂණිකව යාවත්කාලීන වන බව සහතික කරන්නෙමු.  තනි පිටු යෙදුම (SPA) සහ API සත්‍යාපනය යන දෙකම කාර්යක්ෂමව හසුරුවන SPA සත්‍යාපනය කළමනාකරණය කිරීමට අපි මොඩියුලය භාවිතා කරන්නෙමු. මෙම මොඩියුලය භාවිතා කිරීම ගැන වැඩිදුර දැන ගැනීමට,   පිළිබඳ ලිපිය බලන්න. Nuxt 3 SPA සත්‍යාපනය  මෙම ව්‍යාපෘතියේදී, අපි තත්‍ය කාලීන සිදුවීම් විකාශනය සඳහා Laravel Reverb වින්‍යාස කරන්නෙමු, Sanctum සමඟ සත්‍යාපනය ක්‍රියාත්මක කරන්නෙමු, සහ කතාබස් පණිවිඩ ගතිකව සංදර්ශන කරන සහ කළමනාකරණය කරන Nuxt 3 ඉදිරිපස එකක් ගොඩනඟන්නෙමු. අපි පටන් ගනිමු!   https://www.youtube.com/watch?v=bjcM8E5s8p0&embedable=true  පූර්වාවශ්යතාවයන්  Laravel, Sanctum, සහ Nuxt 3 සමඟ මූලික හුරුපුරුදුකම.  Laravel හි සිදුවීම් විකාශනය පිළිබඳ අවබෝධය.  ශුද්ධස්ථානය සමඟ පිහිටුවා ඇති Laravel ව්‍යාපෘතියක්.  Nuxt 3 ඔබගේ යෙදුමේ ඉදිරිපස ලෙස ස්ථාපනය කර වින්‍යාස කර ඇත.  පියවර 1: Laravel Sanctum සහ Laravel Reverb සකසන්න  පළමුව, Laravel 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 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 යෙදුම තුළ තත්‍ය කාලීන කතාබස් සබල කිරීමට, මම නව පිටුවක් නිර්මාණය කළෙමි,   , එහිදී පරිශීලකයින්ට වෙනත් පරිශීලකයින් තෝරාගෙන කතාබස් කළ හැකිය. මෙම පිටුව තත්‍ය කාලීන යාවත්කාලීන කිරීම් සහ ටයිප් කිරීමේ දර්ශක සඳහා Laravel Echo සහ WebSockets භාවිතා කරමින් කතාබස් පණිවිඩ සහ පරිශීලක දත්ත කළමනාකරණය කිරීමට Laravel පසුපෙළකට සම්බන්ධ වේ. chats > [id].vue  මෙන්න අපි මෙම කතාබස් ක්‍රියාකාරීත්වය ව්‍යුහගත කළ ආකාරය පිළිබඳ බිඳවැටීමක්:  පියවර 8.1: තෝරාගත් පරිශීලකයාගේ කතාබස් දත්ත පූරණය කරන්න  පළමුව, අපි   composable සමඟ URL එකෙන්   ලබා ගනිමු. මෙම   අප කතාබස් කරන පරිශීලකයා හඳුනාගෙන අවශ්‍ය පරිශීලක සහ කතාබස් පණිවිඩ පූරණය කරයි. 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[] => [] } );  පිටුව සවි කරන විට අසමමුහුර්තව පණිවිඩ පූරණය කිරීමට, අභිරුචි රචනා කළ හැකි   භාවිතා කරයි. 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

මෙම ශ්‍රව්‍යය කතාවේ මුල් භාෂාවෙන් නිෂ්පාදනය කර ඇත!

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

About Author

අදහස්

ටැග් එල්ලන්න

මෙම ලිපිය ඉදිරිපත් කරන ලදී

Related Stories

The #blockchain-api Writing Contest by dRPC & HackerNoon: Results Announcement 🎉

The Spacecoin Writing Contest by Spacecoin and HackerNoon: Round 1 ප්රතිඵල

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

Spring Into New Features: Smarter Notifications, More Writing Stats, Pixel Icon Library & More

The #blockchain-api Writing Contest by dRPC & HackerNoon: Results Announcement 🎉

The Spacecoin Writing Contest by Spacecoin and HackerNoon: Round 1 ප්රතිඵල

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

Spring Into New Features: Smarter Notifications, More Writing Stats, Pixel Icon Library & More

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps