Hướng dẫn dùng channel channel trong PHP
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. Show Ở 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 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 Ở bài này ta sẽ xây dựng:
Chuẩn bịĐiều kiện tiên quyết
Các bạn cần phải cài đặt 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:
Sau đó các bạn setup lại thông số database ở file Tiếp theo ta migrate và seed dữ liệu nhé:
Cuối cùng chạy app để test thử coi xem sao nhé , các bạn chạy các command sau:
Các bạn thử đăng kí tài khoản mới sau đó login nếu thấy màn hình như sau là oke rồi đó. Thử click vào 1 chatroom coi xem sao nhé .Tổng quan projectMì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
Tiếp đó vào file
Tiếp đến mở file
Tiếp đó mở file
Xong cho phần backend Laravel. Tiếp đến ta cần cài 1 số thư viện cho frontend nhé:
Sau đó các bạn mở file
Tiếp đó ta mở file
Tiếp theo ta cần cài đặt Laravel Echo Server nhé:
Sau đó ta setup
Khi được hỏi thì chọn các options như sau nhé (chú ý dòng Mọi thứ setup trông ổn rồi đó (phù, dài quá setup chán chê mới xong , cố lên sắp đến thiên thai rồi nha các bạn ).Ý 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
Sau đó ta mở file
Giải
thích chút nhé: ở event này ta nhận vào 1 tham số là Tiếp theo, vì là bây giờ ta dùng Private Channel, nên ta phải login trước thì lát nữa mới có thể lắng nghe sự kiện nhé. Đồng thời, khi login xong user có tuỳ quyền chọn vào 1 trong các chatroom định sẵn do đó ở file
Setup phần broadcast ổn rồi đó. Giờ ta quay lại file
Ổn rồi đó, giờ ta qua frontend để lắng nghe sự kiện bắt tin nhắn mới nhé Các bạn mở file
Giải thích chút nhé:
Tiêp theo đó vẫn ở
Ô kê đến giờ test rồi. Các bạn tắt hết các cửa sổ terminal đang chạy, clear config bằng command
Ta
login lại, chọn một chatroom và check xem ở terminal nơi chạy Sau đó ta lại mở 1 tab khác, login và join vào cùng room và gửi tin nhắn qua lại và xem thành quả nhé .Note: mỗi khi gửi tin nhắn thì các bạn check lại 2 terminal chạy Tiếp theo các bạn thử cho mỗi user join vào 1 phòng và lại thử nhắn tin tiếp, ta để ý là user ở phòng nào thì chỉ nhận được tin nhắn realtime từ phòng đó nhé . Tuyệt vờiGiờ vấn đề tiếp theo là làm cách nào để lấy được thông tin chi tiết từng user trong phòng và hiển thị. Cùng đi tiếp tới phần sau nhé các bạn Lấy thông tin user dùng Presence Channel
Thế có bạn sẽ hỏi: thế vậy tôi cần cái Đúng mình cũng có câu hỏi như vậy và hiện tại chưa tìm được 1 câu trả lời chính thống cụ thể nào. Nhưng mình đã sớm nhận ra là Thôi tiếp tục phần này nào .Ở file
Tiếp theo ta quay lại file
Sau đó ta quay lại file
Tiếp đó vẫn ở
Sau đó ta khởi động lại app 1 lần nữa, tắt toàn bộ các cửa sổ terminal, và chạy lại như sau:
Sau đó các bạn load lại trang, và BÙM, ta có kết quả như sau: Ở terminal Các bạn thử cho user thoát hoặc thêm user mới vào phòng để thấy thành quả nhé Bài tập về nhà
Giờ đây ta có thông tin của toàn bộ user trong phòng rồi. Các bạn thử tự mình làm thêm 1 chức năng nhắn tin riêng 1-1 với 1 user nào đó trong phòng. Ví dụ: bấm click chọn một user trong danh sách user thì xuất hiện của sổ chat riêng với user đó (giống Facebook chẳng hạn), dùng Private hoặc Presence Channel chẳng hạn, nhưng theo mình chat 2 người dùng Private channel là đủ, nhanh hơn Presence channel. Đồng thời ta thêm các sự kiện nhỏ nhỏ kiểu: "user này đang gõ", "đã xem lúc mấy giờ", báo tin nhắn đến. Để làm được những điều này các bạn cần đọc thêm chút phần sự kiện DemoCác bạn có thể xem demo của mình ở đây nhé Nếu bạn gặp lỗiTrong khi code nếu có khi nào bạn gặp lỗi thì xem lại bài đầu tiên trong series này của mình phần debug mình đã ghi rấttttttt là tâm huyết rồi các bạn à 😘😘😘 Kết bàiQua bài này hi vọng các bạn đã hiểu hơn được cách sử dụng Private và Presence Channel trong laravel để xử lý realtime data. Thường ở các dự án thật thì mình dùng 2 loại channel này chứ không dùng Public channel như bài trước , nhưng vì public channel khá dễ cấu hình, không cần xác thực nên mình giới thiệu với các bạn trước để các bạn làm quen với cách làm realtime trong Laravel. Có rất nhiều bạn đã hỏi mình về các sử dụng Private/Presence channel, và các lỗi mà các bạn gặp phải, mong rằng qua bài này các bạn hiểu thêm về cách sử dụng chúng Source code khi làm đến phần cuối cùng của bài này ở đây nhé các bạn (nhánh complete-tutorial) Trong bài nếu có gì thắc mắc các bạn cứ để lại commen cho mình nhé. Hẹn gặp các bạn ở các bài sau ^^ |