RailsのActionCableと Nuxt.jsでリアルタイム更新アプリケーションの構築

# はじめに
[株式会社diffeasy](https://diffeasy.com)の政栄です。主にバックエンド担当です。(Rails)

弊社では「[大会運営　向上心](https://kojo-shin.com/lp/)」という大会運営をサポートするwebアプリを開発・運営しています。

今回はその「大会運営　向上心」のトーナメント表示部分にてリアルタイムに更新されるようにしてみました。
※まだテスト段階で、リリース日は未定です。

# 実装概要
RailsのAction Cableを使用して、Websocket通信させて、リアルタイム更新を実現します！

また、Action CableやWebsocket関連の知識について未熟ですので、間違い等ありましたら、教えてください。

# トーナメント表示にリアルタイム更新機能実装しよう！
## トーナメント表示機能の説明

トーナメントは種目毎に見れるようになっています。
![ 2018-12-19 21.13.23.png](https://qiita-image-store.s3.amazonaws.com/0/221884/3f646e2b-451c-c428-e112-dee284f01400.png)


トーナメント機能では、トーナメントを見る人の画面と、トーナメント結果入力者用の画面があります。
![ 2018-12-19 21.19.31.png](https://qiita-image-store.s3.amazonaws.com/0/221884/45c586ab-7642-3c64-1b89-7323c199e625.png)

現在は、結果入力が実施されたとき、閲覧者自が"最新の状態に更新"ボタンをクリックして更新があるかどうか確認しなければいけない状態です。

そのため、Action Cableを使用して、サーバー側から更新できるような仕組みにいこうというのが今回の試みです。

実装結果はこんな感じです。右が結果入力する人の画面で、左側が閲覧者の画面です。
トーナメントの右上の五郎さんが決勝へ進み、決勝戦で太郎さんが勝っています。

![tournament4.gif](https://qiita-image-store.s3.amazonaws.com/0/221884/bbad26bd-d3cb-d0d7-d3e5-7c6a856bca53.gif)


## リアルタイム更新について
今回採用したAction CableではWebsocketという技術をつかっています。
実装前に使用されている技術について調べたことを載せます。
### Websocketとは？？
- TCP上で低コストでの双方向通信
低コストとは、昔の技術で、リアルタイム更新のような機能を実現しようとすると何秒毎に更新する（ポーリング）とかをして負荷をかけてた。websocketは不必要な更新しない。
- websocketの通信手順
    1. HTTP(厳密にはそれをwebsocketにupgradeしたもの)でクライアントとサーバー間で情報をやり取りしてコネクション確立
    1. 確立されたコネクション上で、低コストな双方向通信。コネクションが確立されることをハンドシェイクという。握手

### Railsでのwebsocket
Rails標準ではredisを使ってるメッセージキューをredisに保存
アクセス多いサイトになってきたら、別途redisサーバーを用意したりできる

### Pub/Subについて
Pub/Subはパブリッシャ-サブスクライバ（pub/sub）型モデルとも呼ばれる、メッセージキューのパラダイムです。パブリッシャ側（Publisher）が、サブスクライバ側（Subscriber）の抽象クラスに情報を送信します。 このとき、個別の受信者を指定しません。Action Cableは、サーバーと多数のクライアント間の通信にこのアプローチを採用しています。

## 実装方法
### アプリケーションの環境を載せます。
- Rails (5.0.6)
    - ※Action CableはRails5からの機能です。
- Nuxt.js (1.3.0)


### バックエンド側の処理から

#### consoleにて
```
rails g channel message
```

#### チャンネルの設定
app/channels/message_channel.rb

```ruby
  # チャンネル接続時に呼ばれる
  def subscribed
    stream_from "message_#{params[:room]}"
  end

  # def unsubscribed
  #   # Any cleanup needed when channel is unsubscribed
  # end

  # メッセージをブロードキャストするためのアクション
  # def speak(data)
  #  ActionCable.server.broadcast "message_#{params[:room]}", message: data['message']
  # end
end
```

- speakの関数部分は、DBを介さずにリアルタイムでメッセージのやり取りをするときに使えます。
- トーナメント更新のようにDB反映を元にブロードキャスト（配信）したいときはspeakは使いません。

#### トーナメントの勝ち上がり処理をトリガーにします
```ruby
  def win
    ActiveRecord::Base.transaction do
      @tournament_bracket.win
      ActionCable.server.broadcast "message_#{@tournament_bracket.game_event_id}", message: @tournament_bracket.player_name
    end
    render json: {status: :success}
  rescue => e
    render json: {status: :error}
  end
```
つまり、バックエンドのアクションの後に、
`ActionCable.server.broadcast "message_#{@tournament_bracket.game_event_id}", message: @tournament_bracket.player_name`
を書くことで配信ができます。

- game_event_idとは、種目のことで、該当種目のページを開いている人にのみ、ブロードキャストします。

#### ルーティングの設定
```ruby
Rails.application.routes.draw do
  # 以下を追記
  mount ActionCable.server => '/cable'
end
```

### フロント側

#### パッケージのインストール
```
npm install actioncable
```

#### websocketとの接続処理
.envにバックエンドでマウントしたやつを書く

```env
BACK_WSS_URL=ws://localhost:4000/cable
```

#### utilsディレクトリ内にcable.jsを作成する
cable.jsはバックエンド側と接続するためのチャンネルを作成するものです。
また、重複してのチャンネル接続がないように、すでに接続しているチャンネルがある場合、クリアするようにしています。

```javascript

import cable from 'actioncable'

let consumer

function createChannel (...args) {
  if (!consumer) {
    consumer = cable.createConsumer(process.env.BACK_WSS_URL)
  } else {
    consumer.subscriptions['subscriptions'].shift()
  }
  return consumer.subscriptions.create(...args)
}

export default createChannel

```

#### トーナメントを描画しているページで実際にチャンネルを接続する
まずは先程作ったcable.jsを読み込む

```javascript
import createChannel from '~/utils/cable'
```

#### create時に実際に接続し、双方間通信状態とする

```javascript
async created () {
    this.messageChannel = createChannel({channel: 'MessageChannel', room: this.gameEventId}, {
      received: (data) => {
        // ブロードキャストされたときにトーナメント情報をサーチしにいくapiを投げる
        this.searchTournamentBrackets({gameEventId: this.gameEventId})
        // 通知を表示する
        this.$notify.info({
          title: 'トーナメント更新情報',
          message: data.message
        })
      }
    })
  }
```

`room: this.gameEventId`部分が種目部分で種目のidにて接続しているので、ここで指定したid以外でのブロードキャストは受け取りません。

また通知部分に関してはelementUIを使用しています。

#### 本番環境で使用する際は下記設定が要ります。
- nginxの設定

```
location /cable {
		proxy_pass http://app/cable;
        	proxy_http_version 1.1;
        	proxy_set_header Upgrade websocket;
        	proxy_set_header Connection Upgrade;
        	proxy_set_header X-Real-IP $remote_addr;
        	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    	}
```

- actioncableの設定を変える(バックエンド側）
actioncableは指定のURL以外websocketを繋がない設定だからアクセス元の許可をしてあげます。
`config/environments/production.rb`
URLが`https://example.com`の場合

```ruby
config.action_cable.url = 'wss://example.com/cable'
  config.action_cable.allowed_request_origins = [ 'https://example.com/', /https:\/\/example.*/ ]
```

- websocketにはws:で始まるものとwss:で始まるものとあります。httpとhttpsの関係と同じですので、それぞれの環境に合わせる必要があります。

## 負荷テストしてみました
- 同時接続数が多いときにリアルタイム更新処理をさばけるか
- サーバーに対してどのような負荷がかかるのか

## 今回のテストの環境
- 弊社staging環境を使用
- 勤務しているメンバーに複数タブにて同じ画面を開いてもらいました！

### 接続数MAX 515件
![image.png](https://qiita-image-store.s3.amazonaws.com/0/221884/376bd283-7c49-f447-9d73-42f30477a021.png)

### 負荷テスト結果は無事更新処理できました。
- websocketでの接続と、pub/subについては、Redis（kvs）を使用しているので、メモリがやばいかなと思っていたけど、実際負荷がかかったのはCPUでした。
- 500接続でもリアルタイム更新できました。
- 500接続というのは、同じ種目のトーナメントを同時に見ている人（サイトへのアクセス総数ではない）

#### 更新時のメモリ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/221884/007c1e47-a2d1-5af4-5162-2743e4136f1a.png)

#### 更新時のCPU
![image.png](https://qiita-image-store.s3.amazonaws.com/0/221884/82757c45-f37d-8bbe-b922-e5396d0c8789.png)


## 課題
- 弊社ではGCPを使用してるのですが、GCPにてロードバランサを設定しています。<br>その際にロードバランサの外側はhttps通信をしていますが、ロードバランサ内はhttpでやりとりをしているため、リアルタイム更新ができなかった。<br>　→インフラの調整中です
- トーナメントを表示したままスマホをロックした場合に更新させることができない。<br>　→解決できるのでしょうか？？


## まとめ
- ActionCableを使用することでリアルタイム更新可能なwebアプリケーションを作成することができました。
- 更新ボタンを押して貰う必要がなくなるため、ユーザービリティの向上につながったと思います。
- 自分が未熟なため、リアルタイム処理の実装についてのベストプラクティスがわかりません。
- Action cableの情報についてもチャットアプリを作って見た系はある程度。

以上です。ありがとうございました。