Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Justus250422's avatar

Laravel API presence channel problem (beyondcode/laravel-websockets, Laravel-echo)

Hi.

I am using Laravel 8 as API and Nuxt on the front end. I am also using beyondcode/laravel-websockets to create a real-time display of online users. The front end is under port 8001, the API is under port 8000, and I have a problem with laravel presence channel. Here is a description of the problem and all the information needed:

Description: Using Laravel-echo, a user is trying to connect to the channel. Unfortunately, it fails due to the fact that the endpoint is on the wrong port. Specifically https://localhost:8001/api/broadcasting/auth instead of https://localhost:8000/api/broadcasting/auth. I found out that you can set a custom endpoint. So I set it up using authEndpoint, and created a route in api.php. Unfortunately, it still returns an error. So my MAIN question is:

How to set up Presence Channel using Laravel as API and Nuxt on the front end.

INFORMATION NEEDED:

Channel in channels.php:

Broadcast::channel('online', function (User $user) {
      return $user;
});

api.php route:

Route::post('broadcasting/auth', [AuthController::class, 'broadcasting']);

AuthController.php auth function:

    public function broadcasting() {
        return true;
    }

laravel-echo echo.js(nuxt plugin):

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: 'local', // .env
  wsHost: window.location.hostname,
  authEndpoint: 'https://localhost:8000/api/broadcasting/auth',
  bearerToken: localStorage.jwt,
  wsPort: 6001,
  wssPort: 6001,
  forceTLS: true,
  disableStats: true,
  encrypted: true,
  cluster: 'mt1',
  enabledTransports: ['ws', 'wss'],
});

window.Echo.connector.pusher.connection.bind('connected', () => {
  console.log('connected');
});

window.Echo.connector.pusher.connection.bind('disconnected', () => {
  console.log('disconnected');
});

setTimeout(() => {
  window.Echo.join('online')
    .here(() => {
      // ...
    })
    .joining((user) => {
      console.log(user.name);
    })
    .leaving((user) => {
      console.log(user.name);
    })
    .error((error) => {
      console.error(error);
    });
}, 1000);

ERRORS:

Error when sending auth request to good endpoint:

Object { type: "AuthError", error: undefined }

I don't know how i can post photos here.

Error when sending auth request to front endpoint just returns site as html, nonsense.

Thank you for ANY help <3

0 likes
0 replies

Please or to participate in this conversation.