Laravel echo socket.io Vue JS notification - laravel

I'm making a Client - Server application and I need to send web push notifications.
I have a Laravel api as a backend with laravel echo server with the broadcaster socket.io and a Vue JS ans a Frontend app.
When I try to send the notification from laravel-echo I can see the socket server log. I'm connecting through socket.io and I'm not using pusher.
I have the correct connection because I can see my log, even I can see I'm in because in the console I see my log.
import Echo from "laravel-echo"
window.echo = new Echo({
broadcaster : 'socket.io',
host : url_server+"6001"
});
And I have this code in my Vue component:
window.echo.private("App.Entities.User.2")
.notification(notification => {
console.log("notification demo", notification)
});
And this is my log notification from laravel server:
[2017-08-09 16:57:02] local.INFO: Broadcasting
[Illuminate\Notifications\Events\BroadcastNotificationCreated] on channels
[private-App.Entities.User.2] with payload:
{
"title": "Hello from Laravel!",
"body": "Thank you for using our application.",
"action_url": "https:\/\/laravel.com",
"created": "2017-08-09T16:57:02-05:00",
"id": "b3e037ce-9f4e-43d0-a847-e8623f56412d",
"type": "App\\Notifications\\ReminderSeller",
"socket": null
}

i think its a config issue, make sure that the config is correct in config/broadcasting.php
'default' => env('BROADCAST_DRIVER', 'redis'),
or is set in .env file BROADCAST_DRIVER=redis

Related

Laravel Echo not subscribing to Pusher Presence Channel, not even in Pusher dashboard

I have spend many hours to solve this issue of mine, reading the doc multiple times, googling here and there: SO, Laracast, Larachat, etc, but still couldn't get Laravel Echo to subscribe to Pusher presence channel, and it doesn't show any error in console tab
Public and Private channel are working fine and smooth, users can subscribe, users can listen / trigger event(s)
Note: before creation of this post, I have search questions related to my current issue, none of them have answer
Some questions similar to mine:
https://laravelquestions.com/2020/12/15/laravel-echo-not-joining-presence-channel-in-production/
Laravel Echo + Laravel Passport auth in private / presence websockets channels
https://laravel.io/forum/facing-issues-upon-subscribing-to-presence-channel
etc..
Spec:
Laravel: 7.30.1
laravel-Echo: 1.10.0 (latest; atm)
pusher/pusher-php-server: 4.0
pusher-js: 7.0.3 (latest; atm)
In resource/js/bootstrap.js
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true,
authEndpoint: '/api/broadcasting/auth',
auth: {
headers: {
'Authorization': `Bearer ${localStorage['token']}`
}
}
});
In routes/api.php
// https://stackoverflow.com/questions/55555844/authorizing-broadcasting-channel-in-an-spa
Route::post('/broadcasting/auth', function (Request $request) {
$pusher = new Pusher\Pusher(
env('PUSHER_APP_KEY'),
env('PUSHER_APP_SECRET'),
env('PUSHER_APP_ID'),
[
'cluster' => env('PUSHER_APP_CLUSTER')
]
);
// This will return JSON response: {auth:"__KEY__"}, see comment below
// https://pusher.com/docs/channels/server_api/authenticating-users
$response = $pusher->socket_auth($request->request->get('channel_name'), $request->request->get('socket_id'));
return $response;
})->middleware('auth:sanctum');
In routes/channels.php
// https://laravel.com/docs/8.x/broadcasting#authorizing-presence-channels
Broadcast::channel('whatever', function ($user) {
return [
'id' => $user->id,
'name' => $user->name
];
});
In home.vue
...
...
created() {
Echo.join('whatever') // DOES NOT WORK, Even in mounted() vue lifehook, and in Pusher dashboard, it doesn't show this channel name
.here((users) => {
console.table(users)
})
}
Q: Why Laravel Echo not subscribing to Pusher presence channel? and even in Pusher, it doesn't show channel name: presence-whatever, only disconnected (after I refreshed the page) and then connected like nothing happen
Thanks in advance
1. Make sure to set the broadcast driver to .env after that do php artisan config:clear
BROADCAST_DRIVER=pusher
2. Ferify your auth.php. I have like this
3. Check your broadcasting.php this is my dev config
4. Check CORS settings I installed fruitcake/laravel-cors and this is my cors.php config
Maybe for you supports_credentials need to be true
5. Check your channels.php. I have
Make sure to set the broadcast driver to env after that do php artisan config:clear
Use window.Echo.channel('whatever') to join the channel.
Had the exact same issue and was stuck for hours.
I changed 'useTLS' to FALSE in config/broadcasting.php and magically got it working.

Laravel Echo not subscribing to private Channel

Echo Version: 1.8.0
Laravel Version: 7.0
PHP Version: 7.2.
NPM Version: 6.12.1
Node Version: 12.13.1
Description: I'm trying to send notifications to users,
My pusher connection is good because it sends on public channels
And also, i get this message on my console
[2020-07-24 21:08:09][355] Processed: Illuminate\Notifications\Events\BroadcastNotificationCreated
and on pusher i also see that the message was sent.
I also don't get any errors on my browser console as all the websocket connections are working well.
But i still dont get any messages.
I tried
Echo.private('App.User.' +userId)
  .notification((notification) => {
  console.log(notification);
  });
