DDEV Laravel Vue Inertia JS

### Step 1: Install Laravel Echo and Socket.IO

First, make sure you have the required packages installed in your Laravel project:

composer require pusher/pusher-php-server
npm install --save laravel-echo socket.io-client

### Step 2: Configure Broadcasting

1. **Update `.env` file**: Configure your broadcasting settings. For example, if you are using Pusher:

BROADCAST_DRIVER=pusher

   PUSHER_APP_ID=your-pusher-app-id
   PUSHER_APP_KEY=your-pusher-app-key
   PUSHER_APP_SECRET=your-pusher-app-secret
   PUSHER_APP_CLUSTER=your-pusher-app-cluster

2. **Update `config/broadcasting.php`**: Ensure the Pusher configuration is set up correctly.

### Step 3: Set Up Laravel Event

1. **Create an event**: Use Artisan to create an event that you will broadcast.

php artisan make:event MessageSent

2. **Implement the event**: Open the created event class (e.g., `app/Events/MessageSent.php`) and implement the `ShouldBroadcast` interface.

namespace AppEvents;

   use IlluminateBroadcastingChannel;
   use IlluminateBroadcastingInteractsWithSockets;
   use IlluminateBroadcastingPresenceChannel;
   use IlluminateBroadcastingPrivateChannel;
   use IlluminateContractsBroadcastingShouldBroadcast;
   use IlluminateFoundationEventsDispatchable;
   use IlluminateQueueSerializesModels;

   class MessageSent implements ShouldBroadcast
   {
       use Dispatchable, InteractsWithSockets, SerializesModels;

       public $message;

       public function __construct($message)
       {
           $this->message = $message;
       }

       public function broadcastOn()
       {
           return new Channel('chat');
       }
   }

### Step 4: Trigger the Event

In your controller, you can trigger the event when a certain action occurs (e.g., sending a message).

use AppEventsMessageSent;

public function sendMessage(Request $request)
{
    $message = $request->input('message');
    
    // Broadcast the event
    broadcast(new MessageSent($message));

    return response()->json(['status' => 'Message Sent!']);
}

### Step 5: Set Up Laravel Echo in Vue.js

1. **Install Echo**: If you haven't already, install Laravel Echo and Socket.IO:

npm install --save laravel-echo socket.io-client

2. **Configure Echo**: Create an `echo.js` file in your resources/js directory and configure it.

import Echo from "laravel-echo";
   window.Pusher = require('pusher-js');

   window.Echo = new Echo({
       broadcaster: 'pusher',
       key: process.env.MIX_PUSHER_APP_KEY,
       cluster: process.env.MIX_PUSHER_APP_CLUSTER,
       forceTLS: true,
   });

3. **Listen for Events**: In your Vue component, listen for the event.

<template>
       <div>
           <h1>Chat</h1>
           <ul>
               <li v-for="msg in messages" :key="msg">{{ msg }}</li>
           </ul>
           <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
       </div>
   </template>

   <script>
   export default {
       data() {
           return {
               messages: [],
               newMessage: ''
           };
       },
       mounted() {
           window.Echo.channel('chat')
               .listen('MessageSent', (e) => {
                   this.messages.push(e.message);
               });
       },
       methods: {
           sendMessage() {
               axios.post('/send-message', { message: this.newMessage });
               this.newMessage = '';
           }
       }
   };
   </script>

### Step 6: Run Your Application

Start your DDEV environment:

ddev start

Make sure your WebSocket server is running if you’re using something like Pusher or Redis.

### Step 7: Test the Setup

– Open your application in multiple tabs.
– Send messages from one tab and see them appear in real-time in the others.

### Additional Configuration

If you are using Laravel's built-in broadcasting with Redis, ensure Redis is set up correctly in your DDEV environment, and adjust the broadcasting driver and configurations in your `.env` file accordingly.

This setup should provide a basic real-time broadcasting feature in your Laravel application using Vue.js and Inertia.js within a DDEV environment.

### Step 1: Install Required Packages

Make sure you have the necessary packages installed in your Laravel project:

composer require beyondcode/laravel-websockets
npm install --save laravel-echo socket.io-client

### Step 2: Configure Reverb

1. **Set Up Reverb**: In your Laravel application, install the Reverb package by adding it to your `composer.json`:

