Xin chào các bạn, tuần này mình sẽ viết một bài về phong thái xử lý Real Time(thời kì thực) với Laravel và Pusher, sau bài này các chúng ta có thể hiểu được cái base cơ bản và sau đó phát triển tiếp lên như thể viết chức năng phản hồi hay là chức năng chat real time…..v..v.

Những nội dung có trong bài này:

Bạn Đang Xem: Laravel & Pusher: Tạo một ứng dụng web thời gian thực

• Giới thiệu về Pusher và Laravel
• Cấu hình Laravel kết nối với Pusher
  • Tạo một App trên Pusher
  • Tùy chỉnh thiết lập Laravel, config tới Pusher App vừa tạo.
• Viết code xử lý real time
  • Code Events
  • Code Route & Controller
  • Code View

1 – Giới thiệu về Pusher và Laravel

Về Laravel thì mình sẽ không còn nói nhiều trong bài này, vì nó là một Framework lập trình web khá nổi tiếng, bạn nào không biết thì có thể xem qua bài này:

Tổng Quan Về Laravel Một Framework Khá Mạnh Mẽ

Còn về Pusher, có thể nói rằng nó là một dịch vụ bên thứ 3 mà cung cấp cho tất cả những người dùng một server ảo làm trung gian để xử lý các tài liệu được yêu cầu trong thời kì thực.

Pusher xử lý thời kì thực thông qua cơ chế tương trợ giao tiếp 2 chiều WebSockets tới ứng dụng web, điện thoại cảm ứng di động hoặc bất kỳ thiết bị kết nối Internet nào khác. Xem thêm tại đây: https://pusher.com/docs

2 – Cấu hình Laravel kết nối đến Pusher

Việc trước tiên tất cả chúng ta cần là đăng ký một tài khoản trên Pusher, cái này nhanh thôi, đăng ký bằng G+ hay Github đều được cả.

– Sau khoản thời gian đăng ký, các bạn tạo một ứng dụng mới, lưu ý mình ở Việt Nam thì chọn location ap1(Singapore) để sở hữu tốc độ truy cập nhanh nhất nhé.

– Tạo xong app, bạn tích sang tab App Keys và để ý mấy thông tin app_id, key, secret, cluster, lát nữa tất cả chúng ta sẽ dùng những thông số này để cấu hình trong project Laravel.

Bước tiếp theo ta cần là tạo project Laravel và cấu hình với App vừa tạo. Làm tuần tự các bước tại đây:

– Tạo một project Laravel mới thông qua Composer, phiên bản ngày nay mình sử dụng là Laravel 5.4:composer create-project -prefer-dist laravel/laravel demo-real-time-app

– Tùy chỉnh thiết lập gói thư viện Pusher PHP:composer require pusher/pusher-php-server

– Tùy chỉnh thiết lập Javascript dependencies:npm install

– Tùy chỉnh thiết lập 2 thư viện javascript cấp thiết cho việc xử lý sự kiện thời kì thực đó là Laravel Echo và Pusher JS:npm install -save laravel-echo pusher-js

– Mở file .env trong project Laravel, kéo xuống cuối cùng, tất cả chúng ta dùng những thông tin trong App Keys ở trên để cấu hình trong này:

PUSHER_APP_ID=YOUR_APP_ID PUSHER_APP_KEY=YOUR_APP_KEY PUSHER_APP_SECRET=YOUR_APP_SECRET

– Và cũng trong file .env sửa dòng BROADCAST_DRIVER=log thành BROADCAST_DRIVER=pusher

Xem Thêm : Hồng phiến là gì? Tác hại của việc chơi hồng phiến

BROADCAST_DRIVER=pusher

– Tiếp tục mở file config/app.php, tìm về dòng AppProvidersBroadcastServiceProvider::class, dòng này thuở đầu đang rất được comment lại, tất cả chúng ta bỏ comment nó đi để sở hữu thể thao tác được với Broadcast. – Sau đó kéo xuống dưới và thêm dòng sau vào thời điểm cuối mảng aliases:

‘Pusher’ => PusherPusher::class,

– Mở file config/broadcasting.php, thêm 2 dòng tại đây vào option array trong mục cấu hình pusher để xác định location và mã hóa tài liệu trên phố truyền:

‘cluster’ => ‘ap1’, ‘encrypted’ => true

– Bước cấu hình cuối cùng, bạn mở file bootstrap.js trong thư mục resources/assets/js/, kéo xuống dưới cùng và bỏ comment đoạn code tại đây, song song điền pusher-app-key của bạn vào:

3 – Viết code xử lý real time

– Code Sự kiện:

Trước hết, tất cả chúng ta cần tạo một sự kiện mới, mình ví dụ tạo một sự kiện mang tên là DemoPusherEvent:

php artisan make:sự kiện DemoPusherEvent

Khi đó, một file DemoPusherEvent.php được tạo trong thư mục app/Events, mình sẽ viết code cho nó như sau:

<?php namespace AppEvents; use IlluminateBroadcastingChannel; use IlluminateQueueSerializesModels; use IlluminateBroadcastingPrivateChannel; use IlluminateBroadcastingPresenceChannel; use IlluminateFoundationEventsDispatchable; use IlluminateBroadcastingInteractsWithSockets; use IlluminateContractsBroadcastingShouldBroadcast; class DemoPusherEvent implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; /** * Create a new sự kiện instance. * * @return void */ public $message; public function __construct($message) { $this->message = $message; } /** * Get the channels the sự kiện should broadcast on. * * @return Channel|array */ public function broadcastOn() { return new Channel(‘channel-demo-real-time’); } }

