Laravel echo private channel not working on Nuxt js - laravel

I am using Laravel 9, Nuxt js, laravel-websocket. Laravel Echo is working only on public channels not working on private channels.
Here is my code.
channels.php
Broadcast::channel('trades', function ($user) {
return auth()->check();
});
Events file (NewTrade.php)
class NewTrade implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $trade;
public $user;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct($trade, User $user)
{
$this->trade = $trade;
$this->user = $user;
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('trades');
}
}
nuxt.config.js
buildModules: [
['#nuxtjs/laravel-echo', {
broadcaster: process.env.BROADCAST_DRIVER,
key: process.env.PUSHER_APP_KEY,
cluster: process.env.PUSHER_APP_CLUSTER,
forceTLS: false,
wsHost: '127.0.0.1',
wsPort: 6001,
wssPort: 6001,
disableStats: true,
authModule: true,
connectOnLogin: true,
encrypted: true,
authEndpoint: process.env.PUSHER_AUTH_ENDPOINT,
}]
],
echo.js (Plugin)
import Pusher from "pusher-js";
Pusher.logToConsole = true;
client echo
this.$echo.private('trades')
.listen('NewTrade', (e) => {
console.log("A testing");
});
Note: If I send data from the public channel client-side received it but the only problem is when I broadcast on the private channel.
I have spent more than 10 hours and tried everything I could, but no luck. :(
Thanks.

Related

Why I am not receving response ?( Details not updating in Laravel Vue js Web Sockets)

(PHP ^7.2.5 and laravel ^7.24 , beyondcode laravel:^1.12pusher/pusher-php-server 5.0.3 Library for interacting with the Pusher REST API
)
Env File
This is my env file. Id and Key values are real and I have used it in bootstrap.js file
PUSHER_APP_ID=myappid
PUSHER_APP_KEY=myappkey
PUSHER_APP_SECRET=myappsecret
PUSHER_APP_CLUSTER=mt1
After following the tutorial from this link https://medium.com/#aschmelyun/adding-real-time-updates-to-your-laravel-and-vue-apps-with-laravel-websockets-a1d9a69f7c12
Event File
class OrderEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels, OtherTrait;
/**
* Create a new event instance.
*
* #return void
*/
public $orders;
public $orderRepo;
public function __construct()
{
$this->orders = 'Hello World';
//return response()->json(ResponseHelper::GenerateResponse(200, '', ['order' => $order]), 200);
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('orders');
}
}
Bootstrap.js File
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'myappkey',
cluster: 'mt1',
forceTLS: false,
encrypted: false,
wsHost: window.location.hostname,
wsPort: 6001,
wssPort: 6001,
disableStats: true,
enabledTransports: ['ws', 'wss']
});
Component File
created() {
window.Echo.channel("orders").listen("OrderEvent", (e) => {
debugger;
console.log(e.orders);
//this.setEchotoWork(e.orders);
});
this.fetchData();
},
if you are getting error related to array_merge
check pusher/pusher-php-server version
using cmd
composer show
if it is not 4.1 run cmd
composer require pusher/pusher-php-server ^4.1

Laravel pusher/echo getting broadcast error 500 and 403

