How to add ActionCable to a ruby on rails engine? - ruby-on-rails

Question

I am working in a project which has 3 separate parts - a ruby on rails engine, a ruby on rails application, and a frontend react application. I need to introduce websockets / ActionCable in the engine, and am not having any luck getting ActionCable running.
I have the following relevant files in the engine:
app/channels/application_cable/connection.rb
module ApplicationCable
class Connection < ActionCable::Connection::Base
end
end
app/channels/application_cable/channel.rb
module ApplicationCable
class Channel < ActionCable::Channel::Base
end
end
app/channels/fromserver_channel.rb
class FromServerChannel < ApplicationCable::Channel
def subscribed
stream_from "fromClient"
end
def receive(data)
puts '----------'
puts data
ActionCable.server.broadcast "fromServer", data
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
config/environments/development.rb
require 'action_cable/engine'
Rails.application.configure do
config.action_cable.disable_request_forgery_protection = true
#specify the socket URI for ActionCable
config.action_cable.url = "/cable"
config.action_cable.allowed_request_origins = [/http:\/\/*/, /https:\/\/*/]
end
config/cable.rb
development:
adapter: async
test:
adapter: async
production:
adapter: postgresql
config/routes.rb
require 'action_cable/engine'
RoundaboutEngine::Engine.routes.draw do
mount ActionCable.server => '/cable'
# mount RoundaboutEngine::Engine => "/cable"
scope controller: 'round_about' do
get 'organizer' => :show
end
end
Rails.application.routes.send(:draw) do
mount RoundaboutEngine::Engine => '/' if RoundaboutEngine.draw_routes_in_host_app
end
The front end looks like this:
import React, { useState } from 'react';
import channel from './cable';
const RoundAboutView = () => {
const [displayText, setDisplayText] = useState('');
const sendUpdate = (arg) => {
channel.sending(arg);
};
return (
...
Text:
{` ${displayText}`}
...
);
};
export default RoundAboutView;
import ActionCable from 'actioncable';
// const cable = ActionCable.createConsumer('wss://localhost:9292/cable');
const cable = ActionCable.createConsumer(`ws://${window.location.host}/cable`);
const channel = cable.subscriptions.create(
{ channel: 'FromServerChannel' },
{
connected() { },
disconnected() {},
received: (data) => {
console.log(data);
},
sending(data) {
this.perform('fromClient', { data });
},
},
);
export default channel;
The problem I am having is that Chrome says the websocket can't connect (WebSocket connection to 'ws://localhost:9292/cable' failed). In the terminal, when in routes.rb I mount /cable with ActionCable.server, I see the below:
"exception":{
"type":"NoMethodError",
"message":"undefined method `info' for nil:NilClass",
"stack_trace":"NoMethodError(undefined method `info' for nil:NilClass)\n actioncable (5.2.6) lib/action_cable/connection/tagged_logger_proxy.rb:38:in `block in log'\n actioncable (5.2.6)
When I don't do that and instead mount /cable with the engine, I get an error that the route GET /cable doesn't exist.
I'm not able to move past this point and I'm not sure what I'm doing wrong or missing in the code. I've seen the example at https://github.com/palkan/engine-cable-app and wasn't able to take that example and make it work in my code. Can anyone help me?