composer require reverb/reverb

2. **Publish Configuration**: Publish the Reverb configuration file if necessary:

php artisan vendor:publish --provider="ReverbReverbServiceProvider"

3. **Configure Reverb**: Update the configuration file located at `config/reverb.php` with your settings. Ensure you set the correct `port` and `host` for Reverb.

### Step 3: Update .env File

Make sure to add or update the following entries in your `.env` file to match your Reverb setup:

BROADCAST_DRIVER=reverb
REVERB_PORT=6001

### Step 4: Create Laravel Event

1. **Create an Event**: Create an event that will be broadcasted when a message is sent.

php artisan make:event MessageSent

2. **Implement the Event**: Open the created event class (e.g., `app/Events/MessageSent.php`) and implement the `ShouldBroadcast` interface.

namespace AppEvents;

   use IlluminateBroadcastingChannel;
   use IlluminateBroadcastingInteractsWithSockets;
   use IlluminateBroadcastingPresenceChannel;
   use IlluminateBroadcastingPrivateChannel;
   use IlluminateContractsBroadcastingShouldBroadcast;
   use IlluminateFoundationEventsDispatchable;
   use IlluminateQueueSerializesModels;

   class MessageSent implements ShouldBroadcast
   {
       use Dispatchable, InteractsWithSockets, SerializesModels;

       public $message;

       public function __construct($message)
       {
           $this->message = $message;
       }

       public function broadcastOn()
       {
           return new Channel('chat');
       }
   }

### Step 5: Trigger the Event

In your controller, trigger the event when a user sends a message.

use AppEventsMessageSent;

public function sendMessage(Request $request)
{
    $message = $request->input('message');
    
    // Broadcast the event
    broadcast(new MessageSent($message));

    return response()->json(['status' => 'Message Sent!']);
}

### Step 6: Configure Laravel Echo

1. **Create `echo.js`**: In your `resources/js` directory, create a file named `echo.js` and configure it to connect to Reverb.

import Echo from "laravel-echo";
   window.Reverb = require('reverb');

   window.Echo = new Echo({
       broadcaster: 'reverb',
       host: window.location.hostname + ':6001', // Change this if necessary
   });

2. **Include `echo.js`**: Import `echo.js` in your main JavaScript entry file (usually `app.js` or `app.vue`).

require('./echo');

### Step 7: Listen for Events in Vue.js

1. **Set Up Vue Component**: In your Vue component, listen for the `MessageSent` event.

<template>
       <div>
           <h1>Chat</h1>
           <ul>
               <li v-for="msg in messages" :key="msg">{{ msg }}</li>
           </ul>
           <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
       </div>
   </template>

   <script>
   export default {
       data() {
           return {
               messages: [],
               newMessage: ''
           };
       },
       mounted() {
           window.Echo.channel('chat')
               .listen('MessageSent', (e) => {
                   this.messages.push(e.message);
               });
       },
       methods: {
           sendMessage() {
               axios.post('/send-message', { message: this.newMessage });
               this.newMessage = '';
           }
       }
   };
   </script>

### Step 8: Run Your Application

Start your DDEV environment:

ddev start

Make sure Reverb is configured and running. You can start Reverb using the command:

php artisan reverb:serve

### Step 9: Test the Setup

– Open your application in multiple tabs or windows.
– Send messages from one tab and verify that they appear in real time in the others.

### Additional Configuration

If you face any issues, ensure that your firewall or server settings allow traffic on the specified Reverb port (6001 in this case). You may need to adjust your DDEV configuration or networking settings accordingly.

This setup should allow you to use Reverb for broadcasting in your Laravel application with Vue.js and Inertia.js, providing real-time communication features.

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
broadcaster: 'reverb',
key: import.meta.env.VITE_REVERB_APP_KEY,
wsHost: import.meta.env.VITE_REVERB_HOST,
wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
});
adjust in abovew

### Adjusted Code

import Echo from 'laravel-echo';
import Reverb from 'reverb-js'; // Ensure you import the Reverb library