Hello I'm trying to make chat system for my app but I'm having problem making pusher and echo work. When I open my Chat between 2 people it does not update in real time and I have to refresh the page in order to get the updated stuff like messages and such. In console I'm getting these 2 errors
POST http://localhost/broadcasting/auth 403 (Forbidden)
POST http://localhost/broadcasting/auth 500 (Internal Server Error)
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,
encrypted: true,
});
ChatBroadcast.php
class ChatBroadcast implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $ticket;
/**
* Create a new event instance.
*
* #param $ticket
*/
public function __construct(Ticket $ticket)
{
$this->ticket = $ticket;
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('tickets_channel.' . $this->ticket->id);
}
public function broadcastWith(){
$messages = Message::all()->where('ticket_id','=',$this->ticket->id)->sortBy('created_at');
return [
'ticket' => $this->ticket,
'messages' => $messages
];
}
}
channels.php
use App\Ticket;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Broadcast;
Broadcast::channel('App.User.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});
Broadcast::channel('tickets_channel.{ticketID}', function ($user, $ticketID) {
Auth::check();
$ticket = Ticket::all()->where('id', '=', $ticketID)->first();
return $ticketID == $ticket->id;
});
VueComponent
mounted() {
Echo.private('tickets_channel.${ticketID}')
.listen('ChatBroadcast', (e) => {
console.log(e);
this.messagesMutable = e.messages;
this.state = e.ticket.isOpened;
});
},
This is my log for 500 error
[2020-09-08 09:25:24] local.ERROR: Invalid channel name private-tickets_channel.${ticketID} {"userId":11,"exception":"[object] (Pusher\\PusherException(code: 0): Invalid channel name private-tickets_channel.${ticketID} at /Users/miroslavjesensky/Documents/Blog/vendor/pusher/pusher-php-server/src/Pusher.php:282)
-EDIT-
I have managed to fix the 500 error by changing VueComponent code to this
mounted() {
let id = this.ticket.id;
Echo.private('tickets_channel' + id)
.listen('ChatBroadcast', (e) => {
this.messagesMutable = e.messages;
this.state = e.ticket.isOpened;
});
},
Turns out the problem was with another VueComponent I am using with the first one. After fixing the listening part of echo there aswell all works as it should

PrivateChannel 403 error Laravel Echo Pusher Laravel Websockets local setup

I am getting a 403 on broadcasting/auth route.
I am using Laravel websockets package for web sockets and I have the below setup
- Backend Laravel server ( on port 8000 )
- Laravel Websockets Server ( laravel is running on 8001 and websocket server on 6001 )
- Standalone Ionic React app ( on port 8100)
Now everything works when I am trying Public Channel but when I try Private Channel it fails.
in the above screenshot of Laravel sockets dashboard I can see connection made as this is the same socketId which went with the request.
I am using Laravel Sanctum for Authentication.
PFB :- my client side code
const headers = {
'Content-Type': 'application/json',
Authorization: window.localStorage.getItem('token')
? `Bearer ${window.localStorage.getItem('token')}`
: '',
'Access-Control-Allow-Credentials': true,
};
const options = {
broadcaster: 'pusher',
key: 'abcsock',
authEndpoint: 'http://localhost:8001/api/broadcasting/auth',
authorizer: (channel, options) => {
return {
authorize: (socketId, callback) => {
axios
.post(
'http://localhost:8001/api/broadcasting/auth',
{
socket_id: socketId,
channel_name: channel.name,
},
{ headers, withCredentials: true }
)
.then((response) => {
callback(false, response.data);
})
.catch((error) => {
callback(true, error);
});
},
};
},
wsHost: '127.0.0.1',
wsPort: 6001,
encrypted: true,
disableStats: true,
enabledTransports: ['ws', 'wss'],
forceTLS: false,
};
Code from Laravel Websockets Server
api.php file
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Broadcast;
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Broadcast::routes(['middleware' => ['auth:sanctum']]);
BroadcastServiceProvider.php
namespace App\Providers;
use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\ServiceProvider;
class BroadcastServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* #return void
*/
public function boot()
{
Broadcast::routes(['middleware' => ['auth:sanctum']]);
require base_path('routes/channels.php');
}
}
NewNotification.php
<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Notifications\Notification;
use Illuminate\Broadcasting\PrivateChannel;
use App\AppNotification;
use App\User;
class NewNotification extends Notification
{
use Queueable;
public $notification;
public $user;
/**
* Create a new notification instance.
*
* #return void
*/
public function __construct(AppNotification $notification, User $user)
{
$this->notification = $notification;
$this->user = $user;
}
/**
* Get the notification's delivery channels.
*
* #param mixed $notifiable
* #return array
*/
public function via($notifiable)
{
return ['database', 'broadcast'];
}
/**
* Get the array representation of the notification.
*
* #param mixed $notifiable
* #return array
*/
public function toArray($notifiable)
{
$notification = $this->notification;
return [
'id' => $notification->id,
'title' => $notification->title,
'description' => $notification->description,
'button_text' => $notification->button_text,
'is_read' => $notification->is_read,
'created_at' => $notification->created_at,
[
'notification_for' => $notification->notifiable
]
];
}
public function toBroadcast($notifiable)
{
return new BroadcastMessage($this->toArray($notifiable));
}
public function broadcastOn()
{
return new PrivateChannel('Notifications.' . $this->user->id);
}
}
channels.php
<?php
use Illuminate\Support\Facades\Broadcast;
Broadcast::channel('Notifications.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
}, ['guards' => ['sanctum']]);
I have attached whatever I felt was sufficient to explain the issue and for you to troubleshoot but if you need anything more please ask.
Any help will be appreciated
i liked this package because its wrote in php but its sortof abandon and a lot of issues that not solved.
alternative of this server is laravel-echo-server(as laravel docs recommends) very easier to use.
https://stackoverflow.com/a/61704796/7908390 more info if you can work with laravel-sockets im glad to see a new example
Have you added authentication for your channels.php? Please refer here:
https://laravel.com/docs/7.x/broadcasting#defining-authorization-routes
What does it look like?
I think you are doing everything correctly but you have not authorized your routes.
I had the similar error with Laravel & pusher.
I have fixed using decodeURIComponent and moving BroadCast::routes(['middleware' => ['auth:sanctum']]) to routes/api.php from BroadcastServiceProvider.php
Also, add withCredentials = true.
const value = `; ${document.cookie}`
const parts = value.split(`; XSRF-TOKEN=`)
const xsrfToken = parts.pop().split(';').shift()
Pusher.Runtime.createXHR = function () {
const xhr = new XMLHttpRequest()
xhr.withCredentials = true
return xhr
}
const pusher = new Pusher(`${process.env.REACT_APP_PUSHER_APP_KEY}`,
{
cluster: 'us3',
authEndpoint: `${process.env.REACT_APP_ORIG_URL}/grooming/broadcasting/auth`,
auth: {
headers: {
Accept: 'application/json, text/plain, */*',
'X-Requested-With': 'XMLHttpRequest',
'X-XSRF-TOKEN': decodeURIComponent(xsrfToken)
}
}
})
I hope this helps a bit.

