Realtime dùng react native và rails action cable

Rails 5 đã giới thiệu nhiều tính năng mới, nhưng một trong những tính năng được mong đợi nhất là ActionCable. ActionCable tích hợp WebSockets vào ứng dụng và cung cấp cả hai phía client-side JS và server-side Rails. Dưới đây mình sẽ giới thiệu cách kết nối giữa server-side sử dụng Rails và client side sử dụng react-native.

Phía Server (Rails)

1. Thêm real-time route vào config/routes.rb

mount ActionCable.server => '/cable'

1. Tạo actioncable channel (vd: message channel)

rails generate channel Messages

messages_channel.rb sẽ được generate ra trong thư mục channel

1. config streaming

class MessagesChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    stream_from 'message_channel'
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

Muốn sử dụng chỉ cần gọi

ActionCable.server.broadcast "message_channel",  message: "Hello"

Các client đang stream từ message_channel sẽ nhận được data gửi từ phía server

Phía client (React native)

• Install

npm install --save react-native-actioncable

• Sử dụng

import ActionCable from 'react-native-actioncable'

const cable = ActionCable.createConsumer('ws://localhost:3000/cable')

// ... Other code
cable.subscriptions.create('MessageChannel', {
    connected: function() {
  },
    disconnected: function() {
  },
    received: function(data) {
  }
})