如何配置ActionCable以与外部前端应用程序一起使用

问题描述

我有两个应用程序（一个Rails应用程序和一个Vue应用程序）需要通过ActionCable进行通信。这在开发中效果很好，但是在生产中却没有。这两个应用程序都部署在Heroku上，并且Rails应用程序正在使用RedisCloud插件。

启动应用

## production.rb

config.action_cable.allowed_request_origins = ['https://actioncablevueapp.herokuapp.com']

## cable.yml

development:
  adapter: redis
  url: redis://localhost:6379/1
  channel_prefix: web_chat

test:
  adapter: test

production:
  adapter: redis
  url: <%= ENV.fetch("REdisCLOUD_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: web_chat

## chat_channel.rb

class ChatChannel < ApplicationCable::Channel
  def subscribed
    customer = Customer.find_by(external_id: params[:id])
    stream_for customer
  end
end

## sidekiq process

ChatChannel.broadcast_to(Customer.find_by(external_id: user_id),body)

Vue应用

在前端应用程序中，我正在使用一个名为actioncable-vue的库。这就是设置方式

// main.js

Vue.use(ActionCableVue,{
  debug: true,debugLevel: 'error',connectionUrl: `wss://${process.env.VUE_APP_SERVER_URL.replace('https://','')}/cable`,connectImmediately: true,store
})

// App.vue

export default {
  name: 'App',channels: {
    ChatChannel: {
      received(data) {
        console.log(data)
      }
    }
  },mounted() {
    this.$cable.subscribe({
      channel: 'ChatChannel',id: 'anexistingcustomerid'
    })
  }
  ...
}

控制台和我从heroku获取的日志中均未显示错误。实际上，在heroku上，我确实看到了一条确认订阅的actioncable日志消息。但是，没有任何数据通过电缆推送给我的vue应用接收。

您能想到我可能错过的其他配置吗？在开发和生产中都不会产生任何错误的事实，这使我有点不高兴。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）