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

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

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

続きを読む

エンジニア独立

2019/4/15

【2019年版】現役フリーランスエンジニアがオススメするフリーランスエージェント4選

どうも、フリーランスエンジニアのてぃすです。 僕は正社員時代の月収は20万円を切るくらいだったのですが、独立したことで同じ労働時間で月100万円をキープできるようになりました。 現在はちょっと働く時間を減らして週3リモートで月70万円で働いていますが、このくらいのバランスもストレスが少なく、快適な日々を過ごすことができています。 そんな感じで独立から1年以上が経過し、わかったことがあります。 ITエンジニアは今の相場から考えれば、フリーランスになった方が圧倒的に得だなということです。 もちろん正社員ディス ...

続きを読む

エンジニア独立

2019/4/20

【時給2000円以上】経験者が語る派遣エンジニアの魅力

どうも、フリーランスエンジニアのてぃすです。 巷で語られているITエンジニアの働き方といえば、正社員 or フリーランス、というのが主流として語られています。 しかしITエンジニアにとって美味しい働き方がもう1つ存在しています。 それが今回紹介する派遣エンジニアです。 ぼくもフリーランスエンジニアとして独立する前の準備期間に派遣エンジニアを活用しました。 今日はその派遣エンジニアという働き方の魅力と活用方法について紹介していきます。 派遣エンジニアとは 今回紹介する派遣エンジニアという働き方を一言で表すと ...

続きを読む

エンジニア入門

2019/5/30

エンジニアにとっての理想的な職場とは

こんにちは、フリーランスエンジニアのてぃすです。 この記事を読んでくださっているということはITエンジニアかと思いますが、皆さんエンジニアとして働くならどんな環境で働きたいですか? スーツ勤務が嫌、言われたことをモクモクとこなすのが好き、など人によって理想として掲げる働き方って大きく異なります。 僕はこれまでエンジニアとして、SES企業やノリノリのベンチャー企業、起業したてのスタートアップ企業における業務を経験してきました。 今回は僕の経験や周囲のエンジニアから聞いた話を交えて、エンジニアにとっての働き方 ...

続きを読む

エンジニア独立

2018/8/22

【厳選】現役フリーエンジニアが勧めるフリーランスエージェント2選

こんにちは、フリーエンジニアのてぃすです。 エンジニア、特にプログラマーがフリーランスになろうとしたとき、人脈豊富なスーパーエンジニアでもない限り、最も現実的な選択肢がフリーランスエージェントを利用した働き方です。 とはいえエンジニアバブルの昨今、そういったエージェントサービスは数多存在しており、戦国時代状態です。 選択肢が多いということは嬉しいことであり、同時にどれを選べばいいかという悩みにもなります。 各サイトではメリットや自サービスの長所しか書かれていません。当然ですが。 そうなると選ぶ側としては迷 ...

続きを読む

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

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