Comment by {comment.user.name}
{comment.content}
Action Cable v0.1.0 is now available for alpha testers:{" "}
https://t.co/ryqK2ZAKG7. I'll be
setting up a demo repo shortly as well. ENJOY!
— DHH (@dhh){" "}
July 8, 2015
[Action Cable](https://github.com/rails/actioncable) is still under heavy
development but it comes with
[examples](https://github.com/rails/actioncable-examples) to demonstrate its
usage.
Action Cable integrates websocket based real-time communication in Ruby on Rails
applications. It allows building realtime applications like Chats, Status
updates, etc.
## Action Cable + React
Action Cable provides real time communication. ReactJS is a good tool to manage
view complexity on the client side. Together they make it easy to develop snappy
web applications which requires state management on the client side without too
much work.
Anytime data changes the new data is instantly provided by Action Cable and the
new data is shown on the view without user doing anything on the application by
ReactJS.
## Integrating React
The official Action Cable Example is a chat application. We will be building the
same application using [ReactJS](https://facebook.github.io/react).
First follow the
[instructions mentioned](https://github.com/rails/actioncable-examples) to get a
working chat application using Action Cable.
Now that the chat application is working let's get started with adding ReactJS
to the application.
_Please note that we have also posted a number of
[videos](https://bigbinary.com/videos) on learning ReactJS. Check them out if
you are interested._
## Step 1 - Add required gems to Gemfile
```ruby
# react-rails isn't compatible yet with latest Sprockets.
# https://github.com/reactjs/react-rails/pull/322
gem 'react-rails', github: 'vipulnsward/react-rails', branch: 'sprockets-3-compat'
# Add support to use es6 based on top of babel, instead of using coffeescript
gem 'sprockets-es6'
```
## Step 2 - Add required JavaScript files
Follow
[react-rails installation](https://github.com/reactjs/react-rails#installation)
and run `rails g react:install`.
This will
- create a components.js file.
- create `app/assets/javascripts/components/` directory.
Now put following lines in your application.js:
```javascript
//= require react
//= require react_ujs
//= require components
```
Make sure your `app/assets/javascripts/application.js` looks like this
```javascript
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require cable
//= require channels
//= require_tree .
```
## Step 3 - Setup Action Cable to start listening to events
We will be using es6, so lets replace the file
`app/assets/javascripts/channels/index.coffee`, with
`app/assets/javascripts/channels/index.es6` and add following code.
```javascript
var App = {};
App.cable = Cable.createConsumer("ws://localhost:28080");
```
Also remove file `app/assets/javascripts/channels/comments.coffee`, which is
used to setup subscription. We will be doing this setup from our React
Component.
## Step 4 - Create CommentList React Component
Add following code to `app/assets/javascripts/components/comments_list.js.jsx`.
```javascript
var CommentList = React.createClass({
getInitialState() {
let message = JSON.parse(this.props.message);
return { message: message };
},
render() {
let comments = this.state.message.comments.map(comment => {
return this.renderComment(comment);
});
return {comment.content}
<%= @message.content %>
<%= react_component 'CommentList', message: render(partial: 'messages/message.json', locals: {message: @message}) %> <%= render 'comments/new', message: @message %> ``` Notice how we are rendering CommentList, based on Message json content from jbuilder view we created. ## Step 7 - Setup Subscription to listen to Action Cable from React Component To listen to new updates to comments, we need to setup subscription from Action Cable. Add following code to `CommentList` component. ```javascript setupSubscription(){ App.comments = App.cable.subscriptions.create("CommentsChannel", { message_id: this.state.message.id, connected: function () { setTimeout(() => this.perform('follow', { message_id: this.message_id}), 1000 ); }, received: function (data) { this.updateCommentList(data.comment); }, updateCommentList: this.updateCommentList }); } ``` We need to also setup related AC Channel code on Rails end. Make following code exists in `app/channels/comments_channel.rb` ```ruby class CommentsChannel < ApplicationCable::Channel def follow(data) stop_all_streams stream_from "messages:#{data['message_id'].to_i}:comments" end def unfollow stop_all_streams end end ``` In our React Component, we use `App.cable.subscriptions.create` to create a new subscription for updates, and pass the channel we want to listen to. It accepts following methods for callback hooks. - `connected`: Subscription was connected successfully. Here we use `perform` method to call related action, and pass data to the method. `perform('follow', {message_id: this.message_id}), 1000)`, calls `CommentsChannel#follow(data)`. - `received`: We received new data notification from Rails. Here we take action to update our Component. We have passed `updateCommentList: this.updateCommentList`, which is a Component method that is called with data received from Rails. ### Complete React Component Here's how our complete Component looks like. ```javascript var CommentList = React.createClass({ getInitialState() { let message = JSON.parse(this.props.message); return { message: message }; }, render() { let comments = this.state.message.comments.map(comment => { return this.renderComment(comment); }); return{comment.content}