Action Cable+Flex+React로 실시간 채팅 시위를 만들어 봤습니다.

성과물

시위행진(Heroku)http://fluxchat.takeyu-web.com/
소스 코드https://github.com/takeyuweb/rails-fluxchat-example

키워드

Rails 4.2

ActionCable

ES6

React

Flux (Alt)

Action Cable?

코드는 아직 다 읽지 않았지만 웹소켓을 이용한 실시간 통신을 쉽게 실현하기 위한 서버 클라이언트 프레임워크 설치라고 생각합니다.(오류가 있으면 지적하십시오!)
Rails 규칙에 따라 서버 클라이언트 측에 정해진 레벨을 설정하면 실제 연결 처리, 연결의 감시, 재연결, 수신된 데이터의 처리 등 세부적인 동작이 액션 케이블을 좋게 느끼게 할 수 있다.
또한 Action Cable 서버는 이전 웹 서버rails s와 별도로 시작해야 합니다.(물론 포트 비워두기도 함)

# cable/config.ru
require ::File.expand_path('../../config/environment',  __FILE__)
Rails.application.eager_load!

require 'action_cable/process/logging'

run ActionCable.server

2880번 포트에서 웹소켓 서버를 시작합니다(※ 포트는 아직 결정되지 않았기 때문에 무엇이든 가능합니다. 여기는 공식 샘플에 맞춘 것입니다)bash
$ bundle exec puma -p 28080 cable/config.ru
HTTP 서버는 따로 있죠.bash
$ bundle exec rails s
또 Rails5의 새로운 기능이지만 Rails4도 사용할 수 있다.

gem 'rails', '4.2.4'
gem 'actioncable', github: 'rails/actioncable'
gem 'puma'

주안점

Flex 및 WebScoket(Action Cable)

Flex에 대한 학습이 부족해서 이해상의 차이가 있을 수 있지만 그림의'웹 API Utils'로 실현해 보았습니다.

보내다

View (React Component) -> Action Creator -> Channel (ActionCable Subscription)View에서 발생한 이벤트는 Action Creator를 통해 Action Cable의 Channel에 메시지를 전달합니다.

접수

Channel (ActionCable Subscription) -> Action Creator -> Dispatcher -> Store -> View (React Component)채널에 들어온 데이터를 Action Creator에게 건네주고, 그 이후의 일은 당신에게 맡기겠습니다.

Action Cable

인증

웹소켓에서 쿠키를 이용할 수 있기 때문에 서명한 쿠키를 사용하는 것이 편리하다.

Action Cable을 통해 전송된 데이터

공식 샘플 응용 프로그램는 Rails5의 새 Renderer가 액션 밖에서 일부 템플릿을 처리하고 HTML로 보내는 느낌이지만 Action Cable 자체는 무엇이든 보낼 수 있기 때문에 고객 측에서 이에 맞는 처리를 하면 된다.
이번 샘플은 발송측(Ruby/Rails)에서 모델 실례.to_json를 만들었을 뿐, 수용자(JavaScript/Action Cable.Subscription)에서 만들었다JSON.parse.

디렉터 및 백그라운드에서 고객에게 알림 보내기

ActionCable.server.broadcast 이후에 나았어요.시간이 필요할 때가 있으므로 Active Job과 함께 비동기적으로 수행하는 것이 좋습니다.

class MessageRelayJob < ApplicationJob
  def perform(message)
    if message.to.present?
      # 宛先が指定されている場合はそこと自分に送る
      ActionCable.server.broadcast "chat_activity:#{message.uuid}", message.to_json
      ActionCable.server.broadcast "chat_activity:#{message.to}", message.to_json
    else
      # そうでなければ全体へ
      ActionCable.server.broadcast 'chat_activity', message.to_json
    end
  end
end

실제로 전체적인 방송은 수신자가 사망할 정도로 늘어나기 때문에 채팅의 경우 채팅방 ID 등으로 한정할 필요가 있다.

require('react') 같은 걸 하고 싶고 ES6에도 쓰고 싶고

제가 요즘 Rails의 JS 개발 환경을 알려드릴게요.
http://qiita.com/kozo002/items/a276569e85395fce801e
이곳의 보도는 참고가 되었다.

즐겁다.

그런 느낌으로 잠시 해봤던 액션 케이블과 플렉스는 상당히 즐거웠다.
실제 운용에서 계속 연결되어 발생하는 자원 소모는 어떤 상황인지, 부하 테스트는 어떻게 합니까?또는 서버는 무엇을 사용합니까?예를 들어 경로에 있는 ELB가 어떤지, 안드로이드 표준 브라우저의 대응이 4.4인 이후 상대적으로 비대응 단말기에 문제가 많은 것 같아서 꼭 사용해야 한다고 생각합니다.

보안 우려

미조사.
안전성에 참고할 만한 기사 노트.
IPA 보안 프로그래밍 워크숍: 웹 응용 프로그램 편
웹 응용 프로그램 개발자를 위한 HTML5 보안 시작
Heroku로 만든 웹소켓 앱.
WebSocket 커뮤니케이션의 이점 고려
최근 몇 년 동안의 자바스크립트 프로그램 설계는 일반적으로 처리 전체를 문서#ready 프로그램으로 포장하지만, 이러한 상황에서 XSS의 취약성이 있어도 이미 연결된 웹소켓 실례에 외부에서 접근할 수 없다.
DHH의 샘플과 이번 시연 채팅window.App.cable.connection.webSocket은 웹소켓 실례를 얻을 수 있기 때문에 이런 상황을 고려해 보는 것이 좋다.