Laravel thông báo thời gian thực mà không cần pusher

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 Pusher 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 nằm 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ướ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 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

composer require pusher/pusher-php-server

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ợ

Mở

composer require pusher/pusher-php-server

1 và bỏ ghi chú

composer require pusher/pusher-php-server

2

Tạ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ụng

php 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ưới

composer 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ình

Chú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ưới

composer 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

4

PROTIP. 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

5

Bâ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

6

Phần 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

Làm cách nào để gửi thông báo bằng laravel?

Làm cách nào để gửi thông báo từ quản trị viên đến người dùng trong laravel?

thông báo [] trong laravel là gì?

Laravel WebSocket có miễn phí không?