Rails 6.14 Action Cable连接后控制台无日志输出问题排查

排查及修复步骤 #

1. 补全Action Cable路由 #

你当前路由文件未挂载Action Cable服务入口，这是没有任何cable相关请求的核心原因。在config/routes.rb中添加以下代码：

mount ActionCable.server => '/cable'

保存后重启Rails服务，刷新页面查看浏览器网络面板是否出现/cable的WebSocket请求。

2. 确认前端channel代码已导入 #

Rails 6默认使用webpacker管理JS资源，需确认channel代码被全局加载：

• 检查app/javascript/packs/application.js是否存在导入语句：

import "channels"

• 检查app/javascript/channels/index.js是否包含自动加载同目录channel文件的逻辑（默认生成的文件会自带以下内容）：

const channels = require.context('.', true, /_channel\.js$/)
channels.keys().forEach(channels)

如果没有上述配置，手动将activity_channel.js导入到JS入口文件后再测试。

3. 配置自定义域名白名单 #

你使用自定义域名访问本地服务，需要在config/environments/development.rb中添加Action Cable跨域白名单：

config.action_cable.allowed_request_origins = ['https://my_project_name.mycompany.com', 'http://my_project_name.mycompany.com']

如果使用HTTPS访问，可在app/javascript/channels/consumer.js中显式指定WebSocket连接地址适配协议：

import { createConsumer } from "@rails/actioncable"
export default createConsumer('wss://my_project_name.mycompany.com/cable')

验证方法 #

完成配置后重启Redis和Rails服务：

• 刷新页面后浏览器控制台会输出testing的连接成功日志
• Rails服务日志会出现Started GET "/cable"的WebSocket连接记录
• 在activity_channel.js的received回调中添加console.log(data)即可查看接收到的广播内容。

替代方案 #

如果Action Cable配置仍存在问题，可使用Pusher等第三方实时推送服务，不需要自行维护WebSocket服务，对接Slack事件后直接调用推送接口即可实现前端自动更新。

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