Laravel Echo : A JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel.
Installation
composer require pusher/pusher-php-server "~3.0"
参考：
laravel.com
Problem 1
- Installation request for pusher/pusher-php-server ~3.0 -> satisfiable by pusher/pusher-php-server[3.0.0].
- pusher/pusher-php-server 3.0.0 requires ext-curl * -> the requested PHP extension curl is missing from your system.
ここでエラーが出たら → sudo apt-get update
sudo apt-get install php7.1-curl
curl インストール後、apacheを再起動
npm install --save laravel-echo pusher-js
Laravel Echo setting up
@resources/assets/js/bootstrap.js から以下をコメントアウトから外す
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'your-pusher-key',
cluster: 'your-cluster'
});
your-pusher-key, your-cluster に pusher アカウント情報を挿入
@config/app.php から以下をコメントアウトから外す
/*
* Application Service Providers...
*/
App\Providers\BroadcastServiceProvider::class,
Create a migration for the notifications table
php artisan notifications:table
php artisan migrate
Create a new notification class
php artisan make:notification NewFriendRequest
Pusher setting up
Pusher の Your App/Overview ページの下部にある app_id, key, secret, cluster を記入
@config/broadcasting.php
'connections' => [
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => 'ap1',
'encrypted' => true
],
],
@.env
BROADCAST_DRIVER=pusher // Kati#25
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
--------------------------------------------------------------------------------------------------------kati#21
Notification setting up @notification/NewFriendRequest.php
public $user;
/**
* Create a new notification instance.
*
* @return void
*/
public function __construct($user)
{
$this->user = $user;
}
-> User::find($id)->notify(new \App\Notifications\NewFriendRequest(Auth::user()) from FriendshipController
------------------------------------------------------------------------------------------------------------
via method that determines on which channels the notification will be delivered. Out of the box, notifications may be sent on the mail, database, broadcast, nexmo, and slack channels.
public function via($notifiable)
{
return ['broadcast', 'database'];
}
----------------------------------------------------------------------------------------------------------------
/**
* Get the mail representation of the notification.
*
* @param mixed $notifiable
* @return \Illuminate\Notifications\Messages\MailMessage
*/
public function toMail($notifiable)
{
return (new MailMessage)
->line('You received a new frined request from' . $this->user->name )
->action('View profile', route('profile', ['user-id'=> $this->user->id ]))
->line('Thank you for using our application!');
}
----------------------------------------------------------------------------------------------------------------
/**
* Get the array representation of the notification.
*
* @param mixed $notifiable
* @return array
*/
public function toArray($notifiable)
{
return [
'name' => $tihs->user->name,
'message' => $this->user->name . 'sent you a friend request.'
];
}
----------------------------------------------------------------------------------------------------------------
Sending Notification
@FriendshipsController.php
public function add_friend($id)
{
//sending notifications, emails, broadcasting.
$resp = Auth::user()->add_friend($id);
User::find($id)->notify(new \App\Notifications\NewFriendRequest(Auth::user()) );
return $resp;
}
notification を Auth user から $id に送る。
------------------------------------------------------------------------------------------------------kati#23
参考：
laravel.com
Frontend setting up (private channel へ接続するためにAuth id を passing)
.notification 以降： サーバーから受けた notification を handling
@Notification.vue
<template>
<div>
</div>
</template>
<script>
export default {
mounted() {
this.listen();
},
props: ['id'],
methods: {
listen() {
Echo.private('App.User.' + id)
.notification( (notification) => {
alert('New Notification');
console.log(notification);
})
}
}
}
</script>
親 component から props を notification.vue へ passing
@app.blade.php
@yield('content')
@if(Auth::check())
<notification :id="{{ Auth::id() }}"></notification>
@endif
console にログ出し
@resources/assets/js/bootstrap.js
Pusher.log = function(message)
{
window.console.log(message)
}
上記を追記
接続の確認
Pusher 側からリクエスト
Send event 後、Event sent successfully. と表示され、
------------------------------------------------------------------------------------------------------kati#24
別のユーザーが接続された状態で friend request を受けるとコンソールに下記が表示
------------------------------------------------------------------------------------------------------kati#25
