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/29

エンジニアが会社員のままでいるのはヤバいなと感じた理由

現在会社員エンジニアからフリーランスエンジニアへの転身を目論んで活動中のてぃすです。 今回は僕が感じた会社に雇われた状態でエンジニアを続けることのデメリットについて語っていきます。 エンジニアは多くの現場で幅広い技術を習得するべきである 会社員としてエンジニアを続けることの最大のマイナスポイント。 それはキャリアのコントロールしにくいという点です。 エンジニアが携わるITの世界というのは、技術の流行り廃りが他の業界に比べて断トツで早いんですよね。 そうなるとその技術で生計を立てていくエンジニアという存在は ...

続きを読む

エンジニア入門

2018/1/21

プログラミング言語としてのJavaについて

こんにちは、フリーランスエンジニアのてぃすです。 エンジニア・プログラマは年収1000万を現実的に目指せる職業として最近特に注目を集めている職業です。 今いる業界の将来性に不安を感じ脱出してきた人たちも、どんどんエンジニア・プログラマという働き方に集結しています。 ある程度エンジニア・プログラマという職業について調べていると、どのプログラミング言語を習得すればいいのか、という疑問が出てくるタイミングがあると思います。 どのプログラミング言語を選べばいいか、という疑問について調べてみると最近ではJava・R ...

続きを読む

エンジニア独立

2018/8/12

ITエンジニアがスーツ勤務を強要する現場を避けるべき理由

こんにちは、フリーエンジニアのてぃすです。 プラグラマやインフラ担当などと言ったITエンジニアとしての一般的な働き方として、客先に常駐して業務を行うというものがあります。 そんなとき、現場を選ぶ判断基準の一つとして服装が自由か否かというものが上げられます。 僕は決まって私服勤務可能な現場を選ぶようにしています。それはなぜか。エンジニアをスーツ勤務させる客先にロクなところがないから。 これまでスーツ勤務・私服勤務の現場を経験した上で、エンジニアがスーツを勤務を強要する現場を避けるべき理由を書いて行こうと思い ...

続きを読む

エンジニア独立

2019/5/29

パーソルテクノロジースタッフの派遣でエンジニア歴2年の僕が時給2000円を余裕で超えた話

今いる会社を辞めることとなり、今後のエンジニアとしての身の振りを検討中のてぃすです。 今回とある派遣会社にて、業務経験なしのRuby on Railsの案件を紹介してもらい、その時給が2000円を超えていました。 月給換算したら1,2年目の正社員の給与を余裕で超えてきます。派遣という働き方の印象がガラッと変わる体験をしました。 今回はエンジニア歴2年の僕にそんな素敵な待遇を提供してくれたパーソルテクノロジースタッフについて、実体験を交えて語っていこうと思います。 エンジニア派遣の「パーソルテクノロジースタ ...

続きを読む

エンジニア独立

2019/5/12

エンジニアにとってSESが最良の選択肢ではない3つの理由

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアが正社員として働く上での選択肢として、SES企業というものがあります。 非常に数が多く、特に未経験エンジニアに対して広く門を開けているのでSESを選ぶ人はかなり多い。 しかしこのブログでは度々言っていることですが、ITエンジニアにとっては不幸になる可能性が高い働き方なんですよね。 そこで今日はエンジニアにとってSES企業という選択肢がなぜオススメできないかについて解説していこうと思います。 SESとは? まずSES企業とはどのようなものなのかにつ ...

続きを読む

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

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