[Học Laravel] Chat Realtime – Hướng dẫn xây dựng ứng dụng tương tác với người dùng theo thời gian thực với Laravel 5.4

Trong bài viết này WebFree.Net sẽ hướng dẫn các bạn sử dụng chức năng brocasting của laravel với driver là pusher để tạo ra ứng dụng realtime.
Cài đặt

Mở cmd lên và gõ laravel new demo-chat để tải về framework laravel
Vào config/app xóa comment dòng AppProvidersBroadcastServiceProvider::class,
php artisan make:auth tạo ra đăng nhập, đăng kí của laravel .
Cmd và gõ composer require pusher/pusher-php-server cài server ảo làm trung gian xử lý các dữ liệu với thời gian thực.
Vào trang pusher tạo t

Trong bài viết này WebFree.Net sẽ hướng dẫn các bạn sử dụng chức năng brocasting của laravel với driver là pusher để tạo ra ứng dụng realtime.

Table of Contents

Cài đặt

Mở cmd lên và gõ laravel new demo-chat để tải về framework laravel
Vào config/app xóa comment dòng AppProvidersBroadcastServiceProvider::class,
php artisan make:auth tạo ra đăng nhập, đăng kí của laravel .
Cmd và gõ composer require pusher/pusher-php-server cài server ảo làm trung gian xử lý các dữ liệu với thời gian thực.
Vào trang pusher tạo tài khoản, sau đó tạo your app và lấy APP key, secret và ID điền app key trong .env
Tạo template file chat trong view, chat.blade.php :


        
         
        {{ Auth::user()->name }}
        
        
            
                alo
                
Manager
            
        
        
            
                
                    
                        
                            Send Email

Tạo ra controller php artisan make:controller MessageController –resource
Route web chúng ta sẽ gọi Route::resource(‘message”, ‘MessageController’);
Mess[email protected] chúng ta sẽ return view(‘chat’);
Sau bước này chúng ta đã hoàn thành gọi giao diện.
Tạo file chat.js để ấn nút send thì sẽ tạo request ajax lấy dữ liệu .message-content gửi [email protected]

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$(document).ready(function() {
    var boxChat = $('.box-chat');
    //Thanh scroll luôn kéo xuống dưới cùng để hiện nội dụng mới nhất
    boxChat[0].scrollTop = boxChat[0].scrollHeight;

    $('#interview-message-send').click(function(event) {
        var msgContent = $('.message-content').val();
        $.post('chat', 
            {
                msgContent: msgContent
            }, 
            function(data) {

        });
    });
});

Dữ liệu ajax sẽ gửi đến [email protected] xứ lí như sau

public function store(Request $request)
    {
    /**
      Input chat gửi lên từ ajax ở trên 
     * CandidateController constructor.
     * Ở đây mình chỉ lấy dữ liệu ko lưu vào CSDL, nếu bạn lưu vào CSDL  thì trong bảng đó có user_id, msg, room_id 
     *  sau khi lưu thì lấy được collection của đối tượng đó rồi chúng ta truyền qua $message
     */
        $messge = $request->msgContent; 
        tạo ra một sự kiện gửi đến Pusher
        event(new ChatPosted($message, Auth::user()));
    }

Đoạn trên chỉ là gửi ajax lấy dữ liệu đến Controller bình thường. Sau đó khi đã lấy được nội dung chúng ta sẽ tạo ra một event cơ chế giống như là các bạn gọi điện thoại. Chúng ta đã có nội dung bây giờ sẽ tạo ra một sự kiện php artisan make:event MessagePosted class này đóng vài trò như là chúng ta phát ra một tìn hiệu cho sever Pusher biết là vừa có một tin nhắn được gửi.

class MessagePosted implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    protected $message;
    protected $user;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message, User $user)
    {
        $this->user = $user;
        $this->message = $message;
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
    /**
     *như trên mình đã nói nếu các bạn lưu vào CSDL vào truyền từ biến message qua bên lấy chung ta có thể lấy
     * $this->message->room_id, nhưng ở đấy mình giả sử room là 1
     *Tên room ở đây sẽ là chatroom.1
     */
        return new PresenceChannel('chatroom.'. 1);
    }
}

Sau đó chúng ta vào route/channels.php

//Bradcast này giống như route 
// tên channel gióng như ở trên .{id} là tham số, id nó sẽ tự hiểu là id đã được truyền ở trên
Broadcast::channel('chatroom.{id}', function ($user, $id) {
    return $user;
});

Đến bước này chúng ta đã xong bước phát tin hiệu , lúc này tín hiệu đã đẩy lên pusher , sau đó chúng ta dùng Laravel Echo để lắng nghe sự kiện từ Pusher để in vào template chat
Các bạn vào resource/asset/js/bootraps.js, bỏ dâu ghi chú cho đoạn code này

import Echo from "laravel-echo"

```php
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'Key pusher dien vao day'
});

Trong file chat.js kia để gửi request ajax bạn cũng có thể viết tiếp đoạn js sau đây vào :

//Join vào phòng chúng ta đã đăng kí ở trên là chatroom.1
Echo.join('chatroom.' + 1)
// lắng nghe sự kiện từ Event MessagePosted, e là Object trả về những dữ liệu chúng ta đã truyền trong __contruct, $message và $user
//Vậy là chúng ta đã có tin nhắn va thông tin người gửi nhiệm vụ chúng ta bây giờ là append html vào box chat 
.listen('MessagePosted', (e) => {
    boxChat.append(e.message);
    boxChat[0].scrollTop = boxChat[0].scrollHeight;
})

Kết luận

Bài viết vừa rồi WebFree.Net đã hướng dẫn chi tiết làm một ứng dụng chat đơn giản trong Laravel. Hy vọng với bài viết này sẽ giúp ích được cho các bạn. Chúc các bạn thành công!.