Cách Tạo Bộ Đếm Số Người Online Php Đếm Số Người Đang Online,

Home cách tạo bộ Đếm số người online php Đếm số người Đang online,

Giới thiệu

Ở 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,

*

Ưu cùng nhược điểm của pusher

Ưu điểm: thời gian xây dựng vận dụng ngắn để hoàn toàn có thể tạo ra 1 ứng dụng realtime sử dụng pusher mà lại không cần biết quá nhiều kiến thức.Nhược điểm: áp dụng qua máy chủ trung gian nên tác động sẽ chậm hơn 1 chút cơ mà không xứng đáng kể.Đối cùng với những áp dụng có số lượng người tiêu dùng cao giỏi lượng request trong ngày cao thì cần phải tăng cấp hoặc sử dụng technology khác tối ưu hơn.

Cài để một ứng dụng mới trên Pusher

Đăng kí tài khoảng chừng trên Pusher (link)

*

Tạo project laravel và thiết đặt Pusher SDK, Echo

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

Cấu hình project

Đầ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);

Online users

Ở áp dụng này, Hiển thị số bạn online trên trang lúc có bất kể người cần sử dụng nào truy vấn trang hoặc ra khỏi trang vận dụng đều cập nhập số tín đồ 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 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

Authorization

Mỗi kênh hiện nay diện là 1 trong những kênh riêng, vào BroadcastServiceProvider họ sẽ thiết lập cấu hình các quyền mang đến kênh. Để xác thực chất nhận được người cần sử 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ư 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;);

Vue Component

Ở trên chúng ta đã thiết đặt và cấu hình, tiếp theo sau là hiển thị số fan đang online trên page bởi 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ố bạn đang truy vấn cập.

*

Kết luận

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.

Bài viết xem nhiều