如何用推送器向Laravel添加实时通知-php教程-PHP中文网

>通知

>我们必须使用AJAX显示通知的列表，然后使用Pusher实时更新。首先，让我们在控制器中添加通知方法：

>我们将使用Laravel Mix来编译JavaScript和Sass。首先，我们需要安装NPM软件包。

经常询问的问题（常见问题解答）有关拉拉维尔（Laravel）的实时通知

>我如何解决Laravel和Pusher集成问题的问题？

我可以将Laravel和Pusher用于移动通知吗？

>如何使用Laravel的内置错误处理功能来处理Laravel和Pusher集成中的错误？您可以捕获广播过程中发生的任何例外，并相应地处理它们。您还可以使用Pusher调试控制台检查任何错误。

>如何使用Pusher的分析功能来监视我的Laravel和Pusher集成？您可以使用这些功能来跟踪您发送的消息数量，连接数量以及其他重要指标。您还可以使用Laravel的内置日志记录功能来记录广播过程中发生的任何错误。

首页

后端开发

php教程

如何用推送器向Laravel添加实时通知

Joseph Gordon-Levitt

Feb 09, 2025 am 11:58 AM

如何用推送器向Laravel添加实时通知

本文由Rafie Younes和Wern Ancheta进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！

>现代Web用户期望将应用程序内发生的一切通知。您不想成为一个甚至没有在所有社交媒体网站中找到的通知下拉列表的网站，而且这些天在其他任何地方也可以找到。

> 幸运的是，在Laravel和Pusher的情况下，实施此功能是轻而易举的。我们将在本教程中编写的代码可以在此处找到。

通过pusher.com

图像如何用推送器向Laravel添加实时通知钥匙要点

>利用Laravel和Pusher来实现实时通知，并通过提供有关用户活动的立即反馈来实现用户互动。

>

推动器简化了使用Websocket的实时双向功能的集成，这比用AJAX间隔进行轮询服务器更有效。

>设置一个简单的Laravel博客应用程序，配置MySQL数据库，然后使用迁移来创建用于用户交互的关注者系统。
>使用Laravel的内置通知系统来发送有关新关注者和帖子的通知，从而增强了应用程序的动态互动功能。
>使用推动器实现实时通知，允许在事件发生时立即收到通知，而无需刷新页面。
>通过使用私人渠道和身份验证来保护实时应用程序，以确保仅预定用户收到通知。
实时通知
一种更好的方法是利用网站插入的力量，并在发送时收到通知。这就是我们将在本教程中使用的。

>推动器

推动器是

>的Web服务

…通过Websocket集成实时双向功能到Web和移动应用程序。

>它具有非常简单的API，但是我们将在Laravel Broadcasting和Laravel Echo中更简单地使用它。

> 在本教程中，我们将为现有博客添加实时通知。基本功能类似于带有流的实时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

我们完成了以下功能。现在，我们可以关注和从 /用户页面上取消关注用户。

>通知

Laravel提供了用于通过多个渠道发送通知的API。电子邮件，短信，网络通知以及任何其他类型的通知都可以使用通知类发送。

我们将有两种类型的通知：

时发送给用户
时发送给给定用户的关注者

>用户遵循通知

使用工匠命令，我们可以生成迁移以进行通知：>

>让我们迁移并创建这个新表。

<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

有了这几行代码，我们可以实现很多。首先，我们需要在创建此通知时注入$ toclorter的实例。

使用Via方法，我们告诉Laravel通过数据库渠道发送此通知。当Laravel遇到这一点时，它将在“通知”表中创建新记录。

自动设置了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

完成，让我们显示一些通知。

显示通知

>我们必须使用AJAX显示通知的列表，然后使用Pusher实时更新。首先，让我们在控制器中添加通知方法：

<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

>我们将使用Laravel Mix来编译JavaScript和Sass。首先，我们需要安装NPM软件包。

现在，让我们将此代码添加到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>

登录后复制

和voilà！用户正在收到有关以下内容和新帖子的通知！继续尝试！
>

>使用Pusher

实时进行

是时候使用推动器通过Websocket实时获取通知了。>在pusher.com上注册一个免费的Pusher帐户并创建一个新的应用程序。

>在广播配置文件中设置您的帐户选项：

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文档），以更深入地探索它们并利用它们的真正潜力。

>让我听到您在评论中使用这些技术构建的内容。

经常询问的问题（常见问题解答）有关拉拉维尔（Laravel）的实时通知

>我如何解决Laravel和Pusher集成问题的问题？

>与Laravel和Pusher集成问题的故障排除问题可能有些棘手，尤其是如果您是该平台的新手。您应该做的第一件事是检查.env文件，以确保正确输入推动器应用程序凭据。如果凭据是正确的，则可以使用Pusher调试控制台检查任何错误。如果您仍然遇到问题，则可以使用Laravel的内置日志记录功能来记录广播过程中发生的任何错误。这可以帮助您确切查明问题的出现。