monteecristoo’s blog

https://twitter.com/irakaarozo

cloud9 で permission エラーが出たら…

sudo を付ける

ex)

sudo composer self-update

Laravel Echo を使ってnotification の実装 with Pusher

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

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;
}

------------------------------------------------------------------------------------------------------------

via method that determines on which channels the notification will be delivered. Out of the box, notifications may be sent on the maildatabasebroadcastnexmo, and slack channels.

 

public function via($notifiable)
{
return ['mail', '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.'
];
}

----------------------------------------------------------------------------------------------------------------

Handling 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;
}

 ------------------------------------------------------------------------------------------------------kati#23

参考:

laravel.com

Frontend setting up

@Notification.vue

<template>
<div>

</div>
</template>

<script>
export default {
mounted() {
this.listen();
},
props: ['id'],
methods: {
  listen() {
    Echo.private('App.User.' + id)
    // Echo.private('App.User.' + 1)
      .notification( (notification) => {
        alert('New Notification');
        console.log(notification);
    })
  }
}
}
</script>

------------------------------------------------------------------------------------------------------kati#24

CSS vertical-align が機能しない

対象が

インライン要素または、テーブルセル以外ではvertical-alignは適用できない

 

参考:

www.htmq.com

 

対象にline-heightで値を別に設定していないかを確認

 

参考:

www.htmq.com

 

CSS ボックスレイアウト

ボックスレイアウト 横並び均等配列

必須

display: table;

table-layout: fixed;

width: 100%;

display: table-cell;

 

 

参考: 

delaymania.com

優良記事リンク CSS

app.codegrid.net

 

phiary.me

React を使うならライセンスに注意

it.srad.jp

Laravel update 5.4 to 5.5

composer.json ファイルを

github.com

をコピーしてペースト。

composer.jsonの自分でカスタマイズした部分をペースト。

composer update

php artisan --version でアップデートを確認。

 

参考:

laravel.com

www.youtube.com