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
Please or to participate in this conversation.