I also tried
Echo.private('App.User.' + userId)
  .listen('.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', (e) => {
  console.log('Event Notification received ', e)
});
Now I turned on Pusher error logging and i got
app.js:42600 Pusher : : ["JSON returned from auth endpoint was invalid, yet status code was 200. Data was: <!DOCTYPE html>\r\n<html lang=\"en\">\r\n
I also followed many tutorials and the docs
All to no avail.
Steps To Reproduce:
Create a notification and declare both the toArray method and toBroadcast methods but echo fails to catch messages from pusher
I finally solved this issue myself
Steps
In my bootstrap.js file
window.Echo = new Echo({
broadcaster: "pusher",
key: "my key",
cluster: "eu",
encrypted: true,
authEndpoint: "api/broadcasting/auth",
auth: {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
},
});
Then in my routes/api.php file,
Route::middleware('auth:api')->post('broadcasting/auth', function (Request $request) {
$pusher = new Pusher\Pusher(
$app_key,
$app_secret,
$app_id
);
return $pusher->socket_auth($request->request->get('private-my-channel'),($request->request->get('socket_id'));
});
There is more info on this in the documentation,
I hope it helps someone someday

laravel-websockets connect to channles without laravel-echo

I have a websocket server implemented with laravel-websockets package which broadcasts data on some private channels. At the moment server does not support two-way communication. I want to make this public for anyone to be able to connect to this websocket by using an auth token. But I can't find anything helpful regarding this.
Currently I am using laravel-echo and pusher-js to connect from a separate app which works fine. But what if someone does not want to use these packages i.e. what would be the nodejs implementation to connect to this socket.
For reference here is my laravel-echo implementation to connect to this socket.
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: '{appkey}',
wsHost: '{sockethosturl}',
wsPort: 6001,
forceTLS: false,
authEndpoint: '{auth endpoint on socket server}',
disableStats: true,
auth: {
headers: {
'Auth-Token': '{ random auth token }',
}
}
});
And then I subscribe to channels using this
Echo.private('private-channel-1')
.listen('.update', (event) => {
console.log("Found event");
console.log(event);
});
Looking for a way to translate this into a socket-io or any other websocket client side library.

Laravel echo, pusher not authenticating on private channel

I'm trying to set up a private pusher channel with echo on laravel 6. It won't authorise the user. The best I can do is get the following response from pusher
Pusher : No callbacks on private-App.User.1 for pusher:subscription_error
I've followed the documentation, I've registered:
App\Providers\BroadcastServiceProvider
added the csrf token:
<meta name="csrf-token" content="{{ csrf_token() }}">
adjusted the broadcast routes in the broadcastServiceProvider
Broadcast::routes(["middleware" => ["auth:api"]]);
Required the channels file
require base_path('routes/channels.php');
Here's the channel code, (the log isn't even running)
Broadcast::channel('App.User.{id}', function ($user, $id) {
Log::info('User failed to auth.');
return (int) $user->id === (int) $id;
});
Here's the bootstrap.js code, obviously using my genuine key and endpoint (tried with and without the endpoint)
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'mykeyhere111',
cluster: 'eu',
authEndpoint: "https://mydomain.test/broadcasting/auth",
forceTLS: true
});
Pusher.logToConsole = true;
console.log(window.Echo.options);
and my vue listen method:
Echo.private(`App.User.${userId}`)
.notification( (notification) => {
console.log(notification)
})
I've also set the env file
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=akeyhere1
PUSHER_APP_KEY=akeyhere123
PUSHER_APP_SECRET=akeyhere12345
PUSHER_APP_CLUSTER=eu
I'm working on homestead with ssl, also tried on vagrant. The network response for auth is:
Request URL: https://mysite.test/broadcasting/auth
Request Method: POST
Status Code: 302
with no response data.
I've spent a couple of days trying to get this working, nothing seems to do it. Any ideas?

Laravel Echo not receiving Pusher event

I am having trouble with Laravel Echo to listener to Pusher channels. I am not able to get any response in my browser (no console log).
In my bootstrap.js I got.
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'myPusherAppKey',
cluster: 'mt1', //My app is US-EAST
encrypted: true
});
I use my browser console and type:
Echo.channel('my-channel')
.listen('my-event', (e) => {
console.log(e);
});
I can see from the Pusher Debug Console that
CONNECTION My app
SUBSCRIBED My-channel
OCCUPIED My-channel
I then use the Pusher Debug Console to send the default event:
Channel: my-channel
Event: my-event
Data: {
"name": "John",
"message": "Hello"
}
However, I do not get any output in my browser console.
If I further type in my browser console:
Echo.leave('my-channel');
I can see from Pusher Debug Console
UNSUBSCRIBED my-channel
VACATED my-channel
How can I get Laravel Echo to listen to Pusher events?
It was a Namespace issue. Laravel documentation explains it.
Echo will automatically assume the events are located in the App\Events namespace
Therefore, the event name must be changed in the Pusher Debug Console as such:
Event: App\Events\my-event

Resources