本文由Rafie Younes和Wern Ancheta進行了同行評審。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳狀態!
>現代Web用戶期望將應用程序內發生的一切通知。您不想成為一個甚至沒有在所有社交媒體網站中找到的通知下拉列表的網站,而且這些天在其他任何地方也可以找到。
通過pusher.com
圖像
鑰匙要點
>的Web服務
…通過Websocket集成實時雙向功能到Web和移動應用程序。
> 在本教程中,我們將為現有博客添加實時通知。 基本功能類似於帶有流的實時Laravel通知。 我們將從Christopher Vundi(我只是對其進行了一些更改)進行的此回購開始,這是一個簡單的博客,用戶可以在帖子上執行CRUD。
項目首先,我們將克隆簡單的laravel博客:初始化
<span>git clone https://github.com/vickris/simple-blog </span>
>讓我們複製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代表正在關注的用戶,以及一個clasts_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>
讓我們從設置必要的路線
開始
路由/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
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
我們完成了以下功能。現在,我們可以關注和從 /用戶頁面上取消關注用戶。
>我們將有兩種類型的通知:
>
>讓我們遷移並創建這個新表。
<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
<span>composer install </span>
使用Via方法,我們告訴Laravel通過數據庫渠道發送此通知。當Laravel遇到這一點時,它將在“通知”表中創建新記錄。有了這幾行代碼,我們可以實現很多。首先,我們需要在創建此通知時注入$ toclorter的實例。
自動設置了User_id和通知類型,加上我們可以擴展 帶有更多數據的通知。這就是Todatabase的目的。返回的數組將被添加到通知的數據字段中。
> 最後,通過實施應有的Quepue,Laravel將自動將此通知放入以要在後台執行的隊列中,這將加快響應的速度。這是有道理的,因為我們稍後使用Pusher時,我們將添加HTTP調用。>讓我們在遵循用戶時啟動通知。
>
> app/http/controllers/userscontroller.php
>我們可以在用戶模型上調用通知方法,因為它已經使用了通知性狀。 您要通知的任何模型都應使用它來訪問Notify方法。
php artisan migrate <span>--seed </span>
將通知標記為讀取>我們將製作一個中間件,檢查請求是否具有?>通知將包含一些信息以及指向資源的鏈接。例如:當用戶收到有關新帖子的通知時,該通知應顯示信息豐富的文本,單擊時將用戶重定向到帖子,並將其標記為讀取。
>讓我們使用以下命令進行中間件:
> app/http/middleware/marknotificationasread.php
為了使我們的中間件為每個請求執行,我們將其添加到$ MIDDERWAREGROUPS。
<span>git clone https://github.com/vickris/simple-blog </span>
>完成,讓我們顯示一些通知。
顯示通知
<span>cp .env.example .env </span>
這將返回最後5個未讀通知。我們只需要添加一條路線才能使其可訪問。
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
>現在,添加了標題中通知的下拉列表。
<span>composer install </span>
>我們還添加了腳本中的global window.laravel.userid變量以獲取當前用戶的ID。
> javascript和sass
現在,讓我們將此代碼添加到app.js:
php artisan migrate <span>--seed </span>
php artisan make:migration create_followers_table <span>--create=followers </span>
>這只是一個初始化。我們將使用通知存儲所有通知對象,無論是通過AJAX還是PUSHER檢索的通知對象。
您可能猜到了,notification_types包含通知的類型。
>接下來,讓我們通過ajax“獲取”通知。
<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>
>這樣,我們將從API中獲取最新通知並將其放入下拉列表中。
>在添加通知書中,我們將當前通知與新通知相連,並僅使用lodash,僅需顯示最新的5個要顯示的通知。
>應用程序/資源/資產/JS/App.js
php artisan migrate
>它還在下拉按鈕中添加了一個類,當存在通知時,該按鈕只會更改其顏色。有點像Github的通知。>此功能構建了所有通知的字符串,並將其放在下拉列表中。 如果未收到通知,則僅顯示“沒有通知”。
>
>
>最後,一些輔助功能可以發出通知字符串。>
>應用程序/資源/資產/JS/App.js
<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.scss文件中:
>
> app/resources/resoursets/sass/app.scss
<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>//... </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>
讓我們從生成通知類開始。
<span>git clone https://github.com/vickris/simple-blog </span>
讓我們更新生成的類,如下所示:
<span>cp .env.example .env </span>
> app/notifications/newarticle.php
接下來,我們需要發送通知。我們可以通過多種方式做到這一點。 我喜歡使用雄辯的觀察者。
>讓我們做一個觀察者來張貼並聆聽其事件。我們將創建一個新類:app/observers/postobserver.php
>DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
<span>composer install </span>
現在,我們只需要格式化以在JS中顯示的消息:
>應用程序/資源/資產/JS/App.js
php artisan migrate <span>--seed </span>
>使用Pusher和voilà!用戶正在收到有關以下內容和新帖子的通知!繼續嘗試!
>
實時進行
是時候使用推動器通過Websocket實時獲取通知了。>在廣播配置文件中設置您的帳戶選項:
php artisan make:migration create_followers_table <span>--create=followers </span>
然後,我們將在提供商數組中註冊AppProvidersBroadcastServiceProvider。
<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
我們現在應該安裝Pusher的PHP SDK和Laravel Echo:
php artisan migrate
我們必須設置要廣播的通知數據。讓我們更新以下通知:
> app/notifications/userfollowed.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>
<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>//... </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
>應用程序/資源/資產/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通知,我們可以從一個地方通過多個渠道(電子郵件,SMS,Slack等)發送通知。在本教程中,我們在一個簡單的博客中添加了用戶關注功能,並使用上述工具來增強它,以獲得一些平穩的實時功能。結論
>
>推動器和Laravel通知還有更多內容:在同時,這些服務允許您實時向瀏覽器,手機和IoT設備實時發送酒吧/子消息。還有一個在線API可以在線/離線狀態的用戶。>
請檢查他們各自的文檔(推送文檔,推送器教程,Laravel文檔),以更深入地探索它們並利用它們的真正潛力。
>讓我聽到您在評論中使用這些技術構建的內容。
>>與Laravel和Pusher集成問題的故障排除問題可能有些棘手,尤其是如果您是該平台的新手。您應該做的第一件事是檢查.env文件,以確保正確輸入推動器應用程序憑據。如果憑據是正確的,則可以使用Pusher調試控制台檢查任何錯誤。如果您仍然遇到問題,則可以使用Laravel的內置日誌記錄功能來記錄廣播過程中發生的任何錯誤。這可以幫助您確切查明問題的出現。
是的,您可以將Laravel和Pusher用於移動通知。 Pusher提供了一個REST API,您可以使用該API將通知發送到移動設備。您可以使用Laravel的事件廣播功能來觸發這些通知。當廣播事件時,您可以在移動應用程序中捕獲並顯示通知。
>
如何優化我的Laravel和Pusher Integration?
是的,您可以使用laravel和Pusher作為實時流媒體應用程序。 Pusher提供了實時功能,您可以用來廣播實時視頻流。您可以使用Laravel的事件廣播功能來觸發這些流。
以上是如何用推送器向Laravel添加實時通知的詳細內容。更多資訊請關注PHP中文網其他相關文章!