window.Reverb = Reverb;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY, // Use your Reverb app key
    wsHost: import.meta.env.VITE_REVERB_HOST, // Use your Reverb host
    wsPort: import.meta.env.VITE_REVERB_PORT ? parseInt(import.meta.env.VITE_REVERB_PORT) : 80, // Default to 80 if not set
    wssPort: import.meta.env.VITE_REVERB_PORT ? parseInt(import.meta.env.VITE_REVERB_PORT) : 443, // Default to 443 if not set
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https', // Check if TLS should be forced
    enabledTransports: ['ws', 'wss'], // Enable WebSocket and Secure WebSocket
});

### Key Adjustments Made

1. **Import Reverb**: Make sure to import the Reverb library. If you're using `reverb-js`, ensure it's installed via npm or yarn.

npm install reverb-js

2. **Parse Int for Ports**: The `wsPort` and `wssPort` variables use `parseInt` to ensure they are treated as integers.

3. **Default Values for Ports**: If `VITE_REVERB_PORT` is not set, the code defaults to 80 for `wsPort` and 443 for `wssPort`.

4. **Force TLS**: The `forceTLS` option is set based on whether the `VITE_REVERB_SCHEME` environment variable is `https`.

### Usage

1. **Environment Variables**: Make sure to define the following variables in your `.env` or `.env.local` file:

VITE_REVERB_APP_KEY=your_reverb_app_key
   VITE_REVERB_HOST=your_reverb_host
   VITE_REVERB_PORT=6001  # or any other port you're using
   VITE_REVERB_SCHEME=https

2. **Run Your Application**: After adjusting the code and environment variables, ensure you start your DDEV environment and Reverb server:

ddev start
   php artisan reverb:serve

3. **Test the Setup**: You can now test your real-time functionality by sending and receiving messages through your Vue.js components.

This should provide a robust setup for using Reverb with Laravel Echo in your Vue.js application. Let me know if you have any further questions or issues!

### Adjusted Code with `window.location.hostname`

import Echo from 'laravel-echo';
import Reverb from 'reverb-js'; // Ensure you import the Reverb library

window.Reverb = Reverb;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY, // Use your Reverb app key
    wsHost: window.location.hostname, // Set the WebSocket host to the current hostname
    wsPort: import.meta.env.VITE_REVERB_PORT ? parseInt(import.meta.env.VITE_REVERB_PORT) : 6001, // Default to 6001 if not set
    wssPort: import.meta.env.VITE_REVERB_PORT ? parseInt(import.meta.env.VITE_REVERB_PORT) : 443, // Default to 443 if not set
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https', // Check if TLS should be forced
    enabledTransports: ['ws', 'wss'], // Enable WebSocket and Secure WebSocket
});

### Key Adjustments Made

1. **Set `wsHost` to `window.location.hostname`**: This automatically uses the hostname of the current page where your JavaScript is running, ensuring that the WebSocket connection points to the correct host.

2. **Default Port Adjustments**: The default for `wsPort` is now set to 6001, which is commonly used for WebSocket connections. You can adjust this according to your Reverb server configuration.

### Environment Variables

Make sure to update your `.env` or `.env.local` file with the appropriate values:

VITE_REVERB_APP_KEY=your_reverb_app_key
VITE_REVERB_PORT=6001  # or the port you are using for Reverb
VITE_REVERB_SCHEME=https

### Running Your Application

After making these changes, run your application and ensure your DDEV environment and Reverb server are active:

ddev start
php artisan reverb:serve

This setup should correctly configure Laravel Echo to use Reverb with the current hostname and allow for real-time broadcasting. Let me know if you have any further questions!

### Steps to Add Port 6001 in `config.yaml`

1. **Open the DDEV Configuration File**: Navigate to your project directory and open the `config.yaml` file located in the `.ddev` folder.

2. **Modify the Ports Section**: If you don't already have a `ports` section, you can add one. Here’s how you can configure it to expose port 6001:

# .ddev/config.yaml
   additional_hostnames: []
   additional_fqdns: []
   webserver_type: apache-fpm
   php_version: "8.0" # or the version you're using
   db:
     type: mariadb
     version: "10.3" # or your desired version
   xdebug_enabled: false
   mailhog_enabled: true
   web_extra_ports:
     - 6001

3. **Save the Configuration**: After making the changes, save the `config.yaml` file.

4. **Restart DDEV**: You need to restart your DDEV environment for the changes to take effect. Run the following command:

ddev restart

### Accessing the Application

After restarting DDEV, your Reverb service on port 6001 should be accessible. You can check this by running your application and ensuring that your WebSocket connections are established correctly.