Why I cannot send messages to pusher but I can receive them from pusher?

Im making a chat in my app and Im using pusher. I did everything that pusher told me to do. I'm using vanilla-js in frontend. I can connect in frontend. I can receiver messages from pusher (look at channel.bind()) but my messages are not going anywhere.
P.S I did all configuration (.env, broadcasting.php)
FRONTEND
var pusher = new Pusher('xxxxxxxx', {
cluster: 'eu',
forceTLS: false
});
window.channelName = 'my-channel-' + {{ $chat->id }};
window.event = 'private-conversation';
var channel = pusher.subscribe(window.channelName);
channel.bind(window.event, function (data) {
alert(data);
});
BACKEND
public function sendMessage($request, $roomId){
event(new Event(array(
'id' => auth()->user()->id,
'full_name' => auth()->user()->fullName()
), $request->input('channel'), $request->input('event'), $request->input('message')));
}
EVENT
class Event
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $user;
public $message;
public $channelName;
public $event;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct($user, $channelName, $event, $message)
{
$this->user = $user;
$this->channelName = $channelName;
$this->event = $event;
$this->message = $message;
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return [$this->channelName];
}
public function broadcastAs()
{
return $this->event;
}
}

broadcasting/auth 500 pusher in laravel

In my app i using from pusher to send notification for typists.but i giving this error:
Couldn't get auth info from your webapp : 500
javascript codes of pusher placed in footer:
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>
Pusher.logToConsole = true;
var pusher = new Pusher('xxxxxxxxxxxxxxxxx', {
cluster: 'ap2',
encrypted: true,
authEndpoint: "/broadcasting/auth",
auth: {
params: {
'X-CSRF-Token': $('meta[name="csrf-token"]')
.attr('content')
}
}
});
var channel = pusher.subscribe(
'private-App.Typist.' + {{$typistId}}
);
channel.bind('NewTypeOrder', function(data) {
alert('hi');
});
in channels.php
Broadcast::channel('App.Typist.{id}', function (Typist $typist, $id) {
return true;
});
and in Events/EventTypeOrder.php
class NewTypeOrder implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $typist;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct(Typist $typist)
{
$this->typist = $typist;
}
/**
* Get the channels the event should broadcast on.
*
* #return Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('App.Typist.' . $this->typist->id);
}
}
my typists table is quite from users table and laravel authentication for typist not used because laravel authentication just used for users only.
in laravel.log
[2018-07-22 20:27:38] local.ERROR: ErrorException: Key file
"file://C:\xampp\htdocs\samane_typax_5.4\storage\oauth-public.key"
permissions are not correct, should be 600 or 660 instead of 666 in
C:\xampp\htdocs\samane_typax_5.4\vendor\league\oauth2-
server\src\CryptKey.php:57
Stack trace:
Now what can i do for this issue?
On the commandline, type: php artisan tinker
Then paste the following:
chmod(storage_path('oauth-public.key'), 0660)
This should set the right file permissions, the error should vanish/change once enter is pressed :)

Resources