action-cable-react-with-jwt

Original package is no longer supported. This is updated fork which uses actioncable in version 6.1

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

Installation

Yarn:

1yarn add actioncable-js-jwt
2

npm:

1npm install actioncable-js-jwt
2

Usage

Creating an actioncable websocket

1import { createConsumer } from '@rails/actioncable';
2
3let App = {};
4App.cable = createConsumer("ws://cable.example.com", jwt); // place your jwt here
5
6// you shall also use this.cable = ActionCable.createConsumer(...)
7// 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");

Call a method on channel with arguments

1this.subscription.perform("method_name", arguments);

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

Add a subscription to cable

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

Querying url and jwt from cable

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

Querying subscriptions and connection from cable

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