この記事は、Rafie YounesとWern Anchetaによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します!
最新のWebユーザーは、アプリケーション内で発生するすべてのことを知らされることを期待しています。すべてのソーシャルメディアのWebサイトだけでなく、最近も他のどこでも、通知ドロップダウンさえないWebサイトになりたくありません。キーテイクアウト LaravelとPusherを利用して、リアルタイム通知を実装し、ユーザーアクティビティに関する即時のフィードバックを提供することにより、ユーザーの相互作用を強化します。
Pusherは、WebSocketを使用してリアルタイムの双方向機能の統合を簡素化します。これは、AJAXでサーバーを投票するよりも効率的です。初期化
最初に、Simple Laravelブログ:
<span>git clone https://github.com/vickris/simple-blog </span>
次に、MySQLデータベースを作成し、環境変数を設定して、アプリケーションにデータベースにアクセスできるようにします。
env.Exampleを.ENVにコピーして、データベース関連の変数を更新しましょう。
<span>cp .env.example .env </span>
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
にインストールしましょう次に、プロジェクトの依存関係を
および移行とシードコマンドを実行して、データベースにいくつかのデータを入力します。
<span>composer install </span>
アプリケーションを実行して訪問 /投稿すると、生成された投稿のリストが表示されます。 アプリケーションを確認し、ユーザーを登録し、いくつかの投稿を作成します。非常に基本的なアプリですが、デモを完璧に提供しています。
ユーザーの関係に従ってくださいphp artisan migrate <span>--seed </span>
ユーザーに他のユーザーをフォローし、ユーザーがフォローすることができるようにしたいので、それを実現するためにユーザー間に多くの関係を作成する必要があります。
ユーザーに関連するピボットテーブルを作成しましょう。新しいフォロワーの移行を行います:その移行にいくつかのフィールドを追加する必要があります。フォローしているユーザーを表すユーザー_ID、フォローしているユーザーを表すfollows_idフィールド。
次のように移行を更新します:
php artisan make:migration create_followers_table <span>--create=followers </span>
ストリームアプローチの記事に従っていた場合、この時点まで物事がほぼ同じであることがわかります。以下の部分では、別のアプローチで同じフォロー機能を達成します。
<span>public function up() </span><span>{ </span> <span>Schema<span>::</span>create('followers', function (Blueprint $table) { </span> <span>$table->increments('id'); </span> <span>$table->integer('user_id')->index(); </span> <span>$table->integer('follows_id')->index(); </span> <span>$table->timestamps(); </span> <span>}); </span><span>} </span>
php artisan migrate
app/user.php
ユーザーモデルに必要な関係があるため、フォロワーはユーザーのすべてのフォロワーを返し、ユーザーがフォローしているすべての人を返します。
<span>// ... </span> <span>class extends Authenticatable </span><span>{ </span> <span>// ... </span> <span>public function followers() </span> <span>{ </span> <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'follows_id', 'user_id') </span> <span>->withTimestamps(); </span> <span>} </span> <span>public function follows() </span> <span>{ </span> <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'user_id', 'follows_id') </span> <span>->withTimestamps(); </span> <span>} </span><span>} </span>
app/user.php
完璧。モデルセットを使用すると、ユーザーをリストする時が来ました
ユーザーのリスト
<span>// ... </span> <span>class extends Authenticatable </span><span>{ </span> <span>// ... </span> <span>public function follow($userId) </span> <span>{ </span> <span>$this->follows()->attach($userId); </span> <span>return $this; </span> <span>} </span> <span>public function unfollow($userId) </span> <span>{ </span> <span>$this->follows()->detach($userId); </span> <span>return $this; </span> <span>} </span> <span>public function isFollowing($userId) </span> <span>{ </span> <span>return (boolean) $this->follows()->where('follows_id', $userId)->first(['id']); </span> <span>} </span> <span>} </span>
routes/web.php
インデックスメソッドを追加します:
<span>//... </span><span>Route<span>::</span>group(['middleware' => 'auth'], function () { </span> <span>Route<span>::</span>get('users', 'UsersController@index')->name('users'); </span> <span>Route<span>::</span>post('users/{user}/follow', 'UsersController@follow')->name('follow'); </span> <span>Route<span>::</span>delete('users/{user}/unfollow', 'UsersController@unfollow')->name('unfollow'); </span><span>}); </span>
app/http/controllers/userscontroller.php
メソッドにはビューが必要です。 users.indexビューを作成して、このマークアップを入力してみましょう:
php artisan make:controller UsersController
<span>// ... </span><span>use App<span>\User</span>; </span><span>class UsersController extends Controller </span><span>{ </span> <span>//.. </span> <span>public function index() </span> <span>{ </span> <span>$users = User<span>::</span>where('id', '!=', auth()->user()->id)->get(); </span> <span>return view('users.index', compact('users')); </span> <span>} </span><span>} </span>
/ユーザーページにアクセスしてユーザーのリストを表示できます。
フォローする、または解除する
@<span>extends('layouts.app') </span> @<span>section('content') </span> <span><div class="container"> </span> <span><div class="col-sm-offset-2 col-sm-8"> </span> <span><!-- Following --> </span> <span><div class="panel panel-default"> </span> <span><div class="panel-heading"> </span> All Users <span></div> </span> <span><div class="panel-body"> </span> <span><table class="table table-striped task-table"> </span> <span><thead> </span> <span><th>User</th> </span> <span><th> </th> </span> <span></thead> </span> <span><tbody> </span> @<span>foreach ($users as $user) </span> <span><tr> </span> <span><td clphpass="table-text"><div>{{ $user->name }}</div></td> </span> @<span>if (auth()->user()->isFollowing($user->id)) </span> <span><td> </span> <span><form action="{{route('unfollow', ['id' => <span><span>$user->id</span>])}}"</span> method="POST"> </span> <span>{{ csrf_field() }} </span> <span>{{ method_field('DELETE') }} </span> <span><button type="submit" id="delete-follow-{{ <span><span>$user->id</span> }}"</span> class="btn btn-danger"> </span> <span><i class="fa fa-btn fa-trash"></i>Unfollow </span> <span></button> </span> <span></form> </span> <span></td> </span> @<span>else </span> <span><td> </span> <span><form action="{{route('follow', ['id' => <span><span>$user->id</span>])}}"</span> method="POST"> </span> <span>{{ csrf_field() }} </span> <span><button type="submit" id="follow-user-{{ <span><span>$user->id</span> }}"</span> class="btn btn-success"> </span> <span><i class="fa fa-btn fa-user"></i>Follow </span> <span></button> </span> <span></form> </span> <span></td> </span> @<span>endif </span> <span></tr> </span> @<span>endforeach </span> <span></tbody> </span> <span></table> </span> <span></div> </span> <span></div> </span> <span></div> </span> <span></div> </span>@endsection
app/http/controllers/userscontroller.php
フォロー機能が完了しました。 /usersページからユーザーをフォローして解除できます。
通知2種類の通知があります:
フォロー通知:ユーザーが別のユーザーが続いたときにユーザーに送信
移行して、この新しいテーブルを作成しましょう。
<span>git clone https://github.com/vickris/simple-blog </span>
フォロー通知から始めています。このコマンドを実行して、通知クラスを生成しましょう:
<span>cp .env.example .env </span>
その後、作成したばかりの通知クラスファイルを更新します:
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
app/notifications/userfollowed.php
<span>composer install </span>
user_idと通知タイプが自動的に設定されていることに加えて、拡張できます より多くのデータを含む通知。それがTodatabaseの目的です。返された配列は、通知のデータフィールドに追加されます。これらの数行のコードを使用すると、多くのことを達成できます。最初に、この通知が作成されたときに$フォロワーのインスタンスを注入する必要があります。
viaメソッドを使用して、Laravelにデータベースチャネルを介してこの通知を送信するように指示しています。 Laravelがこれに遭遇すると、通知テーブルに新しいレコードが作成されます。
最後に、suldqueueを実装することにより、Laravelは自動的にこの通知をバックグラウンドで実行するキュー内に配置し、応答が高速化されます。これは理にかなっています。なぜなら、後でプッシャーを使用するときにHTTP呼び出しを追加するからです。
ユーザーがフォローされたら通知を開始しましょう。
app/http/controllers/userscontroller.php
ユーザーモデルのnotifyメソッドを呼び出すことができます。これは、既に通知可能な特性を使用しているためです。 通知するモデルは、それを使用してNotifyメソッドにアクセスできるようにする必要があります。
読み取りphp artisan migrate <span>--seed </span>
通知には、いくつかの情報とリソースへのリンクが含まれます。たとえば、ユーザーが新しい投稿に関する通知を受け取った場合、通知は有益なテキストを表示し、クリック時にユーザーを投稿にリダイレクトし、読み取りとしてフラグを立てる必要があります。要求にread = notification_id入力があるかどうかをチェックするミドルウェアを作成します。
次のコマンドを使用してミドルウェアを作成しましょう
次に、このコードをミドルウェアのハンドルメソッド内に入れましょう:
app/http/middleware/marknotificationas read.php
各リクエストに対してミドルウェアを実行するために、$ MiddlewareGroupsに追加します。
<span>git clone https://github.com/vickris/simple-blog </span>
app/http/kernel.phpそれが完了したので、いくつかの通知を示しましょう。
通知を表示
<span>cp .env.example .env </span>
app/http/controllers/userscontroller.phpこれにより、最後の5つの未読通知が返されます。アクセス可能にするためにルートを追加する必要があります。
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
routes/web.phpヘッダーの通知のドロップダウンを追加します。
<span>composer install </span>
リソース/ビュー/レイアウト/app.blade.phpまた、現在のユーザーのIDを取得するために、スクリプト内にグローバルwindow.laravel.userid変数を追加しました。
javascriptとsass
このコードをapp.js:
に追加しましょうphp artisan migrate <span>--seed </span>
app/resources/assets/js/app.js
php artisan make:migration create_followers_table <span>--create=followers </span>
これは単なる初期化です。通知を使用して、AjaxまたはPusherを介して取得されているかどうかにかかわらず、すべての通知オブジェクトを保存します。
おそらく、notification_typesには通知のタイプが含まれています。
次に、Ajaxを介して通知を「取得」しましょう
app/resources/assets/js/app.js
これで、APIから最新の通知を取得し、ドロップダウン内に配置しています。
<span>public function up() </span><span>{ </span> <span>Schema<span>::</span>create('followers', function (Blueprint $table) { </span> <span>$table->increments('id'); </span> <span>$table->integer('user_id')->index(); </span> <span>$table->integer('follows_id')->index(); </span> <span>$table->timestamps(); </span> <span>}); </span><span>} </span>
app/resources/assets/js/app.js
この関数は、すべての通知の文字列を構築し、ドロップダウン内に配置します。 通知が受信されていない場合、「通知なし」を表示するだけです。 また、ドロップダウンボタンにクラスを追加します。これは、通知が存在するときに色を変更するだけです。 Githubの通知に少し似ています
最後に、いくつかのヘルパーは、通知文字列を作成するために機能します
php artisan migrate
app/resources/assets/js/app.jsこれをapp.scssファイルに追加するだけです:
app/resources/assets/sass/app.scss
<span>// ... </span> <span>class extends Authenticatable </span><span>{ </span> <span>// ... </span> <span>public function followers() </span> <span>{ </span> <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'follows_id', 'user_id') </span> <span>->withTimestamps(); </span> <span>} </span> <span>public function follows() </span> <span>{ </span> <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'user_id', 'follows_id') </span> <span>->withTimestamps(); </span> <span>} </span><span>} </span>
新しい投稿通知今すぐユーザーをフォローしようとすると、通知が表示されます。彼らがそれをクリックすると、彼らは /ユーザーにリダイレクトされ、さらに通知は消えます。
ユーザーが新しい投稿を作成したときにフォロワーに通知します。
<span>// ... </span> <span>class extends Authenticatable </span><span>{ </span> <span>// ... </span> <span>public function follow($userId) </span> <span>{ </span> <span>$this->follows()->attach($userId); </span> <span>return $this; </span> <span>} </span> <span>public function unfollow($userId) </span> <span>{ </span> <span>$this->follows()->detach($userId); </span> <span>return $this; </span> <span>} </span> <span>public function isFollowing($userId) </span> <span>{ </span> <span>return (boolean) $this->follows()->where('follows_id', $userId)->first(['id']); </span> <span>} </span> <span>} </span>
通知クラスを生成することから始めましょう。<span>git clone https://github.com/vickris/simple-blog </span>ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピー次のように、生成されたクラスを更新しましょう
<span>cp .env.example .env </span>ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピーapp/notifications/newarticle.php次に、通知を送信する必要があります。これを行う方法はいくつかあります。 私は雄弁なオブザーバーを使用するのが好きです。
ポストのオブザーバーを作り、そのイベントを聞いてみましょう。 App/Observers/Postobserver.php
という新しいクラスを作成します
次に、AppServiceProvider:DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secretログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピーにオブザーバーを登録します
<span>composer install </span>ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピーapp/providers/appserviceprovider.php次に、JSに表示されるメッセージをフォーマットするだけです:
php artisan migrate <span>--seed </span>ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピーapp/resources/assets/js/app.jsそしてヴォイラ!ユーザーは、フォローと新しい投稿に関する通知を取得しています!先に進んで、試してみてください!
プッシャーでリアルタイムに行く
Pusherを使用して、WebSocketsを介してリアルタイムで通知を取得する時が来ました。
Pusher.comで無料のPusherアカウントにサインアップして、新しいアプリを作成します。
ブロードキャスト構成ファイル内のアカウントのオプションを設定します:
php artisan make:migration create_followers_table <span>--create=followers </span>ログイン後にコピーログイン後にコピーログイン後にコピーconfig/broadcasting.php
<span>public function up() </span><span>{ </span> <span>Schema<span>::</span>create('followers', function (Blueprint $table) { </span> <span>$table->increments('id'); </span> <span>$table->integer('user_id')->index(); </span> <span>$table->integer('follows_id')->index(); </span> <span>$table->timestamps(); </span> <span>}); </span><span>} </span>ログイン後にコピーログイン後にコピーログイン後にコピーconfig/app.phpその後、プロバイダーアレイにAppProvidersBroadCastServiceProviderを登録します
PusherのPHP SDKとLaravel Echoを今すぐインストールする必要があります:php artisan migrateログイン後にコピーログイン後にコピーログイン後にコピーブロードキャストするために通知データを設定する必要があります。ユーザーフォロウド通知を更新しましょう:
<span>// ... </span> <span>class extends Authenticatable </span><span>{ </span> <span>// ... </span> <span>public function followers() </span> <span>{ </span> <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'follows_id', 'user_id') </span> <span>->withTimestamps(); </span> <span>} </span> <span>public function follows() </span> <span>{ </span> <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'user_id', 'follows_id') </span> <span>->withTimestamps(); </span> <span>} </span><span>} </span>ログイン後にコピーログイン後にコピーログイン後にコピーapp/notifications/userfollowed.php<span>// ... </span> <span>class extends Authenticatable </span><span>{ </span> <span>// ... </span> <span>public function follow($userId) </span> <span>{ </span> <span>$this->follows()->attach($userId); </span> <span>return $this; </span> <span>} </span> <span>public function unfollow($userId) </span> <span>{ </span> <span>$this->follows()->detach($userId); </span> <span>return $this; </span> <span>} </span> <span>public function isFollowing($userId) </span> <span>{ </span> <span>return (boolean) $this->follows()->where('follows_id', $userId)->first(['id']); </span> <span>} </span> <span>} </span>ログイン後にコピーログイン後にコピーログイン後にコピー
およびnewPost:<span>//... </span><span>Route<span>::</span>group(['middleware' => 'auth'], function () { </span> <span>Route<span>::</span>get('users', 'UsersController@index')->name('users'); </span> <span>Route<span>::</span>post('users/{user}/follow', 'UsersController@follow')->name('follow'); </span> <span>Route<span>::</span>delete('users/{user}/unfollow', 'UsersController@unfollow')->name('unfollow'); </span><span>}); </span>ログイン後にコピーログイン後にコピーapp/notifications/newPost.php
私たちがする必要がある最後のことは、JSを更新することです。 app.jsを開き、次のコードを追加しますphp artisan make:controller UsersControllerログイン後にコピーログイン後にコピーapp/resources/assets/js/app.js
そしてここで完了しました。通知はリアルタイムで追加されています。これでアプリで再生して、通知が更新される方法を確認できます。<span>// ... </span><span>use App<span>\User</span>; </span><span>class UsersController extends Controller </span><span>{ </span> <span>//.. </span> <span>public function index() </span> <span>{ </span> <span>$users = User<span>::</span>where('id', '!=', auth()->user()->id)->get(); </span> <span>return view('users.index', compact('users')); </span> <span>} </span><span>} </span>ログイン後にコピーログイン後にコピー結論Pusherには非常にシンプルなAPIがあり、リアルタイムのイベントを非常に簡単に受信します。 Laravel通知と相まって、1つの場所から複数のチャネル(電子メール、SMS、Slackなど)を介して通知を送信できます。このチュートリアルでは、簡単なブログにユーザーフォーション機能を追加し、前述のツールで強化して、スムーズなリアルタイム機能を取得しました。
プッシャーやLaravelの通知にはさらに多くのことがあります。タンデムでは、サービスを使用すると、ブラウザ、モバイル、IoTデバイスにパブ/サブメッセージをリアルタイムで送信できます。ユーザーのオンライン/オフラインステータスを取得するためのAPIのプレゼンスもあります。 それぞれのドキュメント(プッシャードキュメント、プッシャーチュートリアル、Laravelドキュメント)をチェックして、それらをより深く探索し、真の可能性を利用してください。
コメントでこれらのテクノロジーで構築したものを聞かせてください。
プッシャーを使用したLaravelでのリアルタイム通知に関するよくある質問(FAQ)LaravelとPusherの統合に関する問題をトラブルシューティングするにはどうすればよいですか?
LaravelとPusherの統合に関する問題のトラブルシューティングは、特にプラットフォームを初めて使用する場合は少し難しい場合があります。最初にすべきことは、.ENVファイルをチェックして、プッシャーアプリの資格情報が正しく入力されていることを確認することです。資格情報が正しい場合は、プッシャーデバッグコンソールを使用してエラーを確認できます。まだ問題が発生している場合は、Laravelの組み込みロギング機能を使用して、ブロードキャストプロセス中に発生するエラーを記録できます。これは、問題が発生する場所を正確に特定するのに役立ちます。モバイル通知にはLaravelとPusherを使用できますか? Pusherは、モバイルデバイスに通知を送信するために使用できるREST APIを提供します。 Laravelのイベントブロードキャスト機能を使用して、これらの通知をトリガーできます。イベントがブロードキャストされたら、モバイルアプリでキャッチして通知を表示できます。通知の外観をカスタマイズするにはどうすればよいですか?サーバー側ではなく、クライアント側。これは、通知をカスタマイズするには、JavaScript、CSS、またはその他のクライアント側のテクノロジーを使用する必要があることを意味します。 Pusherは、イベントをリッスンし、通知を表示するために使用できるJavaScriptライブラリを提供します。このライブラリを独自のCSSと組み合わせて使用して、通知の外観をカスタマイズできます。LaravelとPusherの統合をテストするにはどうすればよいですか? Laravelの組み込みテスト機能を使用します。イベントをトリガーするテストを作成し、プッシャーデバッグコンソールを使用して、イベントがブロードキャストされているかどうかを確認できます。また、テストを作成して、イベントリスナーが正しく機能しているかどうかを確認することもできます。LaravelとPusherの統合を保護するにはどうすればよいですか?あなたのデータ。プライベートチャネルを使用して統合を保護できます。プライベートチャネルには認証が必要です。つまり、認証されたユーザーのみがサブスクライブできることを意味します。 Laravelの組み込み認証機能を使用して認証を実装できます。リアルタイムチャットアプリケーションにLaravelとPusherを使用できますか?アプリケーション。 Pusherは、メッセージを即座に送信および受信するために使用できるリアルタイム機能を提供します。 Laravelのイベント放送機能を使用して、これらのメッセージをトリガーできます。LaravelとPusherの統合のエラーを処理するにはどうすればよいですか?
LaravelとPusherの統合の取り扱いエラーは、Laravelの組み込みエラー処理機能を使用して実行できます。放送プロセス中に発生する例外をキャッチし、それに応じてそれらを処理できます。また、プッシャーデバッグコンソールを使用してエラーを確認することもできます。LaravelとPusherの統合を最適化するにはどうすればよいですか?あなたが放送するイベント。ブロードキャストが多すぎると、アプリケーションが遅くなり、多くのリソースを消費する可能性があります。 Laravelのキューシステムを使用して背景のイベントを処理することで統合を最適化することもできます。ライブストリーミングアプリケーション。 Pusherは、ライブビデオストリームのブロードキャストに使用できるリアルタイム機能を提供します。 Laravelのイベントブロードキャスト機能を使用して、これらのストリームをトリガーできます。LaravelとPusherの統合を監視するにはどうすればよいですか?
Pusherの分析機能を使用してLaravelとPusherの統合を監視できます。これらの機能を使用して、送信するメッセージの数、持っている接続の数、その他の重要なメトリックを追跡できます。 Laravelの組み込みロギング機能を使用して、ブロードキャストプロセス中に発生したエラーを記録することもできます。
以上がPusherを使用してLaravelにリアルタイム通知を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。