このチュートリアルでは、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 でのイベントブロードキャストの理解。  Sanctum でセットアップされた Laravel プロジェクト。  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: 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: Nuxt 3 で Laravel Echo クライアントをセットアップする リアルタイム更新を管理するには、  プラグインを作成します。 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 と WebSocket を使用します。 chats > [id].vue このチャット機能の構造の詳細は次のとおりです。 ステップ8.1: 選択したユーザーのチャットデータを読み込む まず、  コンポーザブルを使用して 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); }); } }); これはリアルタイムのメッセージ更新と入力インジケーターを処理します。これらは 1 秒間操作しないと消えます。 ステップ 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> これで、Nuxt 3 で Laravel Sanctum と Echo を使用したリアルタイム チャット機能のセットアップが完了します。 結論 これで、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

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

ユニークなエコシステムを支えるビットコインUTXOのモデル

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

ユニークなエコシステムを支えるビットコインUTXOのモデル

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps