stuartcusack's avatar

Reverb / Echo problems in Inertia with Herd

I can't get broadcasting working fully on Laravel Herd Free on Windows.

Some notes:

  • I found the solution! Added below.
  • My client app is built on InertiaJS
  • I am using Herd Free
  • I have set up a nginx location block (see below)
  • I'm using a public channel for broadcasting, no auth / routes required.

Using php artisan reverb:start --debug I can see the following happening:

// Vue:  It seems that I am successfully listening but I'm not seeing any console output when I fire the event.
useEchoPublic(`terminals.${this.terminalId}`, "RefreshTerminal", (e) => {
  console.log('refresh');
  console.log(e);
});

// Reverb Debug: but I am seeing the connection being made by Vue
Connection Established .....................  
Message Received ................................
{
    "event": "pusher:subscribe",
    "data": {
        "auth": "",
        "channel": "terminals.1"
    }
}

I dispatch my event manually:

// Reverb Debug: and I can see this event is being picked up
Message Handled ...........................................
Broadcasting To ........................... terminals.1  
  
{
     "event": "App\\Events\\RefreshTerminal",
     "data": [],
     "channel": "terminals.1"
 }

It appears that the Reverb server is picking up the connection from the Vue app, and it is also picking up the event which is broadcast from my Laravel backend. Why isn't the Vue app being informed of the event?

Here's my ENV vars:

REVERB_APP_ID=xxx_random_string
REVERB_APP_KEY=yyyy_random_string
REVERB_APP_SECRET=zzzz_random_string
REVERB_HOST="mywebsite.test"
REVERB_SCHEME=https
REVERB_PORT=8080
# Not sure if this one is necessary but it might be for windows
REVERB_SERVER_HOST="127.0.0.1"
# REVERB_SERVER_PORT=8080

Here's my nginx block:

location /app {
  proxy_http_version 1.1;
  proxy_set_header Host $http_host;
  proxy_set_header Scheme $scheme;
  proxy_set_header SERVER_PORT $server_port;
  proxy_set_header REMOTE_ADDR $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "Upgrade";

  # This is for Mac
  # proxy_pass http://0.0.0.0:8080;
        
  # This is for Windows
  proxy_pass http://127.0.0.1:8080;
}

Thanks.

0 likes
2 replies
stuartcusack's avatar

I have found a workaround. It seems like the configureEcho() setup function from @laravel/echo-vue is broken. If I set up Echo the plain JS way it works:

app.js: Replace this:

import { configureEcho } from '@laravel/echo-vue';

configureEcho({
    broadcaster: 'reverb'
});

With this:

import Echo from 'laravel-echo';
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'],
});

Vue component: Replace this:

useEchoPublic(`terminals.${this.terminalId}`, "RefreshTerminal", (e) => {
  console.log('refresh');
  console.log(e);
});

With this:

window.Echo.channel(`terminals.${this.terminalId}`)
  listen('RefreshTerminal', () => {
    location.reload();  
  });

And now I am receiving broadcast events successfully.

Seems the @laravel/echo-vue package broken?

Please or to participate in this conversation.