Ở nội dung bài viết này họ tìm hiểu những xây dựng một vận dụng đếm số tín đồ online mà không cần thiết phải tải lại trang. Để xuất bản ứng dụng chúng ta tử dụng Laravel và Pusher.Vậy pusher là gì?
pusher là một trong dịch vụ cloud, tạo ra một vps trung gian giúp chúng ta có thể xử lý những tác vụ thời gian thực. Tài liệu được thân tặng pusher, với pusher lại nhờ cất hộ nó đi tới các client vẫn subscribe (đăng ký) và những channel.
Bạn đang xem: Cách tạo bộ Đếm số người online php Đếm số người Đang online,
Đăng kí tài khoảng chừng trên Pusher (link)
Tạo một project laravel
laravel new realtime-counter-laravel-pusher
Tiếp theo, tiếp sau sử dụng composer để thiết đặt Pusher PHP SDK
composer require pusher/pusher-php-server
Tiếp theo thiết đặt npm
npm install
Tiếp theo cài đặt 2 thư viện Laravel Echo and Pusher JS
Laravel Echo là tủ sách JavaScript nó dùng làm đăng ký kết kênh với lắng nghe sự kiện events broadcast vì Laravel. Bởi vì vậy rất cần được cài Echo qua NPM package manager. Trong ví dụ như này, bọn họ còn cài đặt pusher-js vì bọn họ cần sử dụng Pusher broadcaster:
npm install --save laravel-echo pusher-js
Tiếp theo run
php artisan make:auth
Đầu tiên chế tạo giá trị cho APP_ID, APP_KEY, APP_SECRET cùng APP_CLUSTER trong file .env
# .envBROADCAST_DRIVER=pusherPUSHER_APP_ID=your-pusher-app-idPUSHER_APP_KEY=your-pusher-app-keyPUSHER_APP_SECRET=your-pusher-app-secretPUSHER_APP_CLUSTER=your-pusher-app-clusterTiếp theo sống cuối fileresources/assets/js/bootstrap.js thêm đoạn code:
import Echo from "laravel-echo"window.Echo = new Echo( broadcaster: "pusher", key: "your-pusher-app-key", cluster: "ap2", encrypted: true);
Xem thêm: CáCh Sử DụNg HàM Xlookup Là Gì, Cách Sử Dụng Xlookup Và Ví Dụ
Để lắng tai sự kiện người tiêu dùng truy cập hoặc ra khỏi trang thì cần sử dụng hàm listen
listen() Echo.join("counter") .here(users => this.count = users.length) .joining(user => this.count++) .leaving(user => this.count--);Join : khi người dùng truy cậphere : cung cấp một danh sách người tiêu dùng hiện vẫn truy cậpjoining: thực thi khi các người tiêu dùng khác gia nhập kênhleaving: thực thi khi người tiêu dùng rời ngoài kênh
Broadcast::channel("video", function ($user) return < "id" => $user->id, "name" => $user->name, >;);Như họ thấy return chưa hẳn là true tuyệt false. Nếu người dùng xác thực lắng nghe trên kênh thì đã return một mảng giá trí bao hàm id và name của user.
Tuy nhiên bạn cũng có thể viết một logic khác tùy nằm trong vào từng yêu cầu rõ ràng của từng ứng dụng chẳng hạn như:
Broadcast::auth("video", function ($user) if ($user) return < "id" => $user->id, "name" => $user->name >; return false;);
template> div class="container"> div class="row"> div class="col-md-8 col-md-offset-2"> div class="panel panel-default"> div class="panel-heading">Realtime Counter/div> div class="panel-body"> p. Class="lead text-center">Online Now/p> h1 class="text-center"> this.count /h1> /div> /div> /div> /div> /div>/template>script> export default data() return count: 0 , mounted() this.listen(); , methods: listen() Echo.join("counter") .here(users => this.count = users.length) .joining(user => this.count++) .leaving(user => this.count--); /script> Dưới đây là minh họa số bạn đang truy vấn cập.
Trên phía trên là nội dung bài viết tạo một ứng dụng đếm số bạn online trên page. Nội dung bài viết đã giới thiệt về các khái niệm cơ phiên bản cũng như các thiết lập cấu hình nhằm xây dựng vận dụng bằng laravel sống phía BE cùng vue sinh hoạt phía FE.