wip

app/Http/Livewire/Project/Application/DeploymentNavbar.php

@@ -17,8 +17,11 @@ class DeploymentNavbar extends Component
     public Application $application;
     public Server $server;
     public bool $is_debug_enabled = false;
-    protected $listeners = ['deploymentFinished'];
+    protected $listeners = ['deploymentFinished','echo:custom-channel,ApplicationDeploymentFinished' => 'notifyNewOrder'];
 
+    public function notifyNewOrder() {
+        ray('New order received');
+    }
     public function mount()
     {
         $this->application = Application::find($this->application_deployment_queue->application_id);

app/Providers/ApplicationDeploymentFinished.php

@@ -10,7 +10,7 @@
 use Illuminate\Foundation\Events\Dispatchable;
 use Illuminate\Queue\SerializesModels;
 
-class ApplicationDeploymentFinished
+class ApplicationDeploymentFinished implements ShouldBroadcast
 {
     use Dispatchable, InteractsWithSockets, SerializesModels;
 
@@ -21,7 +21,7 @@ public function __construct()
     public function broadcastOn(): array
     {
         return [
-            new PrivateChannel('application-deployment-finished'),
+            new Channel('custom-channel'),
         ];
     }
 }

config/broadcasting.php

@@ -15,7 +15,7 @@
     |
     */
 
-    'default' => env('BROADCAST_DRIVER', 'null'),
+    'default' => env('BROADCAST_DRIVER', 'log'),
 
     /*
     |--------------------------------------------------------------------------
@@ -36,10 +36,10 @@
             'secret' => env('PUSHER_APP_SECRET'),
             'app_id' => env('PUSHER_APP_ID'),
             'options' => [
-                'host' => env('PUSHER_HOST') ?: 'api-' . env('PUSHER_APP_CLUSTER', 'mt1') . '.pusher.com',
-                'port' => env('PUSHER_PORT', 443),
-                'scheme' => env('PUSHER_SCHEME', 'https'),
-                'encrypted' => true,
+                'host' => 'coolify-soketi',
+                'port' => env('PUSHER_PORT', 6001),
+                'scheme' => env('PUSHER_SCHEME', 'http'),
+                'encrypted' => false,
                 'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
             ],
             'client_options' => [

docker-compose.dev.yml

@@ -44,6 +44,13 @@ services:
     volumes:
       - /data/coolify/_volumes/redis/:/data
       # - coolify-redis-data-dev:/data
+  soketi:
+    ports:
+      - "${FORWARD_SOKETI_PORT:-6001}:6001"
+      - "${FORWARD_SOKETI_METRICS_SERVER_PORT:-9601}:9601"
+    environment:
+      SOKETI_DEBUG: "true"
+      SOKETI_METRICS_SERVER_PORT: "${SOKETI_METRICS_SERVER_PORT:-9601}"
   vite:
     image: node:20
     working_dir: /var/www/html

docker-compose.yml

@@ -24,6 +24,12 @@ services:
         restart: always
         networks:
             - coolify
+    soketi:
+        image: 'quay.io/soketi/soketi:latest-16-alpine'
+        container_name: coolify-soketi
+        restart: always
+        networks:
+            - coolify
 networks:
     coolify:
         name: coolify

package.json

@@ -9,8 +9,10 @@
         "@vitejs/plugin-vue": "4.5.0",
         "autoprefixer": "10.4.16",
         "axios": "1.6.2",
+        "laravel-echo": "^1.15.3",
         "laravel-vite-plugin": "0.8.1",
         "postcss": "8.4.31",
+        "pusher-js": "^8.4.0-rc2",
         "tailwindcss": "3.3.5",
         "vite": "4.5.0",
         "vue": "3.3.8"

resources/js/app.js

@@ -1,9 +1,25 @@
 import Alpine from "alpinejs";
-
+import Echo from 'laravel-echo';
+import Pusher from 'pusher-js';
 import { createApp } from "vue";
 import MagicBar from "./components/MagicBar.vue";
 import Toaster from "../../vendor/masmerise/livewire-toaster/resources/js";
 
+window.Pusher = Pusher;
+
+window.Echo = new Echo({
+    broadcaster: 'pusher',
+    cluster: import.meta.env.VITE_PUSHER_HOST,
+    key: import.meta.env.VITE_PUSHER_APP_KEY,
+    wsHost: import.meta.env.VITE_PUSHER_HOST,
+    wsPort: import.meta.env.VITE_PUSHER_PORT,
+    wssPort: import.meta.env.VITE_PUSHER_PORT,
+    forceTLS: false,
+    encrypted: false,
+    disableStats: true,
+    enabledTransports: ['ws', 'wss'],
+});
+
 Alpine.plugin(Toaster);
 
 window.Alpine = Alpine;
@@ -12,3 +28,8 @@ Alpine.start();
 const app = createApp({});
 app.component("magic-bar", MagicBar);
 app.mount("#vue");
+
+
+window.Echo.channel("custom-channel").listen("ApplicationDeploymentFinished", (e) => {
+    console.log(e);
+});