CODEWITHSUNDEEP
ruby-on-railsreactjsactioncable
Lee Hodges
Lee Hodges

Reputation: 21

React ActionCable Provider createConsumer function not working?

I am building an application and decided to utilize ActionCable for websockets. My goal is to keep track of each user in Actioncable so when they unsubscribe/close the window, I can remove them from a running list. There is no issue when the users join and I push them into the list; however, I cannot seem to establish a connection that allows me to set up the current_user attribute. Here is the error that is displaying. ActionCable createConsumer is not a function

Here is the code where I am trying to implement it. 

import { ActionCableProvider, ActionCable } from 'react-actioncable-provider'
import App from '../App'

import React from 'react';

const cable = ActionCable.createConsumer('ws://localhost:3000/cable')
export default function Container (props) {
    return (
        <ActionCableProvider cable={cable}>
            <App />
        </ActionCableProvider>
    )
}

My Backend looks like this. //app/channels/lobbies_channel.rb

 class LobbiesChannel < ApplicationCable::Channel

  def subscribed
    @lobby = Lobby.find(params[:lobby_id])
    stream_for @lobby
  end

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

Here is my connection.rb file, which I have not built out yet because it is not being triggered or reaching the byebug.

 module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user
  end

  def connect
    byebug
    self.current_user = find_verified_user
  end

  private

  def find_verified_user
    byebug
  end
end

//routes.rb

Rails.application.routes.draw do
  resources :lobbies, only: [:index, :create, :destroy]
  resources :users, only: [:create, :update, :destroy]
  post '/available' => 'lobbies#checkAvail'
  post '/joinlobby' => 'lobbies#joinLobby'
  mount ActionCable.server => '/cable'
end

Can anyone help me set up my action cable provider so it triggers the connection file?

Upvotes: 0

Views: 1462

Answers (1)

coreyward
coreyward

Reputation: 80041

You need to import ActionCable from the actioncable package. If you look, the ActionCable that react-actioncable-provider exports is actually a React component, not the library:

import ActionCable from 'actioncable'
import ActionCableProvider from 'react-actioncable-provider'
import App from '../App'
import React from 'react'

// ...

Upvotes: 0

Related Questions