Action CableでWebSocketを実現するときにconfig.action_cable.urlは必ずしも設定しなくて良い #Rails – Qiita

では、なぜ config.action_cable.url を設定しなくても、Vue や React を使ったアプリケーションで Action Cable が動くのでしょうか？ 答えはクライアント側の実装にあります。

1. クライアントライブラリ @rails/actioncable

Vue や React などのフロントエンドフレームワークから Action Cable を使う場合、通常 npm や yarn で @rails/actioncable という JavaScript ライブラリをインストールします。

npm install @rails/actioncable
# or
yarn add @rails/actioncable
# etc...

1. createConsumer() で接続先を直接指定

このライブラリの中心的な機能の一つが createConsumer() 関数です。これを使って WebSocket サーバーへの接続（Consumer）を作成するのですが、この関数には接続先の WebSocket URL を直接引数として渡せます

Rails ガイドにもしっかり書かれています。

4.1.1. Connect Consumer

// app/javascript/channels/consumer.js
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `bin/rails >generate channel` command.

import { createConsumer } from "@rails/actioncable"

export default createConsumer()

This will ready a consumer that’ll connect against /cable on your server by default. >The connection won’t be established until you’ve also specified at least one >subscription you’re interested in having.

The consumer can optionally take an argument that specifies the URL to connect to. >This can be a string or a function that returns a string that will be called when the >WebSocket is opened.

// Specify a different URL to connect to
createConsumer('wss://example.com/cable')
// Or when using websockets over HTTP
createConsumer('https://ws.example.com/cable')

// Use a function to dynamically generate the URL
createConsumer(getWebSocketURL)

function getWebSocketURL() {
 const token = localStorage.get('auth-token')
 return `wss://example.com/cable?token=${token}`
}

import { createConsumer } from "@rails/actioncable"

// .env ファイルなどから URL を取得するのがベスト
const wsUrl = 'ws://localhost:3000/cable'
const consumer = createConsumer(wsUrl)

// あとは consumer を使って Channel をsubscribe...

# config/cable.yml (例)
development:
  adapter:  solid_cable

production:
  adapter: solid_cable
  polling_interval: 0.1.seconds
  message_retention: 1.day