action-cable-react-jwt

Same as action-cable-react, but allows authenticating websockets using JWTs

Forked for humtum platform

Installation

Yarn:

1yarn add humtum-action-cable-react-jwt
2

npm:

1npm install humtum-action-cable-react-jwt
2

Usage

Import action-cable-react-jwt

1import ActionCable from 'action-cable-react-jwt.js';
2
3// if you don't use ES6 then use
4// const ActionCable = require('action-cable-react-jwt.js');
5

Creating an actioncable websocket

1let App = {};
2App.cable = ActionCable.createConsumer("ws://cable.example.com", jwt) // place your jwt here
3
4// you shall also use this.cable = ActionCable.createConsumer(...)
5// to create the connection as soon as the view loads, place this in componentDidMount

Subscribing to a Channel for Receiving data

1this.subscription = App.cable.subscriptions.create({channel: "YourChannel"}, {
2      connected: function() { console.log("cable: connected") },             // onConnect
3      disconnected: function() { console.log("cable: disconnected") },       // onDisconnect
4      received: (data) => { console.log("cable received: ", data); }         // OnReceive
5}
6

Send data to a channel

1this.subscription.send('hello world')
2

Call a method on channel with arguments

1this.subscription.perform('method_name', arguments)
2

In your ApplicationCable::Connection class in Ruby add

1# app/channels/application_cable/connection.rb
2module ApplicationCable
3  class Connection < ActionCable::Connection::Base
4    identified_by :current_user
5
6    def connect
7      self.current_user = find_verified_user
8    end
9
10    private
11
12    def find_verified_user
13      begin
14        header_array = request.headers[:HTTP_SEC_WEBSOCKET_PROTOCOL].split(',')
15        token = header_array[header_array.length-1]
16        decoded_token = JWT.decode token.strip, Rails.application.secrets.secret_key_base, true, { :algorithm => 'HS256' }
17        if (current_user = User.find((decoded_token[0])['sub']))
18          current_user
19        else
20          reject_unauthorized_connection
21        end
22      rescue
23        reject_unauthorized_connection
24      end
25    end
26
27  end
28end

And in YourChannel.rb

1# app/channels/you_channel.rb
2class LocationChannel < ApplicationCable::Channel
3
4  # calls connect in client
5  def subscribed
6    stream_from 'location_user_' + current_user.id.to_s
7  end
8
9  # calls disconnect in client
10  def unsubscribed
11    # Any cleanup needed when channel is unsubscribed
12  end
13  
14  # called when send is called in client
15  def receive(params)
16    print params[:data]
17  end
18  
19  # called when perform is called in client
20  def method_name(params)
21    print params[:data]
22  end
23  
24end

Remove a subscription from cable

1App.cable.subscriptions.remove(this.subscription)
2
3// Place this in componentWillUnmount to remove subscription on exiting app
4

Add a subscription to cable

1App.cable.subscriptions.add(this.subscription)
2

Querying url and jwt from cable

1console.log(App.cable.jwt);
2console.log(App.cable.url);
3

Querying subscriptions and connection from cable

1console.log(App.cable.subscriptions);
2console.log(App.cable.connection);
3