Rumah >pembangunan bahagian belakang >tutorial php >Cara menambah pemberitahuan masa nyata ke Laravel dengan penolak
Artikel ini dikaji semula oleh Rafie Younes dan Wern Ancheta. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!
bernasib baik, dengan Laravel dan penolak, melaksanakan fungsi ini adalah angin. Kod yang akan kami tulis dalam tutorial ini boleh didapati di sini.
imej melalui pusher.com
Pendekatan yang lebih baik adalah untuk memanfaatkan kuasa WebSockets, dan menerima pemberitahuan ketika mereka dihantar. Inilah yang akan kita gunakan dalam tutorial ini.
PUSHER
... mengintegrasikan fungsi bi-arah masa nyata melalui websocket ke web dan aplikasi mudah alih.Ia mempunyai API yang sangat mudah, tetapi kami akan menggunakannya lebih mudah dengan Penyiaran Laravel dan Laravel Echo.
Dalam tutorial ini, kami akan menambah pemberitahuan masa nyata ke blog yang sedia ada. Fungsi asas adalah serupa dengan pemberitahuan Larave masa nyata dengan aliran. Kami akan bermula dengan repo ini yang dibuat oleh Christopher Vundi (saya mengubahnya hanya sedikit) yang merupakan blog mudah di mana pengguna yang boleh melakukan crud pada jawatan.
Projek
<span>git clone https://github.com/vickris/simple-blog </span>
maka kami akan membuat pangkalan data MySQL dan menubuhkan pembolehubah persekitaran untuk memberikan akses aplikasi ke pangkalan data.
mari salin env.example ke .env dan kemas kini pembolehubah berkaitan pangkalan data.
<span>cp .env.example .env </span>
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
Sekarang mari kita pasang kebergantungan projek dengan.env
<span>composer install </span>dan jalankan perintah penghijrahan dan pembenihan untuk mengisi pangkalan data dengan beberapa data:
php artisan migrate <span>--seed </span>Jika anda menjalankan aplikasi dan lawatan /jawatan, anda akan dapat melihat penyenaraian jawatan yang dihasilkan. Semak permohonan, daftar pengguna, dan buat beberapa siaran. Ia adalah aplikasi yang sangat asas, tetapi melayani demo kami dengan sempurna.
Ikuti Hubungan Pengguna
Mari buat jadual pivot yang berkaitan dengan pengguna kepada pengguna. Buat penghijrahan pengikut baru:
php artisan make:migration create_followers_table <span>--create=followers </span>kita perlu menambah beberapa bidang ke penghijrahan itu: user_id untuk mewakili pengguna yang mengikuti, dan medan berikut untuk mewakili pengguna yang diikuti.
Kemas kini penghijrahan seperti berikut:
<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>Sekarang mari kita berhijrah untuk membuat jadual:
php artisan migrateJika anda telah mengikuti artikel pendekatan aliran, anda akan mendapati bahawa perkara -perkara hampir sama sehingga ke tahap ini. Di bahagian yang berikut, kita akan mencapai fungsi ikut yang sama dengan pendekatan yang berbeza.
mari kita tambahkan kaedah hubungan ke model pengguna.
<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.phpSekarang model pengguna mempunyai hubungan yang diperlukan, pengikut mengembalikan semua pengikut pengguna, dan mengikuti pulangan semua orang yang pengguna ikut.
kami akan memerlukan beberapa fungsi penolong untuk membolehkan pengguna mengikuti pengguna lain, dan untuk memeriksa sama ada pengguna mengikuti pengguna tertentu.
<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>
app/user.phpsempurna. Dengan set model, sudah tiba masanya untuk menyenaraikan pengguna.
Penyenaraian pengguna
<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>
Laluan/web.phpKemudian, sudah tiba masanya untuk membuat pengawal baru untuk pengguna:
php artisan make:controller UsersControllerkami akan menambah kaedah indeks kepadanya:
<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>
app/http/controllers/usercontroller.phpKaedah memerlukan pandangan. Mari buat pengguna.Index View dan letakkan markup ini di dalamnya:
@<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
sumber/paparan/pengguna/index.blade.phpAnda kini boleh melawat halaman /pengguna untuk melihat penyenaraian pengguna.
untuk diikuti, atau tidak dapat diikuti
<span>//... </span><span>class UsersController extends Controller </span><span>{ </span> <span>//... </span> <span>public function follow(User $user) </span> <span>{ </span> <span>$follower = auth()->user(); </span> <span>if ($follower->id == $user->id) { </span> <span>return back()->withError("You can't follow yourself"); </span> <span>} </span> <span>if(!$follower->isFollowing($user->id)) { </span> <span>$follower->follow($user->id); </span> <span>// sending a notification </span> <span>$user->notify(new UserFollowed($follower)); </span> <span>return back()->withSuccess("You are now friends with <span><span>{$user->name}</span>"</span>); </span> <span>} </span> <span>return back()->withError("You are already following <span><span>{$user->name}</span>"</span>); </span> <span>} </span> <span>public function unfollow(User $user) </span> <span>{ </span> <span>$follower = auth()->user(); </span> <span>if($follower->isFollowing($user->id)) { </span> <span>$follower->unfollow($user->id); </span> <span>return back()->withSuccess("You are no longer friends with <span><span>{$user->name}</span>"</span>); </span> <span>} </span> <span>return back()->withError("You are not following <span><span>{$user->name}</span>"</span>); </span> <span>} </span><span>} </span>
app/http/controllers/usercontroller.php
Kami selesai dengan fungsi berikut. Kami kini boleh mengikuti dan tidak mengikuti pengguna dari halaman /pengguna.
Laravel menyediakan API untuk menghantar pemberitahuan melalui pelbagai saluran. E -mel, SMS, pemberitahuan web, dan apa -apa jenis pemberitahuan yang lain boleh dihantar menggunakan kelas pemberitahuan.
Kami akan mempunyai dua jenis pemberitahuan:
Menggunakan arahan Artisan, kita boleh menjana penghijrahan untuk pemberitahuan:
<span>git clone https://github.com/vickris/simple-blog </span>
mari kita berhijrah dan buat jadual baru ini.
<span>cp .env.example .env </span>
Kami bermula dengan pemberitahuan berikut. Mari kita laksanakan arahan ini untuk menghasilkan kelas pemberitahuan:
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
maka kami akan mengemas kini fail kelas pemberitahuan yang baru saja kami buat:
<span>composer install </span>
App/pemberitahuan/userfollowed.php
Dengan beberapa baris kod ini kita dapat mencapai banyak. Mula -mula kita memerlukan contoh pengikut $ disuntik apabila pemberitahuan ini dibuat.
Menggunakan kaedah VIA, kami memberitahu Laravel untuk menghantar pemberitahuan ini melalui saluran pangkalan data. Apabila Laravel menemui ini, ia akan mencipta rekod baru dalam jadual pemberitahuan.
jenis user_id dan pemberitahuan ditetapkan secara automatik, ditambah kita boleh melanjutkan Pemberitahuan dengan lebih banyak data. Itulah yang Todatabase untuk. Arahan yang dikembalikan akan ditambah ke medan data pemberitahuan.
Akhirnya, dengan melaksanakan ConflyQueue, Laravel secara automatik akan meletakkan pemberitahuan ini di dalam barisan untuk dilaksanakan di latar belakang, yang akan mempercepatkan respons. Ini masuk akal kerana kami akan menambah panggilan HTTP apabila kami menggunakan penolak kemudian.
mari kita mulakan pemberitahuan apabila pengguna diikuti.
php artisan migrate <span>--seed </span>
app/http/controllers/usercontroller.php
kita boleh memanggil kaedah pemberitahuan pada model pengguna kerana ia sudah menggunakan sifat yang dapat diberi perhatian. Mana -mana model yang ingin anda maklumkan harus menggunakannya untuk mendapatkan akses kepada kaedah pemberitahuan.
Pemberitahuan akan mengandungi beberapa maklumat dan pautan ke sumber. Sebagai contoh: Apabila pengguna menerima pemberitahuan mengenai jawatan baru, pemberitahuan itu harus menunjukkan teks bermaklumat, mengalihkan pengguna ke jawatan apabila diklik, dan dibenderakan seperti yang dibaca.
kami akan membuat middleware yang memeriksa jika permintaan mempunyai? Baca = NOTIFICATION_ID Input dan bendera sebagai bacaan.mari kita buat middleware dengan arahan berikut:
php artisan make:migration create_followers_table <span>--create=followers </span>Kemudian, mari letakkan kod ini di dalam kaedah pemegang middleware:
<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/http/middleware/marknotificationAsread.php
Untuk mendapatkan middleware kami untuk dilaksanakan untuk setiap permintaan, kami akan menambahkannya ke $ middlewareGroups.
<span>git clone https://github.com/vickris/simple-blog </span>
app/http/kernel.php
Dengan yang dilakukan, mari kita tunjukkan beberapa pemberitahuan.
kita perlu menunjukkan penyenaraian pemberitahuan menggunakan AJAX, kemudian kemas kini dalam masa nyata dengan penolak. Pertama, mari tambahkan kaedah pemberitahuan kepada pengawal:
<span>cp .env.example .env </span>
app/http/controllers/usercontroller.php
Ini akan mengembalikan 5 pemberitahuan terakhir yang belum dibaca. Kami hanya perlu menambah laluan untuk menjadikannya mudah.
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
Laluan/web.php
Sekarang tambahkan dropdown untuk pemberitahuan di tajuk.
<span>composer install </span>
sumber/paparan/susun atur/app.blade.php
Kami juga telah menambah pembolehubah window.laravel.userid global di dalam skrip untuk mendapatkan ID pengguna semasa.
Kami akan menggunakan campuran Laravel untuk menyusun JavaScript dan Sass. Pertama, kita perlu memasang pakej NPM.
php artisan migrate <span>--seed </span>
Sekarang mari tambahkan kod ini ke dalam app.js:
php artisan make:migration create_followers_table <span>--create=followers </span>
app/sumber/aset/js/app.js
Ini hanya permulaan. Kami akan menggunakan pemberitahuan untuk menyimpan semua objek pemberitahuan sama ada mereka diambil melalui AJAX atau PUSHER.
anda mungkin meneka, notifikasi_types mengandungi jenis pemberitahuan.
Seterusnya, mari kita "dapatkan" pemberitahuan melalui 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>
app/sumber/aset/js/app.js
Dengan ini, kami mendapat pemberitahuan terkini dari API kami dan meletakkannya di dalam lungsur turun.
Di dalam penambahan kita menyatukan pemberitahuan sekarang dengan yang baru menggunakan Lodash, dan hanya mengambil 5 terbaru yang akan ditunjukkan.
Kami memerlukan beberapa lagi fungsi untuk menyelesaikan tugas.php artisan migrate
app/sumber/aset/js/app.js
Fungsi ini membina rentetan semua pemberitahuan dan meletakkannya di dalam jatuh turun. Sekiranya tiada pemberitahuan diterima, ia hanya menunjukkan "tiada pemberitahuan".
Ia juga menambah kelas ke butang dropdown, yang hanya akan mengubah warna apabila pemberitahuan wujud. Ia agak seperti pemberitahuan GitHub.
Akhirnya, beberapa fungsi penolong untuk membuat rentetan pemberitahuan.
<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/sumber/aset/js/app.js
Sekarang kami hanya akan menambah ini ke fail app.scss kami:
<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>
App/Sumber/Aset/SASS/APP.SCSS
mari kita menyusun aset:
<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>
Jika anda mencuba dan mengikuti pengguna sekarang, mereka akan mendapat pemberitahuan. Apabila mereka mengkliknya, mereka akan diarahkan ke /pengguna, ditambah dengan pemberitahuan akan hilang.
kami akan memberitahu pengikut apabila pengguna membuat jawatan baru.
mari kita mulakan dengan menjana kelas pemberitahuan.
<span>git clone https://github.com/vickris/simple-blog </span>
mari kita mengemas kini kelas yang dihasilkan seperti berikut:
<span>cp .env.example .env </span>
App/Notifications/Newarticle.php
Seterusnya, kita perlu menghantar pemberitahuan. Terdapat beberapa cara yang boleh kita lakukan ini. Saya suka menggunakan pemerhati yang fasih.
mari kita buat pemerhati untuk pos dan dengar peristiwa -peristiwa. Kami akan membuat kelas baru: app/pemerhati/postobserver.php
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret
Kemudian, daftar pemerhati di AppServiceProvider:
<span>composer install </span>
app/penyedia/appserviceProvider.php
Sekarang kita hanya perlu memformat mesej yang akan ditunjukkan dalam JS:
php artisan migrate <span>--seed </span>
app/sumber/aset/js/app.js
dan voilà! Pengguna mendapat pemberitahuan mengenai berikut dan jawatan baru! Teruskan dan cubalah!
Sudah tiba masanya untuk menggunakan penolak untuk mendapatkan pemberitahuan secara real-time melalui WebSockets.
Daftar untuk Akaun Pusher Percuma di Pusher.com dan buat aplikasi baru.
php artisan make:migration create_followers_table <span>--create=followers </span>
Tetapkan pilihan akaun anda di dalam fail konfigurasi penyiaran:
<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/Broadcasting.php
maka kami akan mendaftarkan AppProvidersBroadCastServiceProvider dalam array penyedia.
php artisan migrate
config/app.php
kita harus memasang PHP SDK dan Laravel Echo sekarang:
<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>
kita perlu menetapkan data pemberitahuan untuk disiarkan. Mari kita mengemas kini pemberitahuan userfollowed:
<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/pemberitahuan/userfollowed.php
dan Newpost:
php artisan make:controller UsersController
App/Notifications/newPost.php
Perkara terakhir yang perlu kita lakukan ialah mengemas kini JS kami. Buka app.js dan tambahkan kod berikut
<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>
app/sumber/aset/js/app.js
Dan kami sudah selesai di sini. Pemberitahuan ditambah dalam masa nyata. Anda kini boleh bermain dengan aplikasinya dan melihat bagaimana pemberitahuan dikemas kini.
Terdapat lebih banyak lagi untuk penolak dan pemberitahuan Laravel: Selaras, perkhidmatan membolehkan anda menghantar mesej pub/sub dalam masa nyata kepada pelayar, telefon bimbit, dan peranti IoT. Terdapat juga API kehadiran untuk mendapatkan status pengguna dalam talian/luar talian.
Sila periksa dokumentasi masing -masing (Dokumen Pusher, Tutorial Pusher, Dokumen Laravel) untuk meneroka mereka dengan lebih mendalam dan menggunakan potensi sebenar mereka.
izinkan saya mendengar apa yang telah anda bina dengan teknologi ini dalam komen.
Bagaimana saya dapat mengamankan integrasi Laravel dan penolak saya? data anda. Anda boleh menjamin integrasi anda dengan menggunakan saluran peribadi. Saluran peribadi memerlukan pengesahan, yang bermaksud bahawa hanya pengguna yang diberi kuasa boleh melanggannya. Anda boleh melaksanakan pengesahan menggunakan ciri pengesahan terbina dalam Laravel.
Atas ialah kandungan terperinci Cara menambah pemberitahuan masa nyata ke Laravel dengan penolak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!