How to use @rails/actioncable - 5 common examples

require("jquery.mobile-events");
require("vendor/social-share-button");

import { createConsumer } from "@rails/actioncable";

window.App = {
  turbolinks: false,
  mobile: false,
  locale: "zh-CN",
  notifier: null,
  current_user_id: null,
  access_token: "",
  asset_url: "",
  twemoji_url: "https://twemoji.maxcdn.com/",
  root_url: "",
  cable: createConsumer(),

  isLogined() {
    return document.getElementsByName("current-user").length > 0;
  },

  loading() {
    return console.log("loading...");
  },

  fixUrlDash(url) {
    return url.replace(/\/\//g, "/").replace(/:\//, "://");
  },

  // 警告信息显示, to 显示在那个 DOM 前 (可以用 css selector)
  alert(msg, to) {
    $(".alert").remove();

import Article from "models/Article";
import Comment from "models/article/Comment";
import Member from "models/room/Member";
import Room from "models/Room";
import User from "models/User";

import Admin from "controllers/Admin";
import Main from "controllers/Main";
import UserController from "controllers/User";

Article.Comment = Comment;
Room.Member = Member;

init({
  cable: createConsumer(),
  controllers: {
    Admin,
    Main,
    User: UserController
  },
  models: {
    Article,
    Room,
    User
  },
  notificationCenter: NotificationCenter,
  notifications: {
    log: true,
    size: 10
  },
  postInit: () => {

it('calls create subscription', () => {
      const cable = ActionCable.createConsumer();

      createComponent();

      return wrapper.vm.$nextTick().then(() => {
        expect(cable.subscriptions.create).toHaveBeenCalledTimes(1);
        expect(cable.subscriptions.create).toHaveBeenCalledWith(
          {
            channel: 'IssuesChannel',
            iid: wrapper.props('issuableIid'),
            project_path: wrapper.props('projectPath'),
          },
          { received: wrapper.vm.received },
        );
      });
    });
  });

import { createConsumer } from '@rails/actioncable';
import ConnectionMonitor from './actioncable_connection_monitor';

const consumer = createConsumer();

if (consumer.connection) {
  consumer.connection.monitor = new ConnectionMonitor(consumer.connection);
}

export default consumer;

export const createCable = () => {
  if (!consumer) {
    consumer = createConsumer();
  }

  return consumer;
}