### Testing the Setup

1. **Start the Reverb Server**: If you haven’t started your Reverb server yet, do so by running:

php artisan reverb:serve

2. **Verify Connection**: Test your application to verify that the WebSocket connection to port 6001 is working as expected.

This configuration should allow your Laravel application to communicate through Reverb on port 6001 within the DDEV environment. If you have any more questions or need further assistance, feel free to ask!

### Updated `config.yaml`

name: syt
type: laravel
docroot: public
php_version: "8.3"
webserver_type: nginx-fpm
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
    type: mariadb
    version: "10.11"
use_dns_when_possible: true
composer_version: "2"
web_environment: []
corepack_enable: false
web_extra_exposed_ports:
    - name: vite
      container_port: 5173
      http_port: 5172
      https_port: 5173
    - name: reverb
      container_port: 6001
      http_port: 6001

### Key Adjustments Made

1. **Added Reverb Port**: The new entry under `web_extra_exposed_ports` for Reverb specifies:
– `name`: A friendly name for the port configuration (in this case, `reverb`).
– `container_port`: The port on which Reverb is running inside the DDEV container (`6001`).
– `http_port`: This can be set to `6001` since Reverb uses this port for WebSocket connections.

### Steps to Apply the Changes

1. **Save the Configuration**: After making the changes, save your `config.yaml` file.

2. **Restart DDEV**: You need to restart your DDEV environment for the changes to take effect:

ddev restart

3. **Verify the Setup**: After restarting, you can check if the Reverb service is accessible on port 6001 by starting your Reverb server:

php artisan reverb:serve

4. **Test the Application**: Ensure your application can establish WebSocket connections through Reverb on the newly configured port.

This configuration will allow your Laravel application to use Reverb on port 6001 in the DDEV environment. If you have any further questions or need more assistance, feel free to ask!

To resolve this issue, you need to add a valid `https_port` for the Reverb service. Since Reverb typically operates over WebSocket connections, you can set the `https_port` to match the `http_port`, which is commonly 6001 for WebSocket connections.

### Corrected `config.yaml`

Here’s how you can modify your `config.yaml`:

name: syt
type: laravel
docroot: public
php_version: "8.3"
webserver_type: nginx-fpm
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
    type: mariadb
    version: "10.11"
use_dns_when_possible: true
composer_version: "2"
web_environment: []
corepack_enable: false
web_extra_exposed_ports:
    - name: vite
      container_port: 5173
      http_port: 5172
      https_port: 5173
    - name: reverb
      container_port: 6001
      http_port: 6001
      https_port: 6001 # Add this line

### Key Changes Made

1. **Added `https_port` for Reverb**: The `https_port` is now set to `6001`, matching the `http_port`.

### Steps to Apply the Changes

1. **Save the Configuration**: After making the changes, save your `config.yaml` file.

2. **Restart DDEV**: Run the following command to apply the changes:

ddev restart

3. **Verify the Setup**: After restarting, check if the Reverb service is accessible on port 6001 by starting your Reverb server:

php artisan reverb:serve

4. **Test Your Application**: Ensure that your application can establish WebSocket connections through Reverb on the newly configured port.

This adjustment should resolve the error, and your DDEV configuration for Reverb should work correctly. If you have any further questions or encounter any issues, feel free to ask!

### 1. Check Reverb Server Status

Ensure that your Reverb server is running correctly. You can do this by running the following command in your Laravel project directory:

php artisan reverb:serve

Make sure there are no errors, and it should indicate that it's listening on port 6001.

### 2. Verify the Correct Hostname

Since you're using `localhost`, you may want to ensure that your WebSocket connection is correctly configured to match your DDEV environment. Instead of using `localhost`, try using the DDEV URL (e.g., `http://syt.ddev.site`) or `http://127.0.0.1`. Update your Echo configuration as follows:

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: window.location.hostname, // Ensure this matches your DDEV URL or IP
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: true, // Ensure this is set to true if you're using HTTPS
    enabledTransports: ['ws', 'wss'],
});

### 3. Disable SSL Verification (for Testing Only)

If you're still facing issues and need to confirm whether the SSL certificate is causing the problem, you can temporarily disable SSL verification in your Pusher configuration. **Use this only for testing** and not in a production environment:

