가고시마대학에서 앱 개발 서클을 하고 있는 @gakutomo 입니다.
이번에는 Vue.js를 사용하는 웹 응용 프로그램에 채팅 기능을 통합하고 싶었으므로 Rails의 ActionCable을 사용하여 폭속을 구현하려고했습니다.

ActionCable이란?

WebSocket을 다루는 Rails5의 새로운 기능
채팅과 같은 실시간으로 데이터 업데이트하는 앱을 만들 수 있습니다.

이런 녀석

운영 환경

클라이언트측

macOS High Sierra

Google 크롬

Vue.js

서버측

CentOS 7

Rails 5.2

서버 측 구현 절차

Rails 애플리케이션을 작성했다고 가정합니다.

채널 만들기

콘솔

rails g channel message

채널 설정

app/channels/message_channel.rb

class MessageChannel < ApplicationCable::Channel
  # チャンネル接続時に呼ばれる
  def subscribed
    stream_from "message_channel"
  end

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

라우팅 추가

config/route.rb

Rails.application.routes.draw do
  # 以下を追記
  mount ActionCable.server => '/cable'
end

클라이언트 측 구현 절차

Vue.js에서 구현합니다. Rails의 WebPacker는 작동하지 않았으므로 로컬에서 WebPack을 사용하여 개발하고 있습니다.

먼저 필요한 패키지를 설치합니다.

콘솔

npm install actioncable

main.js를 진입 점으로 진행합니다.

main.js

import Vue from 'vue';
import ActionCable from 'actioncable';
import Chat from './chat.vue';

const cable = ActionCable.createConsumer('ws:hoge.com:3000/cable');
Vue.prototype.$cable = cable;

new Vue({
  components: {
    Chat,
  template: '<Chat/>',
  },
}).$mount('#app');

통신 부분 구현

chat.vue

<template>
  <div>
    <input v-model="msgBox" placeholder="message here"></input>
    <button v-if="messageChannel" @click="speak">送信</button>
  </div>
</template>

<script>
export default {
data() {
  return {
    msgBox: "",
    messages: [],
    messageChannel: null,
  };
},
created() {
  this.messageChannel = this.$cable.subscriptions.create( "MessageChannel",{
    received: (data) => {
      this.messages.push(data)
    },
  })
},
methods: {
  speak() {
    this.messageChannel.perform('speak', { 
      message: msgBox, 
    });
  },
},
}
</script>

빠는거리

스마트 폰에서 다음 설정을하지 않으면 연결할 수 없습니다

https로부터의 WebSocket는 wss://로 하지 않으면 안 된다

config/application.rb

ActionCable.server.config.disable_request_forgery_protection = true
config.action_cable.url = 'wss://hogehoge.com/cable'

참고

Rails 5 + ActionCable로 만들기! 간단한 채팅 앱
rails와 vue로 실시간 주문 시스템을 만들어 보았습니다.
ActionCable의 README를 읽고 채팅 앱을 만들어 보았습니다.
프런트 엔드에서 ActionCable을 npm을 통해 사용
Action Cable에서 진행률 표시줄 업데이트