TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

React + ReduxでActionCableに通信する書き方をサクッと紹介

更新日:

  • Ruby on Rails 5から導入されたリアルタイム通信機能であるActionCable
  • 浮き沈みの激しいフロントエンドフレームワーク界隈で強い人気を誇るReact
  • 一定規模以上のReact開発では欠かせないアーキテクチャであるRedux

今回はこの3つの技術を使用してチャットツールを開発したときの経験を元に、React + Redux でActionCableに通信を行うための書き方についてざっくり紹介します。

各々の環境については構築済であることを前提に進めていきます。

Railsの実装

最低限のリアルタイム通信を実装するならば、Rails側のActionCableはマニュアル通りの実装で問題ありません。

フロント側の記述の例を分かりやすくする為にチャンネルのサンプルを置いておきます。

フロントからデータを受け取って、同じチャンネルにいる接続に向けてブロードキャストするというシンプルな構成です。

class SampleChannel < ApplicationCable::Channel
  def subscribed
    stream_from "sample"
  end

  def unsubscribed
    
  end

  def speak(data)
    ActionCable.server.broadcast "sample", comment: data['message']
  end
end

ちなみにクライアント側の接続処理はRailsがデフォルトで生成する次のJavaScriptコードがよしなにやってくれています。

// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
//
//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);

React&Reduxの実装

フロント側の実装も単純な機能であればシンプルな記述で実現できます。

メインのクラス配下に以下のメソッド記述します。

Action

ActionCableから通信を受けたときのアクションを実装します。

const RECEIVED = 'RECEIVED';

function receivedMessage(messages) {
  return {
    type: RECEIVED,
    messages,
  };
}

Reducer

Storeの状態を渡されたActionに応じて変更します。

ここでは現在画面に表示しているmessagesステータスに対して、ActionCableよりブロードキャストされたデータを追加しています。

const initialState = {
  messages: [],
};

function sample(state = initialState, action) {
  switch (action.type) {
    case 'RECEIVED':
    return Object.assign({}, state, {
      messages: state.messages.concat(action.messages),
    });
    default:
    return state;
  }
}

メイン処理

ActionCableと通信を行うためのメインの処理となります。

それぞれ接続時、切断時、受信時、送信時の処理を書いています。

class SampleMain extends React.Component {
  // ActionCable
  componentDidMount() {
    // ビューのレンダリングが終わったらActionCableに接続
    this.subscriptChannel();
  }
  subscriptChannel() {
    App.sample = App.cable.subscriptions.create(
      // ActionCableで実装したチャンネル名、paramに設定したい値
      { channel: "SampleChannel", sample_id: "sample_id" },
      {
        接続されたときの処理
        connected() {
        },

        // 切断されたときの処理
        disconnected() {
        },
        // ActionCableからの通信を受けたときの処理
        received(data) {
          // 受信したデータで更新する
          store.dispatch(Actions.receivedMessage(data['comment']))
        },
        speak(message) {
          // サーバー側のメソッドの呼び出し
          this.perform('speak', {message: message});
        }
      }
    );
    App.sample.received = App.sample.received.bind(this);
  }
// 以下省略
}

あとはフォームボタンクリック時にサーバー側のメソッドの呼び出しを実装すればOKです。

class FormInput extends React.Component {
  send(e) {
    e.preventDefault();
    //上で書いたサーバー側の呼び出し
    App.sample.speak(this.myInput.value);
    this.myInput.value = '';
    return;
  }
  render() {
    return (
      <form>
        <input type="text" ref={(ref) => (this.myInput = ref)} defaultValue="" />
        <button onClick={(event) => this.send(event)}>Send</button>
      </form>
    );
  }
}

まとめ

React/Reduxは実装方法が柔軟なため、サンプル毎に実装が異なっていて情報を見つけるのに結構苦労しました。

今回の記事がお役に立てば幸いです。

よく読まれている記事

エンジニア独立

2019/5/30

中小SESに入社するなら、派遣エンジニアになった方が100倍幸せになれるというお話

こんにちは。フリーランスエンジニアのてぃすです。 僕はこれまで、 中小SES正社員 派遣エンジニア フリーランスエンジニア として活動してきましたが、その中で中小SESで正社員として働いていたときが、最も得るものが少なかった期間であったと確信しております。 給与・自分の時間・キャリア・経験のどれを取っても得られるものが少なく、エンジニアとして働く中で第三者に搾取される割合が最も多い働き方です。 そこで今回は僕がこれまでキャリアを積む中で確信した中小SESに入社するなら、派遣エンジニアになった方が幸せになれ ...

続きを読む

エンジニア入門

2019/4/15

最も効率の良いプログラミング学習フロー

こんにちは、フリーエンジニアのてぃすです。 エンジニアの需要が拡大し、売り手市場となったことから、プログラミングを学習し始めた人、学習してみたいという人がかなり増えてきています。 これからの時代プログラミングを学習することは、豊かな人生を目指す上で非常に強力なスキルとなってきます。 今回はプログラミング初心者の方々に向けて、最も効率的なプログラミングの学習方法を解説していきます。 はじめに この学習フローでは、遊びのメカニズムを利用して進めていきます。 どういうことでしょうか。説明していきます。 遊ぶ感覚 ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアになって大変だったこと・苦労したこと

どうも、フリーランスエンジニアのてぃすです。 このブログでは基本的にITエンジニアの独立を勧めることが多いですが、今日はちょっと視点を変えて、フリーランスエンジニアとして活動する上で、苦労することに視点を当ててお話していこうと思います。 世間ではフリーランスをもてはやす声、それに対する反論などが飛び交っていますが、多くの意見が「フリーランス」という一括りにしたもので、実情を捉えていないものがほとんどであると感じています。 この記事では実際に僕がフリーランスエンジニアとして活動してきた中でリアルに体験してき ...

続きを読む

エンジニア独立

2019/5/29

正社員エンジニアという働き方を批判してみる

今回はちょっと過激めなタイトルを飾ってみました。 僕はエンジニアとして、正社員・派遣社員・フリーランスとして働いて来ていますが、その中でどうしても正社員という働き方が特別もてはやされているのかが分かりません。 とはいえ有名理系大卒で競争力激高な大手企業のスーパーエンジニアだったり、激レアホワイト企業に勤めている人に反論されたらぐうの音も出ないというか、論点が変わってきてしまうので、以下の条件に当てはまるような正社員エンジニアに向けてのお話ということで読み進めていただければなと。 20代で年収300万円以下 ...

続きを読む

エンジニア独立

2019/5/30

SIer・SESからWEB系エンジニアにキャリアチェンジする現実的な方法

エクセルで作らされる誰が読むかも分からないドキュメント 月に1回の帰社日 枯れた技術を言われた通りに扱うだけの毎日 スーツ勤務で下級労働者扱い SIer・SES系エンジニアとしての業務経験があり、かつ外の世界を知ったエンジニアから見たSIer・SES系のイメージってこんな感じですよね。 ここで言う外の世界の代表格と言えばWEB系ベンチャーやフリーランス。 カテゴライズの厳密さについては色々と意見はありますが、いわゆる自社サービスで利益を立てている企業と言えば分かりやすいでしょう。 最近ではエンジニアの待遇 ...

続きを読む

-プログラミング
-, , ,

Copyright© TIS ENGINEER NOTE , 2020 All Rights Reserved Powered by AFFINGER5.