Cập nhật. Kể từ tháng 7 năm 2020, Pusher đã cung cấp thông báo web trên API Beams. Tìm hiểu thêm về cách bắt đầu nhanh chóng với Beams cho Web
Khi xây dựng các ứng dụng web, không có gì lạ khi tìm thấy một số loại 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 một hành động liên quan đến bạn hoặc tài khoản 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 đó nhận xét về hồ sơ của bạn. Chúng tôi sẽ nhân rộng tính năng này bằng cách tạo một hệ thống thông báo web bằng Laravel và Pusher Channels
Những gì chúng ta sẽ xây dựng
Sau hướng dẫn này, chúng tôi sẽ trình bày cách chúng tôi có thể có một ứng dụng web nhỏ hiển thị thông báo bằng cách sử dụng Laravel và Pizer. 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 của những gì chúng tôi sẽ xây dựng
Thiết lập ứng dụng Pizer của bạn
Tạo một tài khoản Pusher, nếu bạn chưa có, sau đó thiết lập ứng dụng của bạn như trong ảnh chụp màn hình bên dưới
Thiết lập ứng dụng Laravel của bạn
Bạn có thể tạo một ứng dụng Laravel mới bằng cách chạy lệnh bên dưới trong thiết bị đầu cuối của mình
laravel new laravel-web-notifications
Sau đó, chúng ta sẽ cần cài đặt Pusher PHP SDK, bạn có thể thực hiện việc này bằng Trình soạn thảo bằng cách chạy lệnh bên dưới
composer require pusher/pusher-php-server
Khi Composer hoàn tất, chúng ta sẽ cần định cấu hình Laravel để sử dụng Pusher làm trình điều khiển quảng bá của nó, để thực hiện việc này, hãy mở tệp
composer require pusher/pusher-php-server
7 trong thư mục gốc của bản cài đặt Laravel của bạn. Cập nhật các giá trị tương ứng với cấu hình bên dướiPUSHER_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 Cụm EU hoặc AP, hãy đảm bảo cập nhật mảng tùy chọn trong cấu hình
0 của bạn vì Laravel mặc định sử dụng Máy chủ Hoa Kỳ. Bạn có thể sử dụng tất cả các tùy chọn mà Thư viện Pusher PHP hỗ trợcomposer require pusher/pusher-php-server
Mở
composer require pusher/pusher-php-server
1 và bỏ ghi chú composer require pusher/pusher-php-server
2Tạo ứng dụng Laravel và Pusher của chúng tôi
Bây giờ chúng ta đã hoàn tất cấu hình, hãy tạo ứng dụng của mình. Trước tiên, chúng tôi sẽ tạo một lớp
composer require pusher/pusher-php-server
3 sẽ phát tới Pusher từ ứng dụng Laravel của chúng tôi. Sự kiện có thể được kích hoạt từ bất cứ đâu trong ứng dụngphp artisan make:event StatusLiked
Điều này sẽ tạo một lớp
composer require pusher/pusher-php-server
4 mới trong thư mục composer require pusher/pusher-php-server
5. Mở nội dung của tệp và cập nhật như bên dướicomposer require pusher/pusher-php-server
0Ở trên, chúng tôi đã triển khai giao diện
composer require pusher/pusher-php-server
6 và điều này 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 chúng tôi đã đặt trong tệp cấu hìnhChúng tôi cũng có một hàm tạo chấp nhận hai tham số, tên người dùng và động từ. Chúng ta sẽ quay lại vấn đề này sau. Chúng tôi đã gán các biến này cho các thuộc tính lớp được đặt tên theo cùng một cách. Điều quan trọng là đặt chế độ hiển thị của các thuộc tính thành công khai;
Cuối cùng, chúng tôi đặt tên kênh để phát sóng trên
Tạo chế độ xem ứng dụng
Chúng tôi sẽ đơn giản hóa và tạo một chế độ xem duy nhất nơi bạn có thể thấy thanh điều hướng có 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 tải lại trang. Các thông báo là tạm thời trong hướng dẫn này theo thiết kế;
Mở tệp
composer require pusher/pusher-php-server
7 và thay thế nó bằng HTML bên dướicomposer require pusher/pusher-php-server
3Đây chủ yếu là rất nhiều tiếng ồn Bootstrap, vì vậy chúng tôi sẽ cô lập các phần quan trọng, chủ yếu là Javascript. Chúng tôi bao gồm thư viện javascript của Pusher và sau đó chúng tôi đã thêm khối javascript thực hiện điều kỳ diệu. Chúng ta hãy xem xét một số đoạn mã của khối javascript
composer require pusher/pusher-php-server
4PROTIP. Theo mặc định, Laravel sẽ phát sự kiện bằng tên lớp của sự kiện. Tuy nhiên, bạn có thể tùy chỉnh tên quảng bá bằng cách xác định phương thức quảng bá dưới dạng sự kiện
chức năng công cộng BroadcastAs[] {
trả về 'tên sự kiện';
}
Đoạn mã trên chỉ khởi tạo thư viện Pusher JS và đăng ký kênh. Sau đó, nó đặt một cuộc gọi lại để gọi khi nhận được sự kiện được phát trên kênh đó
Kiểm tra thiết lập của chúng tôi
Cuối cùng để kiểm tra thiết lập của chúng tôi, chúng tôi sẽ tạo một tuyến gọi sự kiện theo cách thủ công. Nếu mọi thứ hoạt động như mong đợi, chúng tôi sẽ nhận được thông báo mới bất cứ khi nào chúng tôi lên đường. Hãy thêm tuyến đường mới
composer require pusher/pusher-php-server
5Bây giờ chúng ta có thể khởi động máy chủ PHP bằng Laravel để chúng ta có thể kiểm tra mã của mình để xem nó có hoạt động không
composer require pusher/pusher-php-server
6Sự kết luận
Trong bài viết này, chúng tôi đã có thể tận dụng sức mạnh của Pusher để tạo một hệ thống thông báo web hiện đại và nó rất dễ dàng. Đây chỉ là bề nổi của những gì thực sự có thể được thực hiện bằng Pusher. Ví dụ này chỉ để cho bạn thấy những khả năng