I have a weird issue. I am using Laravel Herd Pro locally for development and I added a Laravel Reverb Server using the Services in Herd. I got these credentials:

REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

On the frontend I use VueJs/Nuxt and within Nuxt I use layers for having multiple apps in one Repo. I have also a packages/core structure within Nuxt to store everything here that needs to be shared through the apps. Now I did the following:

I created a Nuxt plugin “reverb.ts” in packages/core for testing purposes like this:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

export default defineNuxtPlugin(nuxtApp => {
  console.log('Echo InitiliazedPlugin')
  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,
    wssPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
  });

  window.Echo.channel('testChannel')
    .listen('MessageSent', (e: any) => {
      console.log(e);
    });
})

Then I added the .env variables to both of my apps (AppA and AppB) in Nuxt:

REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

What’s weird now is: I open the first app and see in the network tab that a WS connection is established. I fire an event in the backend and this one is viewable in the console.

I open up the second app in the browser and I can see Echo InitiliazedPlugin in the console as well. However I get this info

WebSocket connection to 'ws://localhost:8080/app/laravel-herd?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed: createWebSocket @ pusher-js.js?v=574480e1:3261

WebSocket connection to 'wss://localhost:8080/app/laravel-herd?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed: createWebSocket @ pusher-js.js?v=574480e1:3261

But why? First I thought maybe it has something to do with the fact that App B is only reachable when you are logged in, but this should be independently from the WS connection as this one will be made to the Reverb server and not to the Laravel backend, right?

Does anybody have an idea?