How to use actioncable - 10 common examples

subscribeChannel() {
    const { messageReceived } = this.props.actions;
    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
    const cableUrl = `${protocol}${window.location.hostname}:${window.location.port}/cable`;
    this.cable = ActionCable.createConsumer(cableUrl);

    /* eslint no-console: ["error", { allow: ["log"] }] */
    this.cable.subscriptions.create({ channel: 'CommentsChannel' }, {
      connected: () => {
        console.log('connected');
      },
      disconnected: () => {
        console.log('disconnected');
      },
      received: (comment) => {
        messageReceived(Immutable.fromJS(comment));
      },
    });
  }

updateConversationItem,
  appendConversation
} from '../actions/conversations'

import ProfileView from '../pages/ProfileView'
import AgentProfileView from '../pages/AgentProfileView'
import Team from '../pages/TeamPage'
import BotContainer from './BotsContainer'
import Integrations from '../pages/Integrations'

import {
  camelizeKeys
} from '../actions/conversation'

const CableApp = {
  cable: actioncable.createConsumer() //(window.ws_cable_url)
}
// Initialize a context
const Context = createContext()

// This context contains two interesting components
const { Provider, Consumer } = Context

import {toggleDrawer} from '../actions/drawer'
import UserData from '../components/UserData'

import {appendMessage } from '../actions/conversation'


class ShowAppContainer extends Component {

  constructor(props){

const { Header, Footer, Sider, Content } = Layout;

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


const AppState = {
  app: {},
  app_users: []
}

const CableApp = {
  cable: actioncable.createConsumer()
}
// Initialize a context
const Context = createContext()

// This context contains two interesting components
const { Provider, Consumer } = Context


const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () =&gt; (
  <div></div>

import { GoBanDetection } from '../common/Helper';
import SgfBoard from '../eboard/SgfBoard';

import { APP_DOMAIN } from '../common/Config';
import {
  setToolbarHidden,
  setBoardStates,
  // setNextStoneType,
  addSteps,
  removeSteps,
} from '../actions/Actions';

import { fetchRoomMessages } from '../actions/FetchActions';

const { ENTER } = Keys;
const cable = ActionCable.createConsumer('ws://localhost:3000/cable');

function mapStateToProps(state) {
  return {
    puzzle: state.puzzle,
    rangeFilter: state.rangeFilter,
    steps: state.steps,
    currentAnswerId: state.currentAnswerId,
    currentMode: state.currentMode,
    theme: state.theme,
    nextStoneType: state.nextStoneType,
    boardStates: state.boardStates,
  };
}

const mapDispatchToProps = dispatch => ({
  setBoardStates: state => dispatch(setBoardStates(state)),

Vue.use(require('vue-analytics'), {
    id: 'UA-108383158-1',
    router,
    ignoreRoutes: ['beanman']
});

Vue.router = router;

Vue.config.productionTip = false;

Vue.use(VueAxios, axios);
Vue.axios.defaults.baseURL = process.env.API_BASE || "https://api.screenhole.net";

import ActionCable from 'actioncable'
Vue.prototype.$cable = ActionCable.createConsumer(Vue.axios.defaults.baseURL.replace('http', 'ws') + '/cable')

import anime from 'animejs'
Vue.prototype.$anime = anime

import lottie from 'lottie-web'
Vue.prototype.$lottie = lottie

import pepjs from 'pepjs'

import sanitizeHTML from 'sanitize-html'
Vue.prototype.$sanitize = sanitizeHTML

// catch 401 errors and logout
Vue.axios.interceptors.response.use(function (response) {
    return response;
}, function (error) {

connect: function () {
    this.cable = ActionCable.createConsumer(this.serverUrl);
  },

Ng2Cable.prototype.setCable = function (url) {
        this.cable = ActionCable.createConsumer(url);
    };
    Ng2Cable.prototype.unsubscribe = function () {

setCable(url) {
        this.cable = ActionCable.createConsumer(url);
    }
    unsubscribe() {

_connect(url) {
		if (typeof url == 'string') this._cable = actioncable.createConsumer(url);
		else {
			throw new Error(
				'Connection URL needs to be a valid Action Cable websocket server URL.'
			);
		}
	}

setCable(url:string): void {
    this.cable = ActionCable.createConsumer(url);
  }