TODO từ React + Rails Phần 8: Thời gian thực với Action Cable

Tram Ho

Trong những bài trước mình đã làm xong TODO App với chức năng cơ bản nhất như Add, Update, Delete, Done, … Hôm này mình sẽ implement thêm chức năng realtime cho những thao tác đó.
Như các bạn đã biết từ Rails 5 trở lên thì đã có hỗ trợ sẵn action cable để làm realtime cho project Rails của mình.

Implement phía Server

Đầu tiên, generate channel:

Nó sẽ tạo những files sau đây:

Trong file app/channels/tasks_channel.rb

Ở đây mình sẽ subscribed vào channel có tên là tasks_channel. Những data broadcast đến channel này sẽ nhận được.

Tiêp theo ở trong controller mình sẽ broadcast đến channel tasks_channel với data cần thiết như sau:

Mỗi action đều có type dùng để bên client biết được là data received là từ những action nào.

Implement phía

Actioncable không chỉ support cho bên server, nó cũng có support cho Reactjs.

Phía Client, chúng ta sẽ cần 3 bước chính như sau:

  • Kết nối đến ‘/cable’
  • Subscribe tới channel ‘tasks_channel’
  • Lắng nghe để nhận data

Trong file src/TodoList.js, trong componentDidMount modify code như sau:

Đến đây là đã xong. =))

Kết quả:

Để hiểu chi tiết về actioncable, bạn hãy vào document của nó xem nhé.

https://guides.rubyonrails.org/action_cable_overview.html

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo