Hướng Dẫn Xây Dựng Ứng Dụng Chat Thời Gian Thực Sử Dụng Laravel, VueJS, Laravel Reverb và Laravel Echo

Giới Thiệu

Chào các bạn! Mình lại quay trở lại với series hướng dẫn xây dựng ứng dụng chat thời gian thực bằng Laravel và VueJS. Trong bài viết này, thay vì sử dụng Laravel Echo Server kết hợp với Redis, chúng ta sẽ thử nghiệm với Laravel Reverb – một công nghệ mới từ Laravel. Hãy chuẩn bị sẵn sàng, chúng ta bắt đầu thôi nào!

Tổng Quan

Mục tiêu của bài viết này là xây dựng một ứng dụng chat đơn giản giống như bài viết trước: "Viết ứng dụng chat realtime với Laravel, VueJS, Redis và Socket.IO, Laravel Echo". Tuy nhiên, chúng ta sẽ chuyển đổi phần xử lý thời gian thực sang Laravel Reverb.

Cài Đặt Môi Trường

Trước tiên, bạn cần đảm bảo rằng phiên bản Laravel bạn sử dụng là phiên bản mới nhất (11) và PHP từ 8.2 trở lên. Đừng quên chuẩn bị cơ sở dữ liệu MySQL sẵn sàng.

Tạo Dự Án Mới

Bạn có thể tạo dự án mới bằng Laravel Installer với lệnh sau:

laravel new chat-app

Khi được hỏi, bạn hãy điền thông tin kết nối đến cơ sở dữ liệu trong file .env như sau:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=chat_app
DB_USERNAME=user
DB_PASSWORD=userpass

Sau khi cấu hình xong, hãy chạy lệnh sau để migrate cơ sở dữ liệu:

php artisan migrate

Cuối cùng, khởi động ứng dụng với lệnh:

php artisan serve

Truy cập vào http://localhost:8000 để xem ứng dụng chạy.

Phần Frontend Với VueJS

Bước tiếp theo là cài đặt các module front-end. Trước tiên, chúng ta cần cài đặt Laravel UI:

composer require laravel/ui

Sau đó, khởi tạo VueJS với phần xác thực:

php artisan ui vue --auth

Tiếp theo, cài đặt các thư viện phụ thuộc:

npm install

Sau khi hoàn tất, ta sẽ tạo một file layout cơ bản cho ứng dụng chat tại resources/views/chat.blade.php với nội dung thiết lập layout HTML và Vue component.

Phần Backend Với Laravel

Để xử lý việc lưu trữ tin nhắn, chúng ta cần tạo model Message với lệnh:

php artisan make:model Message -m

Hãy chỉnh sửa file migration để tạo bảng tin nhắn trong cơ sở dữ liệu. Bảng messages sẽ chứa các thông tin như: nội dung tin nhắn, ID người dùng gửi tin.

Sau khi cấu hình xong, đừng quên chạy lệnh php artisan migrate để tạo bảng trong cơ sở dữ liệu.

Xử Lý Thời Gian Thực

Để thiết lập chức năng chat thời gian thực, bạn cần bật module broadcasting trong Laravel:

php artisan install:broadcasting

Sau đó, cài đặt các package cần thiết cho front-end:

npm install --save-dev laravel-echo pusher-js

Tiếp theo, chúng ta tạo một Event mới với lệnh:

php artisan make:event MessagePosted

Hãy chỉnh sửa file event để gửi thông tin tin nhắn và người gửi đến client khác mỗi khi có tin nhắn mới được gửi.

Kết Luận

Qua bài viết này, bạn đã biết cách thiết lập một ứng dụng chat thời gian thực bằng Laravel Reverb. Với kỹ thuật này, việc phát triển ứng dụng chat trở nên đơn giản và trực quan hơn rất nhiều. Hy vọng bạn đã có một cái nhìn tổng quan và ứng dụng thành công vào dự án của mình. Cảm ơn bạn đã theo dõi và hẹn gặp lại ở các bài viết sau!

source: viblo