Xây dựng ứng dụng chat realtime bằng Laravel + Vuejs + Socket + Redis

1170

Laravel giúp dễ dàng xây dựng các ứng dụng hiện đại với các tương tác thời gian thực bằng cách cung cấp một ‘event broadcasting system’ cho phép các nhà phát triển chia sẻ cùng tên sự kiện giữa server và ứng dụng JavaScript phía client.

Trong bài này tôi sẽ chia sẻ làm như thế nào để build chat app bằng laravel, Socket.IO, Redis và Vuejs.

Có thể bạn quan tâm:

  Sử dụng index để tăng tốc câu truy vấn trong MySQL với Laravel
  Xử lí sự kiện trong VueJS

I. Cài đặt

1. Khởi tạo project

Bật Terminal lên, chúng ta khởi tạo project bằng lệnh:

hoặc:

Sau khi tạo xong, chúng ta di chuyển vào trong project vừa tạo, rồi cài Redis như sau:

2. Setup Vuejs

Vì Laravel đã tích hợp sẵn Vuejs vào project của mình nên chỉ cần chạy:

II. Thực hiện

Đầu tiên chúng ta tạo migration table messages:

Rồi chạy lệnh:

Sau khi chạy xong laravel sẽ có table messages và table users.

Để chat được, user cần phải đăng nhập vào hệ thống, ta chỉ cần chạy lệnh:

Sau đó chúng ta thêm vào router như sau:

Tiếp theo chúng ta tạo ra model, controller Message và User:

Câu lệnh trên sẽ tạo ra Model Message và MessageController

Tạo ra UserController:

Model của Message như sau:

Model của User sẽ như sau:

Trong MessageController sẽ như sau:

Sau đó chúng ta cần tạo một Event MessagePosted bằng lệnh:

Trong MessagePosted có nội dung như sau:

Và đừng quên vào config/app.js phần providers bỏ comment dòng này đi nhé

Ta cần update lại file .env

Phần backend như thế coi như xong. Tiếp theo chúng ta sẽ làm việc với Vuejs Trước tiên ta cần cài VueX và Axios vào trong project của mình:

npm install vuex –save
npm install axios –save

Chúng ta tạo ra 2 component là: ChatLayout và ChatItem trong resources/js/components.

Video: Deep learning với PyTorch và những ứng dụng

Trong file ChatLayout có nội dung như sau:

Trong ChatItem có nội dung như sau:

Chúng ta tạo folder: resources/js/store (đây là nơi t sử dụng VueX để quản lý state). Sau đó chúng ta tạo file: store.js bên trong resources/js/store có nội dung như sau:

Trong resources/js/app.js:

Đừng quên chạy npm run dev nhé

Và ở trong Welcome.blade.php ta thêm:

Ok. Bây giờ chúng ta xử lý đến Realtime Chúng ta cần cài: socket.io và laravel echo:

Sau khi cài đặt xong ta vào file resources/assets/js/bootstrap.js, kéo xuống cuối bỏ comment và sửa lại như sau:

Tiếp theo chúng ta setup laravel-echo-server nhé. Ta chạy command:

Cứ yes và bạn nhớ chọn Ređis nhé!!!

Note: các bạn mở file laravel-echo-server.json vừa được tạo , sửa lại trường authHost cho đúng với địa chỉ app chúng ta đang chạy (nếu không đến khi làm private channel sẽ lỗi nhé các bạn):

Ta mở terminal và chạy lệnh:

Mở trình duyệt và Xem thành quả nhé!!!
Chúc các bạn thành công!!!

TopDev via Viblo