Cách tạo thông báo trên web bằng kênh Laravel và Pusher
Nhiều ứng dụng web bao gồm hệ thống thông báo trong ứng dụng sẽ thông báo cho bạn ngay lập tức khi ai đó thực hiện hành động liên quan đến bạn hoặc account của bạn. Trên Facebook, bạn sẽ được thông báo khi ai đó thích trạng thái của bạn hoặc khi ai đó comment trên profile của bạn. Hướng dẫn này sẽ hướng dẫn bạn sao chép chức năng này bằng cách tạo hệ thống thông báo dựa trên web bằng Laravel và Pusher .
Yêu cầu
Để làm theo hướng dẫn này, bạn cần cài đặt PHP và Laravel trên máy của bạn , cùng với account Pusher.
Những gì ta sẽ xây dựng
Sau hướng dẫn này, ta sẽ trình bày cách ta có thể có một ứng dụng web nhỏ hiển thị thông báo bằng Laravel và Pusher. Nó sẽ tương tự như cách các trang web như Facebook hiển thị thông báo. Đây là bản xem trước về những gì ta sẽ xây dựng:
Cài đặt ứng dụng Pusher của bạn
Tạo tài khoản Pusher , nếu bạn chưa có, sau đó cài đặt ứng dụng của bạn như trong ảnh chụp màn hình bên dưới.
Cài đặt ứng dụng Laravel của bạn
Tạo một ứng dụng Laravel mới bằng cách chạy lệnh bên dưới trong terminal của bạn:
- laravel new laravel-web-notifications
Sau đó, cài đặt Pusher PHP SDK bằng Composer. Chạy lệnh sau:
- composer require pusher/pusher-php-server
Khi Composer hoàn tất, bước tiếp theo là cấu hình Laravel để sử dụng Pusher làm trình điều khiển phát sóng của nó. Để thực hiện việc này, hãy mở file .env nằm trong folder root của cài đặt Laravel của bạn. Cập nhật các giá trị để trùng với cấu hình bên dưới:
PUSHER_APP_ID=322700 BROADCAST_DRIVER=pusher // Get the credentials from your pusher dashboard PUSHER_APP_ID=XXXXX PUSHER_APP_KEY=XXXXXXX PUSHER_APP_SECRET=XXXXXXX Lưu ý quan trọng: Nếu bạn đang sử dụng EU hoặc AP Cluster, hãy đảm bảo cập nhật mảng tùy chọn trong config/broadcasting.php của bạn vì Laravel mặc định sử dụng Server USA . Bạn có thể sử dụng tất cả các tùy chọn mà Thư viện PHP của Pusher hỗ trợ.
Mở config/app.php và bỏ ghi chú lớp App\Providers\BroadcastServiceProvider::class .
Tạo ứng dụng Laravel và Pusher của ta
Bây giờ các bước cấu hình đã hoàn tất, đã đến lúc tạo ứng dụng. Đầu tiên, hãy tạo một lớp Event sẽ phát tới Pusher từ ứng dụng Laravel của ta . Sự kiện có thể được kích hoạt từ bất kỳ đâu trong ứng dụng.
- php artisan make:event StatusLiked
Thao tác này sẽ tạo một lớp StatusLiked mới trong folder app/Events . Mở nội dung của file và cập nhật các nội dung sau:
<?php namespace App\Events; use Illuminate\Queue\SerializesModels; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; class StatusLiked implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public $username; public $message; /** * Create a new event instance. * * @return void */ public function __construct($username) { $this->username = $username; $this->message = "{$username} liked your status"; } /** * Get the channels the event should broadcast on. * * @return Channel|array */ public function broadcastOn() { return ['status-liked']; } } Giao diện ShouldBroadcast cho Laravel biết rằng sự kiện này sẽ được phát bằng bất kỳ trình điều khiển nào được đặt trong file cấu hình.
Cũng có một hàm tạo chấp nhận hai tham số, tên user và động từ. Các biến này được gán cho các thuộc tính của lớp có tên giống nhau. Điều quan trọng là đặt khả năng hiển thị của các thuộc tính ở chế độ công khai ; nếu bạn không, thuộc tính sẽ bị bỏ qua.
Cuối cùng, tên kênh để phát sóng được đặt.
Tạo các dạng xem ứng dụng
Hướng dẫn này sẽ sử dụng một chế độ xem duy nhất với thanh chuyển và biểu tượng thông báo. Biểu tượng sẽ được cập nhật khi có thông báo mới mà không cần phải làm mới trang. Các thông báo là phù du trong hướng dẫn này theo thiết kế; bạn có thể mở rộng chức năng và làm cho nó tồn tại lâu hơn sau khi trang reload nếu bạn muốn.
Mở file welcome.blade.php và thay thế bằng HTML bên dưới.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo Application</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="/css/bootstrap-notifications.min.css"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Demo App</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown dropdown-notifications"> <a href="#notifications-panel" class="dropdown-toggle" data-toggle="dropdown"> <i data-count="0" class="glyphicon glyphicon-bell notification-icon"></i> </a> <div class="dropdown-container"> <div class="dropdown-toolbar"> <div class="dropdown-toolbar-actions"> <a href="#">Mark all as read</a> </div> <h3 class="dropdown-toolbar-title">Notifications (<span class="notif-count">0</span>)</h3> </div> <ul class="dropdown-menu"> </ul> <div class="dropdown-footer text-center"> <a href="#">View All</a> </div> </div> </li> <li><a href="#">Timeline</a></li> <li><a href="#">Friends</a></li> </ul> </div> </div> </nav> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//js.pusher.com/3.1/pusher.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script type="text/javascript"> var notificationsWrapper = $('.dropdown-notifications'); var notificationsToggle = notificationsWrapper.find('a[data-toggle]'); var notificationsCountElem = notificationsToggle.find('i[data-count]'); var notificationsCount = parseInt(notificationsCountElem.data('count')); var notifications = notificationsWrapper.find('ul.dropdown-menu'); if (notificationsCount <= 0) { notificationsWrapper.hide(); } // Enable pusher logging - don't include this in production // Pusher.logToConsole = true; var pusher = new Pusher('API_KEY_HERE', { encrypted: true }); // Subscribe to the channel we specified in our Laravel Event var channel = pusher.subscribe('status-liked'); // Bind a function to a Event (the full Laravel class) channel.bind('App\\Events\\StatusLiked', function(data) { var existingNotifications = notifications.html(); var avatar = Math.floor(Math.random() * (71 - 20 + 1)) + 20; var newNotificationHtml = ` <li class="notification active"> <div class="media"> <div class="media-left"> <div class="media-object"> <img src="https://api.adorable.io/avatars/71/`+avatar+`.png" class="img-circle" alt="50x50" style="width: 50px; height: 50px;"> </div> </div> <div class="media-body"> <strong class="notification-title">`+data.message+`</strong> <!--p class="notification-desc">Extra description can go here</p--> <div class="notification-meta"> <small class="timestamp">about a minute ago</small> </div> </div> </div> </li> `; notifications.html(newNotificationHtml + existingNotifications); notificationsCount += 1; notificationsCountElem.attr('data-count', notificationsCount); notificationsWrapper.find('.notif-count').text(notificationsCount); notificationsWrapper.show(); }); </script> </body> </html> Đây là rất nhiều mã để xem qua, nhưng phần quan trọng là các phần Javascript. Thư viện javascript Pusher được bao gồm, sau đó là khối javascript đẩy thông báo. Đây là những đoạn mã quan trọng trong khối javascript:
// Enable pusher logging - don't include this in production // Pusher.logToConsole = true; // Initiate the Pusher JS library var pusher = new Pusher('API_KEY_HERE', { encrypted: true }); // Subscribe to the channel we specified in our Laravel Event var channel = pusher.subscribe('status-liked'); // Bind a function to a Event (the full Laravel class) channel.bind('App\\Events\\StatusLiked', function(data) { // this is called when the event notification is received... }); Lưu ý:: Theo mặc định, Laravel sẽ phát sự kiện bằng cách sử dụng tên lớp của sự kiện. Tuy nhiên, bạn có thể tùy chỉnh tên chương trình phát sóng bằng cách xác định chương trình phát sóng dưới dạng phương thức trên sự kiện:
public function broadcastAs() { return 'event-name'; } Đoạn mã trên khởi tạo thư viện Pusher JS và đăng ký một kênh. Sau đó, nó cài đặt một cuộc gọi lại để gọi khi nhận được sự kiện đã phát trên kênh đó.
Kiểm tra cài đặt
Cuối cùng để kiểm tra cài đặt này, hãy tạo một tuyến đường gọi sự kiện theo cách thủ công. Nếu mọi thứ hoạt động như mong đợi, một thông báo mới sẽ xuất hiện khi nào đến tuyến đường. Hãy thêm tuyến đường mới:
Route::get('test', function () { event(new App\Events\StatusLiked('Someone')); return "Event has been sent!"; }); Bây giờ hãy khởi động một server PHP bằng Laravel để kiểm tra xem mã có hoạt động không:
- $ php artisan serve
Kết luận
Trong hướng dẫn này, bạn đã tận dụng sức mạnh của Pusher để tạo ra một hệ thống thông báo web hiện đại với tương đối ít mã. Chức năng này là một ví dụ nhỏ về nhiều thứ có thể được thực hiện bằng Pusher. Ví dụ này là một trong nhiều công cụ khả thi mà bạn có thể xây dựng bằng Pusher.
Mã có sẵn trên GitHub .
Các tin liên quan
Cách tạo ứng dụng chuyển văn bản thành giọng nói với API giọng nói trên web2019-12-12
Cách tạo băng chuyền image danh mục đầu tư với các thanh trượt được đồng bộ hóa trên trang web
2019-12-12
Khả năng truy cập web cho người mới bắt đầu
2019-12-12
Cách cài đặt web server OpenLiteSpeed trên Ubuntu 18.04
2019-12-02
Sử dụng Phông chữ Google trong các Trang web của bạn
2019-08-22
Cách triển khai ứng dụng web Go bằng Nginx trên Ubuntu 18.04
2019-07-24
Biến Gatsby thành PWA: Service Worker và Web App Manifest
2019-07-18
Giới thiệu về Kiểm tra trực quan cho Ứng dụng Web
2019-06-11
Cách cài đặt ứng dụng web bằng Cloudron trên Ubuntu 18.04
2019-05-29
Cách triển khai ứng dụng web Go với Docker và Nginx trên Ubuntu 18.04
2019-04-23