Pusher.logToConsole = true; // Enable debug logging for Pusher
window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: false, // Set to false for non-SSL connections
    enabledTransports: ['ws', 'wss'],
});

### 4. Check Firewall and Security Settings

Ensure that your local firewall or security settings allow connections on port 6001. You may need to allow inbound traffic for this port.

### 5. Verify DDEV Configuration

Make sure that DDEV is configured correctly to expose the necessary ports. Verify that port 6001 is indeed exposed as per your `config.yaml` configuration:

web_extra_exposed_ports:
    - name: reverb
      container_port: 6001
      http_port: 6001
      https_port: 6001

### 6. Test Connection Manually

You can test the WebSocket connection manually using tools like `wscat` or `telnet` to see if you can connect to the Reverb server:

npx wscat -c ws://localhost:6001

### 7. Check the cURL Configuration

Make sure your PHP cURL extension is correctly configured and able to reach external URLs. You may need to check your PHP configuration and ensure that `curl.cainfo` is set correctly.

### Summary

1. Verify that the Reverb server is running.
2. Ensure you are using the correct hostname for the WebSocket connection.
3. Temporarily disable SSL verification for testing if necessary.
4. Check your firewall settings for port 6001.
5. Test the WebSocket connection using tools.

After making these adjustments, retry the connection and see if the issue is resolved. Let me know if you need further assistance!

### 1. Check if the Reverb Server is Running

Ensure that the Reverb server is actively running. You can start it with the following command:

php artisan reverb:serve

Make sure that it shows it is listening on port 6001 without any errors.

### 2. Update the WebSocket Configuration

Instead of using `localhost`, try using the DDEV URL or IP address, as `localhost` might not resolve correctly in some cases. Update your Echo configuration to match your DDEV environment:

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: 'syt.ddev.site', // Use your DDEV project URL
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: true, // Set to true if you are using SSL
    enabledTransports: ['ws', 'wss'],
});

Replace `syt.ddev.site` with your actual DDEV project's URL if it’s different.

### 3. Check DDEV Configuration

Make sure that your `config.yaml` file is properly set up to expose port 6001:

web_extra_exposed_ports:
    - name: reverb
      container_port: 6001
      http_port: 6001
      https_port: 6001

### 4. Use HTTP for Local Development

If you're developing locally and SSL is not necessary, consider using HTTP instead of HTTPS. Update the `forceTLS` option in your Echo configuration:

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: 'syt.ddev.site',
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: false, // Set to false for HTTP
    enabledTransports: ['ws', 'wss'],
});

### 5. Test WebSocket Connection Manually

You can manually test the WebSocket connection using tools like `wscat` to see if it can connect to your Reverb server:

npx wscat -c ws://syt.ddev.site:6001

### 6. Verify Firewall and Network Settings

Ensure that your firewall or network settings allow connections on port 6001. Sometimes, firewall rules can block connections to specific ports.

### 7. Debug cURL Configuration

Make sure that the PHP cURL extension is correctly set up. You can check the `php.ini` file to see if `curl.cainfo` is set correctly for SSL connections.

### 8. Recheck the Reverb Server Configuration

Ensure that the Reverb server is configured to allow connections on port 6001 without SSL if you're testing with HTTP. You might need to check if the Reverb package you're using requires additional configuration for SSL.

### Summary

– Confirm the Reverb server is running.
– Use the correct hostname for WebSocket connections.
– Use HTTP instead of HTTPS for local development if SSL is not needed.
– Check firewall settings and DDEV configurations.
– Test the WebSocket connection manually.

After making these changes, retry your connection. Let me know if the issue persists or if you need further assistance!

### 1. Verify Reverb Server Is Running

Ensure that your Reverb server is actually running on the expected port (6001). You can start the Reverb server using the following command:

php artisan reverb:serve

Check the terminal output to confirm that it is listening on port 6001.

### 2. Check the Listening Address

By default, the Reverb server may listen only on `localhost`. You can modify the command to make it listen on all interfaces. Use the `–host` option:

php artisan reverb:serve --host=0.0.0.0

This command will make the Reverb server accessible from any network interface, which is especially useful when working with DDEV and Docker environments.

### 3. Update WebSocket Configuration

