Hướng Dẫn Cách sử dụng Laravel với Socket.IO

[nghiep2606]

Websockets là một công nghệ tuyệt vời. Chúng thực sự hữu ích nếu ae muốn hiển thị các hoạt động theo thời gian thực từ người dùng. Bây giờ, nếu ae sợ từ "Websockets", thì khỏi florentino đi vì mình sẽ đưa ra chỉ ae cách sử dụng Laravel với Socket.IO (ở mức căn bản thui nhé)

Tại sao không dùng Pusher?

Trả lời cho câu hỏi: "Tại sao không dùng Pusher?" thì mặc dù Pusher có vẻ như là một giải pháp "Plug and play" nhanh chóng, nhưng nó đi kèm với những hạn chế như giá cả. Và hầu hết các hướng dẫn đều kiểu trick ae với mấy cái tít giống như "làm Websockets" trong khi thực tế họ chỉ muốn bán Pusher cho ae (mà cái đoạn hài nhất là cái đoạn bọn đó nói là có thể dễ dàng switch and swap)

Ok, không dài dòng nữa đi luôn vào chủ đề chính:

1. Mình sẽ sử dụng vagrant/homstead cho Laravel.
2. Mọi thao tác thực hiện trong Laravel. (rõ ràng)

Mình có một số lưu ý với định nghĩa xuyên suốt cái thớt này:

1. ShouldBroadcast Interface cho Events
2. Thiết lập Broadcast routes và sử dụng routes/channels.php để xác thực người dùng
3. Public Channel - Mọi người đều có thể listen
4. Private Channel - Ae cần ủy quyền cho người dùng trước khi họ có thể tham gia channel
5. Presence Channel - Giống như Private Channel nhưng ae có thể chuyển rất nhiều meta data bổ sung trên channel đó và lấy danh sách những người đã tham gia channel.broadcastOn() Event method

Rồi bắt đầu:
1. Create Event
Sử dụng CLI của laravel để tự động tạo 1 event MessagePushed
php artisan make:event MessagePushed
Ae thậm chí có thể làm theo ví dụ cụ thể trong Event Broadcasting của Laravel document
2. Cài đặt Redis
Trước giờ mình quen thiết lập queues với Supervisor/Redis/Horizon. Nói qua thì Horizon khá là ok, ae có thể tìm hiểu thêm
Ae cần phải có queues working để MessagePushed event có thể hoạt động được
Lưu ý: Thiết lập các config cho Redis trong file .env:
BROADCAST_DRIVER = redis
QUEUE_DRIVER = redis
REDIS_HOST = 127.0.0.1
REDIS_PASSWORD = null
REDIS_PORT = 6379
3. Cài đặt Laravel Echo Server
Laravel Echo Server là một thư viện giúp chúng ta cài đặt server. Chi tiết ae có thể tự tìm đọc thêm.
Tiếp theo chạy command sau để cài laravel-echo-server:
npm install -g laravel-echo-server
Và sau đó chạy init để tự động tạo file config 'laravel-echo-server.json'
laravel-echo-server init
Khi ae đã tạo ra tệp laravel-echo-server.json của mình, nó sẽ trông như thế này.
{
"authHost": "http://local-website.app",
"authEndpoint": "/broadcasting/auth",
"clients": [
{
"appId": "my-app-id",
"key": "my-key-generated-with-init-command"
}
],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
},
"port": "6379",
"host": "127.0.0.1"
},
"devMode": false,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": ""
}

khởi động Laravel Echo Server ta cần chạy command
laravel-echo-server start
Chúng ta cần config supervisor để server có thể tự động restart bằng cách tạo file config laravel-echo.conf trong thư mục /etc/supervisor/conf.d/ với nội dung:
[program:laravel-echo]
directory=/var/www/my-website-folder
process_name=%(program_name)s_%(process_num)02d
command=laravel-echo-server start
autostart=true
autorestart=true
user=your-linux-user
numprocs=1
redirect_stderr=true
stdout_logfile=/var/www/my-website-folder/storage/logs/echo.log

Tiếp theo chúng ta cần chạy các lệnh sau để các config được áp dụng:
sudo supervisorctl stop all
sudo supervisorctl reread
sudo supervisorctl reload

Sau đó kiểm tra lại để chắc chắn Laravel Echo Server đã chạy:
sudo supervisorctl status
4. Cài đặt sử dụng Laravel Echo và Socket IO client
npm install --save laravel-echo
npm install --save socket.io-client
Và sau đó trong bootstrap.js (mình đang sử dụng Vue js) đăng ký Echo của ae
import Echo from "laravel-echo"
window.io = require('socket.io-client');
// Have this in case you stop running your laravel echo server
if (typeof io !== 'undefined') {
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001',
});
}
Bây giờ chúng ta kiểm tra lại việc listen event trong channels
Ví dụ:
> Push một event trên Presence Channel

public function broadcastOn()
{
return new PresenceChannel('survey.' . $this->survey->id);
}

> Sau khi push event nó sẽ đi qua channels.php và trong đó chúng tôi muốn tạo ủy quyền cho người dùng này (nhớ trả về một mảng cho Presence channel authorization)

Broadcast::channel('survey.{survey_id}', function ($user, $survey_id) {
return [
'id' => $user->id,
'image' => $user->image(),
'full_name' => $user->full_name
];
});

> Sau đó trong VueJs component tôi xác định một phương thức sẽ được khởi tạo từ phương thức created() khi load:

listenForBroadcast(survey_id) {
Echo.join('survey.' + survey_id)
.here((users) => {
this.users_viewing = users;
this.$forceUpdate();
})
.joining((user) => {
if (this.checkIfUserAlreadyViewingSurvey(user)) {
this.users_viewing.push(user);
this.$forceUpdate();
}
})
.leaving((user) => {
this.removeViewingUser(user);
this.$forceUpdate();
});
},

Đó là tất cả những gì mình biết, nếu ae có góp ý hay thắc mắc gì cứ thoải mái cmt. Mình thảo luận để cùng đi lên. Cảm ơn ae