Chào mừng các bạn quay trở lại với series viết ứng dụng chat realtime sử dụng Laravel, VueJS, Redis, Socket.IO và Laravel Echo của mình.
Ở bài trước mình đã hướng dẫn các bạn viết ứng dụng chát đơn giản, dùng public
channel trong Laravel, nhược điểm của public
channel là khi 1 user gửi tin
nhắn thì toàn bộ tất cả các user khác đều có thể nhận được. Thực tế thì ta sẽ thường muốn 1 user gửi tin nhắn đến chỉ 1 hoặc 1 số user khác.
Và để làm điều đó thì bìa hôm nay mình sẽ hướng dẫn các bạn sử dụng private
và presence
channel trong laravel để xác thực user và gửi tin nhắn đến 1 số user nhất định, thay vì toàn bộ như trước kia.
Ở bài này ta sẽ xây dựng:
- Một chatroom có 2 phòng, user có thể gửi tin nhắn khi ở trong phòng
- User ở phòng nào sẽ chỉ nhận được tin nhắn ở phòng đó [phần private channel]
- Tiếp đó ta sẽ hiển thị thông tin chi tiết từng user có trong phòng [phần presence channel]
Chuẩn bị
Điều kiện tiên quyết
Nghe tiên quyết như học sinh cấp 3
Các bạn cần phải cài đặt redis
. Gõ command redis-cli
để check nhé. Nếu thấy báo lỗi không có thì search google cách cài với từng nền tảng Win, Mac, Linux nhé
Rất nhiều bạn thiếu bước này đó
Thiết lập project
Ở bài này để tiết kiệm thời gian, mình đã tạo sẵn một project mẫu cho các bạn rồi nhé.
Các bạn clone source code ở repo này [nhánh starter-tutorial nhé các bạn]
Sau khi clone các bạn chạy lần lượt command sau để setup project:
git checkout starter-tutorial
composer install
npm install
cp .env.example .env
php artisan key:generate
Sau đó các bạn setup lại thông số database ở file .env
cho phù hợp với máy của các bạn nhé.
Tiếp theo ta migrate và seed dữ liệu nhé:
php artisan migrate --seed
Cuối cùng chạy app để test thử coi xem sao nhé
php artisan serve
npm run watch
Tổng quan project
Mình sẽ giải thích một lượt về project để các bạn nếu muốn chỉnh sửa có thể làm dễ dàng nhé.
Các mục cần quan tâm:
Nói chung project ở bước này khá đơn giản, chỉ là dạng CRUD, chưa có realtime. Các bạn có thể chọn 1 chatroom, nhập 1 dòng tin nhắn và bấm gửi, mở tab trình duyệt khác sẽ không thấy realtime mà phải load lại trình duyệt.
Bắt đầu vào phần realtime thôi nào
Realtime với Private Channel
Ở bài này ta dùng redis
nên đầu tiên ta cần cài driver cho redis trong laravel nhé. Các bạn chạy command sau:
composer require predis/predis
Tiếp đó vào file .env
sửa lai phần BROADCAST như sau:
BROADCAST_DRIVER=redis
CACHE_DRIVER=redis
QUEUE_CONNECTION=redis
SESSION_DRIVER=redis
SESSION_LIFETIME=120
Tiếp đến mở file config/database.php
tìm mục redis
và sửa lại 1 chút ở client
và options
như sau:
'client' => env['REDIS_CLIENT', 'predis'],
'options' => [
'cluster' => env['REDIS_CLUSTER', 'redis'],
// comment dòng bên dưới
//'prefix' => env['REDIS_PREFIX', Str::slug[env['APP_NAME', 'laravel'], '_'].'_database_'],
],
Tiếp đó mở file config/app.php
, tìm mục providers
bỏ comment dòng
sau nhé:
App\Providers\BroadcastServiceProvider::class
Xong cho phần backend Laravel. Tiếp đến ta cần cài 1 số thư viện cho frontend nhé:
npm install --save laravel-echo
Sau đó các bạn mở file resources/app.blade.php
thêm vào 1 dòng như sau:
window.__app__ = @json[$data]
--------Thêm vào dòng bên dưới
....
Note quan trọng: lí do ta thêm vào đoạn
đó là thay vì chạy
npm install socket.io-client
thì ta dùng luôn cái socket io client mà phía laravel echo server có sẵn, bởi vì hiện tại ở phiên bản mới của laravel echo server nó lại đang dùng phiên bản cũ củasocket.io-client
dẫn tới việc nếu các bạn chạynpm install socket.io-client
sau đó dùng kiểuwindow.io = require['socket.io-client']
thì sẽ ko thấy realtime bởi vì ta có 2 phiên bản khác nhau củasocket.io-client
và chúng conflict lẫn nhau
Tiếp đó ta mở file resources/js/bootstrap.js
, kéo xuống dưới sửa phần cấu hình Laravel Echo như sau:
import Echo from 'laravel-echo'
window.Echo = new Echo[{
broadcaster: 'socket.io',
host: `${window.location.protocol}//${window.location.hostname}:6001`
}]
Tiếp theo ta cần cài đặt Laravel Echo Server nhé:
npm install -g laravel-echo-server
Sau đó ta setup laravel echo server
luôn. Các bạn chạy command:
laravel-echo-server init
Khi được hỏi thì chọn các options như sau nhé [chú ý dòng Laravel authentication server
phải nhập vào //localhost:8000
nhé]:
Mọi thứ setup trông ổn rồi đó
Ý tưởng làm realtime ở bài này như sau: khi 1 user join vào 1 chatroom, gửi đi 1 tin nhắn, khi tin nhắn được lưu thành công sẽ thông báo [broadcast] với các user chỉ ở trong chatroom đó, ta dùng Event trong Laravel để broadcast nhé.
Ta tạo event MessagePosted
[event này sẽ được gọi mỗi khi có tin nhắn được lưu thành công]:
php artisan make:event MessagePosted
Sau đó ta mở file app/Events/MessagePosted
và sửa lại như sau: