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/4/28

ITエンジニアが給与上げるために出来ることは限られている

どうも、フリーランスエンジニアのてぃすです。 今ITエンジニアってかなり稼げる職種として知られてきていますが、中にはその影響を感じられていない人もいるんじゃないかと思います。 ぼくは2年の間に正社員、派遣、フリーランスと渡り歩いて、月収は20万→40万→80万->100万と変動してきました。 その中でITエンジニアとして収入を上げるために出来ることがなんなのかが少しずつ見えてきました。 今回はその経験から感じたITエンジニアが収入を上げるために出来ることについて分析・解説していきます。 会社の中で給 ...

続きを読む

エンジニア独立

2019/4/15

文系出身エンジニアが語る「弱いエンジニア」戦い方

こんにちは、フリーランスエンジニアのてぃすです。 僕は文系大学を卒業し、新卒で入ったITコンサル会社で入社半年後に軽くC#を扱う機会が訪れるまで、プログラミングやエンジニアリングに触れたことが一度もありませんでした。 パソコンも基本的に動画を見たりゲームをするための便利な箱くらいな印象。 一方、エンジニア業界には中学生時代から趣味でプログラミングをしてきたり、理系大学でバリバリ情報系を学んできたエンジニアがゴロゴロいるわけです。もう機械語で会話すればいいのにと思うレベルの猛者揃いです。 そうなると僕のよう ...

続きを読む

エンジニア独立

2019/4/15

文系出身エンジニアが26才でフリーランスになった感想

こんにちは。フリーランスエンジニアのてぃすです。 フリーランスエンジニアということは、つまりエンジニアとして独立しているということになり、すごい敷居が高い印象を持っている人が多いです。 けど僕は文系大学出身かつ、プログラミングも社会人になって一年弱ほど経ってから初めて経験しました。 そんな経験の浅い僕が滞りなくフリーランスエンジニアとして活動して、報酬についてもある程度満足のいく額を得ることができています。 最近はフリーランスという働き方が脚光を浴びてきて、気にはなっている。けどなかなか踏み出す勇気が出な ...

続きを読む

office

エンジニア独立

2019/5/29

エンジニア歴2年の僕がレバテックフリーランスでフリーランスを目指してみた

正社員エンジニアからフリーランスエンジニアへの方向転換の一環として、業界最大手であるレバテックフリーランスの個人面談に出向いてきたので、その感想を書いていこうと思います。 フリーランスというと知識・経験・人脈を兼ね備えたスーパーエンジニアしかなれない存在だと思っている人も少なくありません。 しかし最近では今回紹介するレバテックフリーランスや以前の記事で紹介したギークスジョブなどといったエージェントを利用すれば、僕のように経験の浅いエンジニアでも十分に目指せる働き方となっています。 この記事が現在働いている ...

続きを読む

エンジニア独立

2019/4/15

稼げないエンジニアは過小評価が原因

こんにちは、フリーエンジニアのてぃすです。 僕は正社員時代、3年目になっても手取りが20万にも届かない残念な状態にありました。その時は、 てぃすITエンジニアとか全然稼げない職業なんだな という印象を持っていました。別の業種に就こうと考えたことも1度や2度ではないです。 そして正社員を辞めてフリーランスになって月100万程度は安定して稼げるようになり、エンジニアの収入の相場のカラクリが少しずつ掴めてきました。 勘違いしないで欲しいのですが、単に正社員よりフリーランスの方が優れているということが言いたいわけ ...

続きを読む

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

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