Using Laravel Reverb with Laravel and Nuxt and multiple apps/layers

[torbentschechne]

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 (App A and App B) 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. Then I fired up a second reverb server and used this credentials in the second App, with no success.

Does anybody have an idea? Is this Herd related (has the Server any restrictions?) or am I forgetting something?

Thanks!

[torbentschechne]

I found this answer on StackOverflow:

Chrome doesn't allow unsecure websocket (ws) connections to localhost (only wss, so you should setup a TLS certificate for your local web/websocket server). However the same should work fine with Firefox.

When I test it on Firefox, it works in both apps. It does not make total sense, because both apps are running at http without a certificate, but in Chrome only one app is working. Currently I can not secure the Reverb Server via Herd, right?