本文由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>然后,我们将创建一个MySQL数据库并设置环境变量,以使应用程序访问数据库。
>让我们复制Env.example至.env并更新与数据库相关的变量。
<span>cp .env.example .env </span>
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret.env
>安装项目的依赖项现在,让我们以
并运行迁移和种子命令,以使用一些数据填充数据库
<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该方法需要一个视图。让我们创建users.index视图,然后将此标记放入其中:
<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>> Resources/views/users/index.blade.php
>>您现在可以访问 /用户页面查看用户的列表。
跟随或取消关注
>@<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> UserController缺乏遵循和取消关注方法。让我们完成将此部分包裹起来的工作。
> 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>> app/notifications/userfollowed.php
使用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>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路由/web.php
>现在,添加了标题中通知的下拉列表。
<span>composer install </span>>资源/视图/布局/app.blade.php
>我们还添加了脚本中的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>>应用程序/资源/资产/JS/App.js
>这只是一个初始化。我们将使用通知存储所有通知对象,无论是通过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>>应用程序/资源/资产/JS/App.js
>这样,我们将从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然后,在AppServiceProvider中注册观察者:
<span>composer install </span>> app/provers/appserviceprovider.php
现在,我们只需要格式化以在JS中显示的消息:
>应用程序/资源/资产/JS/App.js
php artisan migrate <span>--seed </span>
>使用Pusher和voilà!用户正在收到有关以下内容和新帖子的通知!继续尝试!
>
实时进行
是时候使用推动器通过Websocket实时获取通知了。>在广播配置文件中设置您的帐户选项:
php artisan make:migration create_followers_table <span>--create=followers </span>config/broadcasting.php
然后,我们将在提供商数组中注册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>和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
>应用程序/资源/资产/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中文网其他相关文章!