独立JavaScript应用使用Action Cable连接TestChannel未触发订阅问题

我写了如下的TestChannel：

class TestChannel < ApplicationCable::Channel
    def subscribed
      Rails.logger.info 'subscribed to test_channel yuppi'
      stream_for current_use
      transmit({ message: 'Welcome to the test channel!' })
    end

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

之后在独立JS应用里尝试连接：

const socket = new WebSocket('wss://petros-test.com/cable/?token=1234567890&channel=TestChannel');

socket.onopen = function() {
  document.getElementById('status').innerText = 'Connected to cable';
  console.log('WebSocket connection established');
};

socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
};

连接能建立，但没触发频道逻辑，日志只输出：

WebSocket connection established
(index):23 Message from server: {"type":"welcome"}
(index):23 Message from server: {"type":"ping","message":1741205085}

问题原因 #

Action Cable 不支持通过URL参数channel直接订阅频道。当前只是建立了基础WebSocket连接，并没有向服务器发送订阅指定频道的指令，所以服务器只会维持连接，不会触发TestChannel的subscribed方法。另外后端代码存在笔误：current_use应为current_user，否则会引发错误。

解决步骤 #

1. 修正后端频道代码的笔误

将current_use改为current_user：

class TestChannel < ApplicationCable::Channel
    def subscribed
      Rails.logger.info 'subscribed to test_channel yuppi'
      stream_for current_user # 修正此处
      transmit({ message: 'Welcome to the test channel!' })
    end

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

2. 前端连接建立后发送订阅指令

在onopen回调中，发送符合Action Cable格式的JSON消息，告知服务器要订阅TestChannel：

const socket = new WebSocket('wss://petros-test.com/cable/?token=1234567890');

socket.onopen = function() {
  document.getElementById('status').innerText = 'Connected to cable';
  console.log('WebSocket connection established');
  
  // 发送订阅频道的指令
  const subscribeMessage = JSON.stringify({
    command: 'subscribe',
    identifier: JSON.stringify({
      channel: 'TestChannel'
    })
  });
  socket.send(subscribeMessage);
};

socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
};

关键说明 #

• Action Cable的订阅逻辑要求客户端主动发送subscribe命令，其中identifier字段必须是包含channel名称的嵌套JSON字符串（外层也需要转成JSON格式）。
• 原URL中的channel=TestChannel参数可直接删除，Action Cable不会处理该参数。

修改完成后，服务器收到订阅指令会触发TestChannel的subscribed方法，日志中会出现subscribed to test_channel yuppi，同时客户端会收到Welcome to the test channel!的消息。

内容的提问来源于stack exchange，提问作者Petran