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

他のエンジニアと差をつけるための面談前の下準備

こんにちは、フリーエンジニアのてぃすです。 僕は正社員から派遣、フリーランスへと転身する際に、絶対に妥協したくないという意志の元、半年ほどの間に10件近くの面談を体験してきました。 今日はその時の体験を元に、エンジニアが面談を受ける前に下調べしておくべきコンテンツについて紹介していこうと思います。 なぜ下調べが必要か エンジニアって面談を軽視している人が多いんですよね。 ある程度の経歴があるエンジニアは、売り手市場であることも手伝い、まあまあ満足できる就業先を得られるのでそこまで面談対策をじっくりしている ...

続きを読む

エンジニア入門

2019/5/19

RubyでWebエンジニアを目指せるプログラミングスクール厳選4校

どうもフリーランスエンジニアのてぃすです。 エンジニアを目指すにあたり、もっとも確実性の高い手段がプログラミングスクールを活用するというもの。 そんなプログラミングスクールの中でJavaを扱っているプログラミングスクールが特に多いです。 しかしJavaを使ってエンジニアとしてのキャリアを開始する場合、SES企業などのスキルアップの保証のない企業に入ることになる確率が結構高い。 また官公庁や大企業での採用が多いことからスーツ勤務などといったエンジニア軽視の風潮が強い現場も多かったりします。 そうなるとカジュ ...

続きを読む

エンジニア入門

2019/4/15

プログラミングの勉強はモチベーションだけでやると挫折する

こんにちは。フリーエンジニアのてぃすです。 最近は未経験からエンジニアを目指したり、エンジニアとしてのキャリアを向上させるために、プライベートでプログラミングを勉強をし始める人が増えてきています。 僕自身、プライベートの時間に未経験言語の勉強をしてキャリアアップした経験があるので、非常にいい傾向だと思っています。 しかしSNSやブログなどを眺めていると、 「この人モチベーションだけで勉強しているな」 という人を多く見かけます。 個人的な経験と人から聞いてきた話から、このようにモチベーションだけで勉強してい ...

続きを読む

エンジニア独立

2019/5/29

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

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

続きを読む

エンジニア独立

2019/4/15

ITエンジニアが市場価値を知りたければエージェントを活用すべき

どうも、フリーランスエンジニアのてぃすです。 企業に雇われないフリーランスという働き方。 ITエンジニアという自分の技術を商売道具とする職業は、フリーランスとの相性が抜群だったりします。 僕自身文系かつエンジニア歴2年半で独立しましたが、1年目から年収1000万を軽く超えることができました。 独立してこれまでで学んだことは、ITエンジニアがフリーランスとなり効率よく稼ぐには市場価値の把握がもっとも重要であるということです。 市場価値という超重要な要素 ITエンジニアという職業はいくら高い技術を持っていても ...

続きを読む

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

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