laravel-chat: part of #38

laravel-chat/app/Livewire/ChatClient.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use WebSocket\Client as WebSocketClient; # waiting for v3 release (Declaration of WebSocket\Client::setLogger(Psr\Log\LoggerInterface $logger): WebSocket\Client must be compatible with Psr\Log\LoggerAwareInterface::setLogger(Psr\Log\LoggerInterface $logger): void)
+
+class ChatClient extends Component
+{
+    public $message;
+    public $monitorId = 'w32tgse';
+    public $token;
+    public $websocket;
+    public $output = '';
+
+    public function mount()
+    {
+        $this->login();
+    }
+
+    public function login()
+    {
+        $response = Http::post('http://127.0.0.1:6969/login', [
+            'email' => 'j.froe@gmx.at',
+            'password' => 'password',
+            'onitor_id' => $this->monitorId,
+        ]);
+
+        $this->token = $response->body();
+        $this->connectToWebSocket();
+    }
+
+    public function connectToWebSocket()
+    {
+        $wsUri = "ws://localhost:6969/chat/{$this->monitorId}?auth={$this->token}";
+        $this->websocket = new WebSocketClient($wsUri);
+
+        $this->websocket->onOpen = function () {
+            $this->output.= "<span class='sticky top-0 left-0 px-2 font-black bg-gray-300 text-lime-900'>CONNECTED</span>";
+            $this->sendMessage('ping');
+            /* pingInterval = setInterval(function () { // TODO: implement ping
+                $this->sendMessage('ping');
+            }, 5000); */
+        };
+
+        $this->websocket->onClose = function () {
+            $this->output.= "<span class='sticky top-0 left-0 px-2 font-black text-red-800 bg-gray-300'>CLOSED</span>";
+            /* clearInterval($this->pingInterval); */ // TODO: implement ping
+        };
+
+        $this->websocket->onMessage = function ($e) {
+            $this->output.= "<span class='text-right'>{$e->getContent()}</span>";
+        };
+
+        $this->websocket->onError = function () {
+            $this->output.= "<span class='sticky top-0 left-0 px-2 font-black text-red-800 bg-gray-300'>ERROR</span>";
+        };
+    }
+
+    public function sendMessage($message)
+    {
+        if ($this->websocket && $message) {
+            $this->output.= "<span class='text-left'>{$message}</span>";
+            $this->websocket->send($message);
+            $this->message = '';
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.chat-client');
+    }
+}

laravel-chat/composer.json

@@ -9,7 +9,8 @@
         "laravel/framework": "^11.0",
         "laravel/tinker": "^2.9",
         "livewire/livewire": "^3.4",
-        "livewire/volt": "^1.0"
+        "livewire/volt": "^1.0",
+        "phrity/websocket": "^2.0"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

laravel-chat/resources/views/chat.blade.php

@@ -27,7 +27,7 @@
                     </header>
 
                     <main class="min-h-screen">
-                        CHAT
+                        <livewire:chat.client /> <!-- TODO: fix me -->
                     </main>
 
                     <footer class="py-16 text-sm text-center text-black dark:text-white/70">

laravel-chat/resources/views/livewire/chat/client.blade.php

@@ -0,0 +1,14 @@
+<div class="p-8 prose">
+    <h1>Laravel Chat Client Demo</h1>
+
+    <div class="relative flex flex-col overflow-auto h-96" id="output">
+        {!! $output !!}
+    </div>
+
+    <form wire:submit.prevent="sendMessage">
+        <input type="text" wire:model="message" id="message" placeholder="Message">
+        <button class="h-full px-4 py-2 text-gray-200 bg-gray-800" type="submit">
+            Send
+        </button>
+    </form>
+</div>

laravel-chat/routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use App\Livewire\ChatClient;
 
 Route::view('/', 'chat');
 
@@ -12,4 +13,6 @@
     ->middleware(['auth'])
     ->name('profile');
 
+Route::get('/chat', ChatClient::class);
+
 require __DIR__.'/auth.php';