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) {
      }
    })
    

    Nguồn: Viblo



Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.