Lưu ý là tất cả chúng ta phải implements ShouldBroadcast để sở hữu thể sử dụng được Sự kiện Broadcasting và trong function broadcastOn() ta sử dụng Chanel thay vì PrivateChanel.

Khi sự kiện DemoPusherEvent ở trên được chạy, một message trong hàm khởi tạo __construct của tất cả chúng ta sẽ tiến hành truyền lên server Pusher thông qua một kênh chung mang tên là chanel-demo-real-time, chúng ta có thể đặt tên cho kênh này tùy ý.

– Code Route & Controller

Bạn vào file routes/web.php và thêm 2 route này vào:

<?php // gọi ra trang view demo-pusher.blade.php Route::get(‘demo-pusher’,’FrontEndController@getPusher’); // Truyển message lên server Pusher Route::get(‘fire-event’,’FrontEndController@fireEvent’);

Tạo file controller FrontEndController.php:

Xem Thêm : Confetti là gì? Cách chơi Confetti và tạo tài khoản Paypal chơi Confetti?

php artisan make:controller FrontEndController

Nội dung file FrontEndController.php như sau:

<?php namespace AppHttpControllers; use IlluminateHttpRequest; use AppEventsDemoPusherEvent; class FrontEndController extends Controller { public function getPusher(){ // gọi ra trang view demo-pusher.blade.php return view(“demo-pusher”); } public function fireEvent(){ // Truyền message lên server Pusher sự kiện(new DemoPusherEvent(“Hi, I’m Trung Quân. Thanks for reading my article!”)); return “Message has been sent.”; } }

– Code View

Sau khoản thời gian đã có route và controller, mình sẽ tạo một file demo-pusher.blade.php trong thư mục resources/views/ để hiển thị nội dung của message trong thời kì thực.

<!DOCTYPE htmlvàgt; <htmlvàgt; <headvàgt; <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <titlevàgt;Demo Pusher – Trung Quânvàlt;/titlevàgt; <link rel=”shortcut icon” href=”{{ asset(‘images/favicon/logo-trungquandev.png’) }}” /> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> <style type=”text/css” quảng cáo truyền thông=”screen”> #messages{ color: #1abc9c; } #messages li{ max-width: 50%; margin-bottom:10px; border-color: #34495e; } </stylevàgt; </headvàgt; <bodyvàgt; <div class=”container”> <div class=”content”> <h1vàgt;Laravel & Pusher: Demo real-time web application.</h1vàgt; <smallvàgt; Author: <a href=”https://trungquandev.com/” target=”__blank”>https://trungquandev.com/</avàgt; </smallvàgt;<brvàgt;<brvàgt; <pvàgt;Message preview:</pvàgt; <ul id=”messages” class=”list-group”></ulvàgt; </divvàgt; </divvàgt; <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></scriptvàgt; <script src=”https://js.pusher.com/4.1/pusher.min.js”></scriptvàgt; <scriptvàgt; $(document).ready(function(){ // Khởi tạo một đối tượng người dùng Pusher với app_key var pusher = new Pusher(‘YOUR_PUSHER_APP_KEY’, { cluster: ‘ap1’, encrypted: true }); //Đăng ký với kênh chanel-demo-real-time mà ta đã tạo trong file DemoPusherEvent.php var channel = pusher.subscribe(‘channel-demo-real-time’); //Bind một function addMesagePusher với sự kiện DemoPusherEvent channel.bind(‘AppEventsDemoPusherEvent’, addMessageDemo); }); //function add message function addMessageDemo(data) { var liTag = $(“<li class=’list-group-item’></livàgt;”); liTag.html(data.message); $(‘#messages’).append(liTag); } </scriptvàgt; </bodyvàgt; </htmlvàgt;

Mấu chốt của việc hiển thị tài liệu thời kì thực ra view là đoạn javascript ở trên.

Trước hết ta khởi tạo một đối tượng người dùng pusher với app_key, rồi đăng ký đối tượng người dùng pusher đó với kênh mà ta đã tạo trong DemoPusherEvent.

Cuối cùng là bind (đính kèm xử lý sự kiện DemoPusherEvent với function addMessageDemo, function này sẽ lấy nội dung message từ server Pusher và hiển thị ra trình duyệt tùy Theo phong cách bạn khái niệm.

Vậy là đã xong rồi đó, lúc bấy giờ bạn hãy ra trình duyệt chạy route demo-pusher sẽ thấy như sau:

Ngày nay ở Message preview chưa tồn tại gì, bạn tiếp tục chạy route fire-event ở một trình duyệt khác hoặc bật trình duyệt ẩn danh lên rồi chạy.

Xong, trở lại tab demo-pusher vừa nãy các bạn sẽ thấy nội dung message đã xuất hiện mà không nhất thiết phải load lại trang.

Bạn cũng đều có thể xem nội dung message trên server Pusher, tại app của bạn, click sang tab Debug Console:

Như vậy tôi đã demo xong một ví dụ đơn giản, từ ví dụ này, các chúng ta có thể tự phát triển vào project của mình những ý tưởng khác nhau, như thể chức năng phản hồi thời kì thực, chat real time…vv..

Cảm ơn các bạn đã xem nội dung bài viết của mình !!!

Best Regards – Trung Quân – Green Cat