After ensuring the Reverb server is listening on all interfaces, you should use the correct hostname in your WebSocket connection. If you're using DDEV, update your configuration to use your project's DDEV URL:

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: 'syt.ddev.site', // Use your DDEV project URL
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: false, // Set to false for HTTP (or true for HTTPS)
    enabledTransports: ['ws', 'wss'],
});

### 4. Test Connection Using `wscat`

Try to connect using `wscat` again, now targeting the correct address:

npx wscat -c ws://syt.ddev.site:6001

Make sure to replace `syt.ddev.site` with your actual DDEV URL if it's different.

### 5. Verify Firewall and Network Configuration

Ensure that there are no firewall rules or security groups preventing access to port 6001. If you're using any firewall (like `ufw` on Ubuntu), check the status with:

sudo ufw status

If port 6001 is not allowed, you can allow it with:

sudo ufw allow 6001

### 6. Inspect the DDEV Configuration

Double-check your DDEV `config.yaml` file to ensure that port 6001 is properly exposed. Here’s a reminder of the configuration:

web_extra_exposed_ports:
    - name: reverb
      container_port: 6001
      http_port: 6001
      https_port: 6001

After making any changes to your configuration, restart DDEV:

ddev restart

### 7. Check DDEV Logs

If you still encounter issues, check the DDEV logs for any errors related to the Reverb service:

ddev logs

### Summary

– Start the Reverb server with `–host=0.0.0.0` to listen on all interfaces.
– Ensure the correct DDEV URL is used for WebSocket connections.
– Check firewall rules to allow traffic on port 6001.
– Restart DDEV after configuration changes.

Try these steps, and let me know if you continue to experience issues!

### 1. Update `config.yaml` for DDEV

Make sure your `config.yaml` file includes the correct entries for exposing port 6001. Here’s how it should look:

name: syt
type: laravel
docroot: public
php_version: "8.3"
webserver_type: nginx-fpm
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
    type: mariadb
    version: "10.11"
use_dns_when_possible: true
composer_version: "2"
web_environment: []
corepack_enable: false
web_extra_exposed_ports:
    - name: vite
      container_port: 5173
      http_port: 5172
      https_port: 5173
    - name: reverb
      container_port: 6001
      http_port: 6001
      https_port: 6001 # Ensure this is set

### 2. Restart DDEV

After modifying `config.yaml`, you need to restart DDEV for the changes to take effect:

ddev restart

### 3. Check DDEV Logs

After restarting, check the logs for any errors related to port exposure:

ddev logs

Look for any messages that might indicate problems with the reverb service or port binding.

### 4. Start the Reverb Server

Ensure that the Reverb server is running. You can use the following command:

php artisan reverb:serve --host=0.0.0.0 --port=6001

This will ensure the Reverb server is listening on all interfaces for port 6001.

### 5. Accessing the Correct URL

When testing the WebSocket connection with `wscat`, ensure you're using the correct DDEV URL. For example:

npx wscat -c ws://syt.ddev.site:6001

### 6. Use `docker-compose` to Inspect Ports

You can inspect the DDEV containers to confirm that the port is exposed correctly. Run the following command to list the ports:

docker-compose ps

Look for your web container and see if port 6001 is listed under the "Ports" column.

### 7. Manual Testing with `curl`

You can also test if the port is accessible using `curl`:

curl -v http://syt.ddev.site:6001

This should return some response if the server is running and accessible.

### 8. Check Firewall Settings

If you are still unable to connect, ensure that any local firewalls are not blocking port 6001. You can temporarily disable your firewall to test if this is the issue.

### 9. Alternative Test with Different Ports

If port 6001 continues to cause issues, consider temporarily testing with a different port to ensure the configuration works. Change the `config.yaml` to use another available port (e.g., 6002), and then adjust the Reverb server command accordingly.

### Example of Changing to Port 6002

Change `config.yaml`:

- name: reverb
      container_port: 6002
      http_port: 6002
      https_port: 6002

Start the Reverb server:

php artisan reverb:serve --host=0.0.0.0 --port=6002

### Summary

1. Ensure `config.yaml` is correctly set.
2. Restart DDEV after changes.
3. Check DDEV logs for errors.
4. Start the Reverb server correctly.
5. Test using the appropriate DDEV URL and `wscat`.
6. Inspect exposed ports using `docker-compose`.

Try these steps and let me know if you still encounter issues!