Giới thiệu
Ở bài viết này chúng ta tìm hiểu các xây dựng một ứng dụng đếm số người online mà không cần phải tải lại trang. Để xây dựng ứng dụng chúng ta tử dụng Laravel và Pusher.Vậy pusher là gì?
pusher là một dịch vụ cloud, tạo ra một server trung gian giúp chúng ta có thể xử lý các tác vụ thời gian thực. Dữ liệu được gửi tới pusher, và pusher lại gửi nó đi tới các client đã subscribe (đăng ký) và các channel.
Đang xem: Cách tạo bộ Đếm số người online php Đếm số người Đang online,
Ưu và nhược điểm của pusher
Ưu điểm: Thời gian xây dựng ứng dụng ngắn để có thể tạo ra 1 ứng dụng realtime sử dụng pusher mà không cần biết quá nhiều kiến thức.Nhược điểm: Sử dụng qua sever trung gian nên tương tác sẽ chậm hơn 1 chút nhưng không đáng kể.Đối với những ứng dụng có số lượng người dùng cao hay lượng request trong ngày cao thì cần phải nâng cấp hoặc sử dụng công nghệ khác tối ưu hơn.
Cài đặt một ứng dụng mới trên Pusher
Đăng kí tài khoảng trên Pusher (link)
Tạo project laravel và cài đặt Pusher SDK, Echo
Tạo một project laravel
laravel new realtime-counter-laravel-pusher
Tiếp theo, Tiếp theo sử dụng composer để cài đặt Pusher PHP SDK
composer require pusher/pusher-php-server
Tiếp theo cài đặt npm
npm install
Tiếp theo cài đặt 2 thư viện Laravel Echo and Pusher JS
Laravel Echo là thư viện JavaScript nó dùng để đăng ký kênh và lắng nghe event events broadcast bởi Laravel. Do vậy cần phải cài Echo qua NPM package manager. Trong ví dụ này, chúng ta còn cài đặt pusher-js vì chúng ta cần sử dụng Pusher broadcaster:
npm install –save laravel-echo pusher-js
Tiếp theo run
php artisan make:auth
Cấu hình project
Đầu tiên tạo giá trị cho APP_ID, APP_KEY, APP_SECRET và 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 ở 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});
Online users
Ở ứng dụng này, Hiển thị số người online trên trang khi có bất cứ người dùng nào truy cập trang hoặc thoát khỏi trang ứng dụng đều cập nhập số người online.
Xem thêm: CáCh Sử DụNg HàM Xlookup Là Gì, Cách Sử Dụng Xlookup Và Ví Dụ
Để lắng nghe sự kiện người dùng truy cập hoặc thoát 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 dùng hiện đang truy cậpjoining: thực thi khi các người dùng khác tham gia kênhleaving: thực thi khi người dùng rời khỏi kênh
Authorization
Mỗi kênh hiện diện là một kênh riêng, trong BroadcastServiceProvider chúng ta sẽ thiết lập các quyền cho kênh. Để xác thực cho phép người dùng lắng nghe một kênh cụ thể thì trong routes/channels.php thêm đoạn code:
Broadcast::channel(“video”, function ($user) { return < "id" => $user->id, “name” => $user->name, >;});Như chúng ta thấy return không phải là true hay false. Nếu người dùng xác thực lắng nghe trên kênh thì sẽ return một mảng giá trí bao gồm id và name của user.
Tuy nhiên chúng ta có thể viết một logic khác tùy thuộc vào mỗi yêu cầu cụ thể 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;});
Vue Component
Ở trên chúng ta đã cài đặt và cấu hình, tiếp theo là hiển thị số người đang online trên page bằng vuejs
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ố người đang truy cập.
Kết luận
Trên đây là bài viết tạo một ứng dụng đếm số người online trên page. Bài viết đã giới thiệt về các khái niệm cơ bản cũng như các cài đặt cấu hình để xây dựng ứng dụng bằng laravel ở phía BE và vue ở phía FE.