Looking to set up a chat system using Laravel 5.4, Vue.js, and Pusher API with Echo. I have tried twice to establish communication with Pusher, but I haven't received any callbacks in my Vue component. I am working locally with MAPM.
I have installed the following packages:
composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js
In my Blade file, I have added:
<meta name="csrf-token" content="{{ csrf_token() }}">
In my bootstrap.js file, I uncommented Echo and added my Pusher key:
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'my-push-key'
});
My broadcasting configuration:
'default' => env('BROADCAST_DRIVER', 'null'),
'connections' => [
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
//
],
],
'redis' => [
'driver' => 'redis',
'connection' => 'default',
],
'log' => [
'driver' => 'log',
],
'null' => [
'driver' => 'null',
],
],
My .env file:
BROADCAST_DRIVER=log
PUSHER_APP_ID=my id key
PUSHER_APP_KEY=my app key
PUSHER_APP_SECRET=my secret key
In my app.js:
const root = new Vue({
el: '#root',
data: {
messages: []
},
methods: {
addMessage(message){
this.messages.push(message);
axios.post('/messages', message).then(response => {
});
}
},
created() {
axios.get('/messages').then(response => {
this.messages = response.data;
});
Echo.join('chatroom')
.here()
.joining()
.leaving()
.listen('MessagePosted', (e) => {
console.log(e);
});
}
});
My controller:
public function store(Request $request){
$user = Auth::user();
$message = $user->messages()->create([
'message' => $request->message
]);
event(new MessagePosted($message, $user));
return ['status' => 'OK'];
}
My event:
namespace App\Events;
use App\Message;
use App\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class MessagePosted implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public $user;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct(Message $message, User $user)
{
$this->message = $message;
$this->user = $user;
}
/**
* Get the channels the event should broadcast on.
*
* @return Channel|array
*/
public function broadcastOn()
{
return new PresenceChannel('chatroom');
}
}
And my channel route:
Broadcast::channel('chatroom', function ($user) {
return $user;
});