I have a laravel/vuejs realtime application, works on my local environment but when I deploy to heroku /auth/broadcast shows unsual response,
bootstrap.js
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': window.csrf_token
};
const JWTtoken = `Bearer ${localStorage.getItem('access_token')}`
import Echo from 'laravel-echo';
// import Pusher from 'pusher-js';
window.Pusher = require('pusher-js');
Pusher.logToConsole = true;
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true,
encrypted: true,
auth: {
headers: {
'Authorization' : JWTtoken,
}
}
});
In vue.js component
Echo.private(`App.User.${this.user.id}`)
.notification((notification) => {
console.log(notification.type)
});
Response from my local environment (Successful)
Pusher : : ["Event sent",{"event":"pusher:subscribe","data":{"auth":"0d5290e189b56045e99d:e2156d7e13673a1e06f0c2b8974655247a55055de1f7eb31022a1a171615cb8c","channel":"private-App.User.4"}}]
broadcasting/auth response from local environment
Error from broadcasting/auth on heroku
Pusher : : ["Error: JSON returned from auth endpoint was invalid, yet status code was 200. Data was: "]
Error pusher broadcasting/auth
Any help or suggestions. Thanks
The auth endpoint response should be a JSON string with an auth property of a value composed from the application key and the authentication signature, separated by a colon : as follows:
{
"auth": "278d425bdf160c739803:58df8b0c36d6982b82c3ecf6b4662e34fe8c25bba48f5369f135bf843651c3a4"
}
You should check what the auth endpoint is returning.
Source
Related
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
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.
I am learning pusher to use it with Laravel, I am trying to subscribe to private channel using Laravel-echo as follow:
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
Pusher.logToConsole = true; //update: added this
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
});
var channel = window.Echo.private('roomr');
and per Laravel documentations I have to set authorization in channel.php file so in I wrote in it:
Broadcast::channel('roomr', function ($user) {
logger('hit authorize roomr');
return true;
});
please note that I used logger('hit authorize roomr'); to know if my function is being called, but, when I check the log file it is empty which means that this function is not being called.
using developer tools in google chrome I see there is a post request sent to http://127.0.0.1:8000/broadcasting/auth which return response 200, so, I do not think the authentication is the problem.
Update:
after I added Pusher.logToConsole = true; to my javascript now in chrome console I get:
Pusher : : ["JSON returned from auth endpoint was invalid, yet status
code was 200. Data was: "]
what else I can do? please help me to solve this probem
The problem was in the .env file and I solved it by setting BROADCAST_DRIVER=pusher
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?
I am using Vue SPA and Laravel. I have google it for hours and tried many things but I can't find a way to make it work.
In index.html I have
<meta name="csrf-token" content="{{ csrf_token() }}">
This is my subscribe method:
subscribe() {
let pusher = new Pusher('key', {
cluster: 'ap1',
encrypted: true,
authEndpoint: 'https://api_url/broadcasting/auth',
auth: {
headers: {
'X-CSRF-Token': document.head.querySelector(
'meta[name="csrf-token"]'
)
}
}
})
let channel = pusher.subscribe(
'private-user.login.' + this.user.company_id
)
channel.bind('UserLogin', data => {
console.log(data)
})
}
I am getting a 419 error saying: "expired due to inactivity. Please refresh and try again."
If you didn't noticed there I am trying to listen to a private channel.
419 means you don't pass the CSRF token verification. To solve the issue, there are some way.
You should pass the CSRF token to the Pusher instance. You can follow the instruction here https://pusher.com/docs/authenticating_users. I'll give you an example.
let pusher = new Pusher('app_key', {
cluster: 'ap1',
encrypted: true,
authEndpoint: 'https://api_url/broadcasting/auth',
auth: {
headers: {
// I assume you have meta named `csrf-token`.
'X-CSRF-Token': document.head.querySelector('meta[name="csrf-token"]')
}
}
});
Disable CSRF verification on the auth broadcasting route. But, this is not recommended, since CSRF verification here is important.
App\Http\Middleware\VerifyCsrfToken
/**
* The URIs that should be excluded from CSRF verification.
*
* #var array
*/
protected $except = [
'broadcasting/auth'
];
Use laravel-echo, it's behind the scene use axios, you just need to pass CSRF token to the axios header.
// I assume you have meta named `csrf-token`.
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
}
hope that answer.
I found the solution I hope it can help others:
In front end:
let pusher = new Pusher('app_key', {
cluster: 'ap1',
encrypted: true,
authEndpoint: 'https://api_url/broadcasting/auth',
auth: {
headers: {
Authorization: 'Bearer ' + token_here
}
}
})
let channel = pusher.subscribe(
'private-channel.' + this.user.id
)
channel.bind('event-name', data => {
console.log(data)
})
As you can see above no need to use csrf token, instead use the jwt token.
In the backend, go to BroadcastServiceProvider and change this:
Broadcast::routes(); to Broadcast::routes(['middleware' => ['auth:api']]);