PrivateChannel

app/Events/PrivateSubmit.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Events;
+
+use App\Models\User;
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Carbon;
+
+class PrivateSubmit implements ShouldBroadcast
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    /**
+     * Create a new event instance.
+     *
+     * @param  string  $name
+     * @param  string  $chat
+     * @param  string  $datetime
+     */
+    public function __construct(
+        protected int $user_id,
+        public string $name,
+        public string $chat,
+        public string $datetime = new Carbon(),
+    ) {
+        //
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        return new PrivateChannel('private.'.$this->user_id);
+    }
+}

app/Http/Controllers/PrivateController.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Events\PrivateSubmit;
+use Illuminate\Http\Request;
+
+class PrivateController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function __invoke(Request $request)
+    {
+        PrivateSubmit::broadcast($request->user()->id, $request->user()->name, $request->input('chat'));
+
+        return to_route('dashboard');
+    }
+}

resources/js/Pages/Dashboard.vue

@@ -2,6 +2,7 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import { Head } from '@inertiajs/inertia-vue3';
 import PresenceChannel from '@/Pages/PresenceChannel.vue'
+import PrivateChannel from '@/Pages/PrivateChannel.vue'
 </script>
 
 <template>
@@ -24,6 +25,16 @@ import PresenceChannel from '@/Pages/PresenceChannel.vue'
             </div>
         </div>
 
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                    <div class="p-6 text-gray-900">
+                        <PrivateChannel/>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="py-12">
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                 <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">

resources/js/Pages/PrivateChannel.vue

@@ -0,0 +1,66 @@
+<script setup>
+import InputError from '@/Components/InputError.vue'
+import PrimaryButton from '@/Components/PrimaryButton.vue'
+import TextInput from '@/Components/TextInput.vue'
+import { useForm, usePage } from '@inertiajs/inertia-vue3'
+import { ref } from 'vue'
+
+const items = ref([])
+
+const user = usePage().props.value.auth.user
+
+const form = useForm({
+    chat: 'test private',
+})
+
+const submit = () => {
+    form.post(route('private.create'), {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.reset()
+        },
+        onError: () => {
+            console.log(form)
+        },
+    })
+}
+
+Echo.private(`private.${user.id}`).error((error) => {
+    console.error(error)
+}).listen('PrivateSubmit', (e) => {
+    items.value.unshift({
+        'name': e.name,
+        'chat': e.chat,
+        'datetime': e.datetime,
+    })
+})
+</script>
+
+<template>
+    <section>
+        <h2 class="text-2xl">PrivateChannel</h2>
+
+        <form @submit.prevent="submit" class="mt-6 space-y-2">
+            <div>
+                {{ user.name }}
+            </div>
+
+            <div>
+                <TextInput id="chat" type="text" class="block w-full" v-model="form.chat" required/>
+                <InputError class="mt-2" :message="form.errors.chat"/>
+            </div>
+
+            <div>
+                <PrimaryButton :disabled="form.processing">Submit</PrimaryButton>
+            </div>
+        </form>
+
+        <div class="my-6">
+            <div v-for="item of items" class="border-b">
+                <span class="font-bold text-indigo-500">{{ item.name }}</span>
+                <span class="mx-5">{{ item.chat }}</span>
+                <span class="text-gray-300 text-sm">{{ item.datetime }}</span>
+            </div>
+        </div>
+    </section>
+</template>

routes/channels.php

@@ -20,3 +20,7 @@
 Broadcast::channel('presence', function ($user) {
     return ['id' => $user->id, 'name' => $user->name];
 });
+
+Broadcast::channel('private.{id}', function ($user, $id) {
+    return (int) $user->id === (int) $id;
+});

routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\PresenceController;
+use App\Http\Controllers\PrivateController;
 use App\Http\Controllers\ProfileController;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
@@ -38,6 +39,7 @@
 
 Route::middleware('auth')->group(function () {
     Route::post('/presence/chat', PresenceController::class)->name('presence.create');
+    Route::post('/private/chat', PrivateController::class)->name('private.create');
 });
 
 require __DIR__.'/auth.php';