client/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="action-cable-url" content="ws://localhost:3000/cable"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="bower_components/angular-websocket/dist/angular-websocket.js"></script>
    <script src="bower_components/angular-actioncable/dist/angular-actioncable.min.js"></script>
  </head>
  <body ng-app="app">
    <section ng-controller="SomeController">
      <ul>
        <li ng-repeat="datum in myData">
          {{ datum }}
        </li>
      </ul>
      <input ng-model="inputText" /><button ng-click="sendToMyChannel(inputText)">Send</button>
    </section>
    <br />
    <section>
      <div ng-controller="StatusController">
        <h4>
          <span ng-show="status.connected">✓ Connected</span>
          <span ng-show="status.disconnected">✘ Disconnected</span>
          <span ng-show="status.connecting">✘ Connecting......</span>
        </h4>
        <div>
          You can
          &quot;<kbd>Ctrl+c</kbd>&quot; + &quot;<kbd>rails s</kbd>&quot; and &quot;<kbd>Ctrl+z</kbd>&quot; + &quot;<kbd>fg 1</kbd>&quot;
          the server to see how it affects client states over time.
          Each client will maintain one and only one open connection and multiple clients will reconnect at slightly different times on server restart.
        </div>
      </div>
    </section>
    <script>
      angular.module('app', [
        'ngActionCable'
      ])
      .run(function (ActionCableConfig){
        ActionCableConfig.debug = true;
      })
      .controller('SomeController', function ($scope, ActionCableChannel){
        $scope.inputText = "";
        $scope.myData = [];

        // connect to ActionCable
        var consumer = new ActionCableChannel("ChatChannel", {user: 42, chat: 37});
        var callback = function(message) {
          $scope.myData.push(message);
        };
        consumer.subscribe(callback).then(function(){
          $scope.sendToMyChannel = function(message){
            consumer.send(message);
          };
          $scope.$on("$destroy", function(){
            consumer.unsubscribe().then(function(){ $scope.sendToMyChannel = undefined; });
          });
        });

      })
      .controller('StatusController', function($scope, ActionCableSocketWrangler){
        $scope.status= ActionCableSocketWrangler;
      });
    </script>
  </body>
</html>